Loading...
Loading content...
Loading content...
Users can postpone or suppress interruptions (like alerts).
Why it matters: Helps users with attention disorders stay focused.
Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency.
What This Means: This success criterion requires that interruptions like alerts, notifications, updates, or other content that appears automatically must be able to be postponed or suppressed by users. This allows users to control when they receive interruptions, helping them stay focused on their current task. Only emergency interruptions (like critical security alerts) are exempt.
Why It's Important: Users with attention disorders or cognitive disabilities can be easily distracted by interruptions. Unexpected alerts or notifications can disrupt their focus and make it difficult to complete tasks. By allowing users to postpone or suppress interruptions, we give them control over their experience and help them maintain focus.
Provide controls to postpone or suppress alerts and notifications. Allow users to set preferences for when they receive interruptions. Provide 'Do not disturb' modes or quiet hours. Only show emergency interruptions immediately, and clearly mark them as emergencies. For non-emergency interruptions, provide options to 'Remind me later' or 'Dismiss'.
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.
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.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Alerts appear automatically and cannot be postponed or suppressed.
<div id="alert" class="alert">
Important notification
</div>
<script>
setInterval(() => {
document.getElementById('alert').style.display = 'block'
}, 30000)
</script>Alerts can be postponed or suppressed by the user.
<div id="alert" class="alert">
Important notification
<button onclick="postponeAlert()">Postpone</button>
<button onclick="dismissAlert()">Dismiss</button>
</div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.2.4 Interruptions 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:
All notifications are important, so users shouldn't be able to suppress them.
Users need control over interruptions to maintain focus. Only emergency interruptions should be non-suppressible.
Notifications that cannot be postponed or suppressed.
Add controls to postpone, dismiss, or suppress notifications. Provide settings for users to control notification preferences.
Interruption controls that are hard to find or use.
Make interruption controls prominent and easy to access. Provide clear labels and keyboard accessibility.
Note: These are official W3C resources for 2.2.4. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.2.4 Interruptions 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