When content is hidden by default, then appears as a popup or dialog based on user behavior, there are specific techniques that are required in order to ensure the interface is accessible.
For an overview of this issue, see Popups in our IT Accessibility Checklist.
Techniques
- Be sure the element that triggers the popup is the appropriate element for the job. For more on this issue, see Links and buttons.
- Avoid triggering a popup on hover or focus. Instead, the user should specifically choose to expose the hidden content by clicking, tapping, or pressing enter or space. For more on this issue, see Predictability.
- When a popup appears, be sure screen reader users are informed of this. This will likely involve the use of ARIA. For more information, see ARIA.
- Be sure all users can access the contents of the popup, with both mouse and keyboard, without the content disappearing prematurely. Also, be sure it remains visible until users choose to dismiss it or move away from it.
- Be sure the popup can be dismissed with the Escape key. Once dismissed, the user’s focus should return to the element that spawned the popup.
- Consult the W3C’s WAI-ARIA Authoring Practices for the appropriate design pattern for your popup. This resource includes design patterns for alert and message dialogs, modal dialogs, menus, menu buttons, and tooltips, plus many other common web widgets. Each design pattern includes documentation of the needed ARIA markup, as well as details about how the widget should respond to specific keystrokes. Designers and developers should always consult these design patterns in order to help build a web where common web widgets have a consistent interface across websites.