WCAG Principle: Operable
Guideline 2.5: Enough Time (Provide users enough time to read and use content)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.2.1?
- Turn off: The user is allowed to turn off the time limit before encountering it; or
- Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
- Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, “press the space bar”), and the user is allowed to extend the time limit at least ten times; or
Essential Exception: The time limit is essential and extending it would invalidate the activity; or
20 Hour Exception: The time limit is longer than 20 hours.
People with disabilities may need more time to complete tasks on a web page for various reasons. For example, people with low vision may need more time to read text, and people with dexterity impairments may need more time to click on links or fill out forms. If a web page has a time limit that cannot be adjusted, it may be impossible for some users to complete the task, making the web page inaccessible to them.
Who benefits?
Everyone benefits from having control over time limits, but it is essential for people with disabilities. This includes:
- Users who are blind or have low vision.
- Users with motor or dexterity impairments.
- Users with cognitive disabilities.
- Users with learning disabilities
How to Meet Success Criterion 2.2.1
Common mistakes:
- Not providing any way for users to adjust or turn off the time limit.
- Only providing users with a small amount of time to extend the time limit.
- Not providing users with a warning before the time limit expires.
- Making it difficult for users to extend the time limit.
How to fix these mistakes:
If you are not currently meeting Success Criterion 2.2.1, there are a few things you can do:
- Provide an option for users to turn off the time limit. You can provide a checkbox or button that users can click to disable the time limit.
- Provide a slider or other control that allows users to adjust time limits.
- Warn users before the time limit expires. This gives them a chance to save their work or complete the task before they are timed out.
- Give users at least 20 seconds to extend the time limit with a simple action (such as pressing the space bar).
Helpful tips for developers:
- Use a JavaScript library or framework to implement timing controls on your website. This ensures that the controls are accessible to all users, regardless of the browser or device they are using.
- Make sure that your timing controls are accessible to all users, including those who use screen readers and other assistive technologies.
- Test your timing controls with different users to make sure that they are easy to use and understand.
- Make the instructions on how to turn off or adjust the time limit clear and easy to follow. This should be available in visual, text, and audio formats.
How to test if you've met compliance:
- Check if your web page automatically redirects to another page after some time without the user taking any action.
- Check if the user is provided a way to turn off, extend, or adjust the timing of the page refresh.
If either of these checks fails, then your website does not comply with this criterion.
Bad and Good Examples
bad Code Snippet Example
<div id="timer">
<p>Time remaining: <span id="time">60</span> seconds</p>
</div>
<script>
function startTimer() {
var time = 60;
setInterval(function() {
time--;
document.getElementById('time').innerHTML = time;
if (time === 0) {
// Do something when time expires
}
}, 1000);
}
startTimer();
</script>
This code snippet fails Success Criterion 2.2.1 because it does not provide users with a way to adjust or turn off the time limit. If a user needs more than 60 seconds to complete the task, they will not be able to do so.
Good Code Snippet
How to test if you've met compliance:
<div id="timer">
<p>Time remaining: <span id="time">60</span> seconds</p>
<button id="stop">Stop</button>
<button id="extend">Extend</button>
</div>
<script>
function startTimer() {
var time = 60;
setInterval(function() {
time--;
document.getElementById('time').innerHTML = time;
if (time === 0) {
// Do something when time expires
}
}, 1000);
}
document.getElementById('stop').addEventListener('click', function() {
clearInterval(interval);
});
document.getElementById('extend').addEventListener('click', function() {
time += 60;
});
startTimer();
</script>
This other example meets the requirements for adjustable timing because it provides users with a way to stop or extend the time limit. The stop button will stop the timer, and the extend button will extend the timer by 60 seconds. Users can also use the keyboard to control the timer. Pressing the Space bar will stop or start the timer, and the Enter key will extend the timer by 60 seconds.
This is just one example of how to meet the requirements of Success Criterion 2.2.1. There are many other ways to implement this, such as using a slider or text input field to allow users to adjust the time limit.
Frequently Asked Questions
What are some examples of time-limited content covered by WCAG 2.2.1 (Timing Adjustable)?
- Online quizzes and tests
- Interactive games and simulations
- Auctions and bidding systems
- Live streaming events
- Timed forms and surveys, and
- Any other content that requires users to complete a task within a certain amount of time.
How can developers address adjustable timing for real-time activities?
Developers can address adjustable timing for real-time activities by providing users with the ability to pause, rewind, or slow down the activity. For example, during live events, users should be able to choose a live stream quality that works for their internet connection or pause the event to take a break or to catch up on missed content. It is also important to provide a transcript or closed captions for the event to make it more accessible to users who are deaf or hard of hearing.
Can adjustable timing be applied to mobile applications as well?
Yes, it can be even more important to provide adjustable timing in mobile applications, as users may be using their devices in a variety of environments, such as on public transportation or in a noisy room.
