Loading...
Loading content...
Loading content...
Warn users about timeouts to prevent data loss.
Why it matters: Helps users manage their time and avoid losing work.
Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.
What This Means: This success criterion requires that users must be warned about inactivity timeouts that could cause data loss. The warning should inform users how long they have before the timeout occurs. This allows users to take action to prevent data loss. If data is preserved for more than 20 hours of inactivity, warnings are not required.
Why It's Important: Users with cognitive disabilities or attention disorders may need to take breaks or may become distracted. Without warnings about upcoming timeouts, they may lose their work unexpectedly. By providing clear warnings, users can save their work, extend their session, or take other actions to prevent data loss.
Show warnings before inactivity timeouts occur. Provide clear information about how much time remains and what will happen if the timeout occurs. Allow users to extend the session or save their work. Warnings should be prominent and easy to understand. If data is automatically preserved for more than 20 hours, warnings are not needed.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with attention disorders can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Session expires without warning, causing data loss.
<form>
<!-- No warning before timeout -->
</form>Users are warned before session expires, allowing them to extend or save data.
<form>
<!-- Warning shown before timeout -->
</form>
<div id="timeout-warning" class="warning">
Your session will expire in 2 minutes. Click to extend.
</div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.2.6 Timeouts are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If I preserve data for 20 hours, I don't need to warn users.
While 20-hour preservation is an exception, it's better practice to warn users about timeouts regardless. Warnings help users manage their time and prevent unexpected data loss.
No warning before inactivity timeout causes data loss.
Implement timeout warnings that appear at least 20 seconds before expiration. Allow users to extend the session. Auto-save data to prevent loss.
Timeout warnings appear too late or are unclear.
Show warnings well in advance (at least 20 seconds). Use clear, actionable language. Provide prominent buttons to extend the session.
Note: These are official W3C resources for 2.2.6. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.2.6 Timeouts correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.2 Enough Time