WCAG SC 2.2.1 Timing Adjustable ensures that users have sufficient time to read content and complete tasks by providing at least one of the following options: turn off, adjust, or extend time limits set by the content. Exceptions are real-time events such as auctions or live ticket sales, where the nature of the event does not allow extra time to be applied. This is crucial for users with disabilities who may require more time to interact with web content.
To provide users with the ability to control time limits set by web content, ensuring they have sufficient time to complete tasks without unnecessary time constraints. This is crucial for users with cognitive disabilities, learning disabilities, or blind users who use screen readers and may require more time to process the content on the website.
In general, providing limited time to complete a session or a task is required for security reasons. For example, if no time limit is provided and an individual completes a billing information form but leaves the computer due to some unexpected reason, someone else could access the computer and misuse the available credit information. Therefore, the goal is not to cancel time-limited sessions, but to provide the right means and tools to control them.
Provide session time control on landing page: Provide a control on the landing page for the user to initiate a longer session time or no session timeout. This could be a radio button to choose a specific extension or a button to cancel the time limit.
Allow users to extend session time: Enable users to set the time limit to 10 times the default time limit. If the regular time is 5 minutes to complete a session, provide users with an option to extend it to at least 50 minutes.
Warn users before time expires: Warn users before the time expires and provide a way to extend the time limit. Give them at least 20 seconds to opt for the extension.
Ensure keyboard operability for time extension controls: Ensure controls to extend the time limit are keyboard operable.
Provide mechanisms for time control: Provide mechanisms to pause, stop, or extend time limits for moving or scrolling content.
Example: Requesting an additional 15 minutes to complete a form
A web page with a form that automatically times out after 5 minutes without any option to extend the time.
Explanation: Users with disabilities may not be able to complete the form within 5 minutes and would be forced to restart, causing frustration and potentially leading to incomplete tasks.
<form>
<p>General instructions for completing the form...</p>
<label for="extend-time">Request additional time (1 to 50 minutes):</label>
<input type="range" id="extend-time" name="extend-time" min="1" max="50">
<span id="time-value">25</span> minutes
</form>
<script>
const rangeInput = document.getElementById('extend-time');
const timeValue = document.getElementById('time-value');
rangeInput.addEventListener('input', () => {
timeValue.textContent = rangeInput.value;
});
</script>
Explanation: A web page contains a form with a range input allowing users to request additional time. This can be anywhere between 1 to 50 minutes, which is equivalent to up to 10 times the default time to complete the form.