Skip to content
Accessible Technology

Popups

Overview

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, especially for screen reader users. Users should know in advance that their action will trigger a popup, and when the popup appears they should be informed of this and should be able to access its contents. They should also be able to dismiss the popup. All of this should happen within the flow of the user’s experience, not disrupting them by taking them to a new location on the page.

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 ARIA Authoring Practices Guide for the appropriate design pattern for your popup. For more information about this resource, see the “Additional Resources” section of our ARIA page.

WCAG 2.1 success criteria

The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1: