Skip to content
University of Georgia

 

When content is hidden by default and then appears as a popup or dialog based on user behavior, specific techniques are required to ensure the interface is accessible – especially for screen reader users. Users should know in advance that their action will trigger a popup, and once it appears, they must be able to access and dismiss it. Popups include modal dialogs, tooltips, dropdown menus, and disclosure widgets. Each type has specific accessibility requirements. Focus management is critical.

 

Why this matters

Popups, modals, and overlays interrupt the user flow. For keyboard and screen reader users, poorly implemented popups can trap focus, hide content, or be impossible to dismiss. When a popup appears without warning or cannot be dismissed, it creates a barrier that completely blocks access to the rest of the page.

 

Techniques

 

Use the Appropriate Triggering Element

The element that triggers the popup must be the correct element for the job.

 

Avoid Triggering on Hover or Focus

Users should explicitly choose to expose hidden content by clicking, tapping, or pressing Enter/Space.

 

Inform Screen Reader Users When a Popup Appears

Screen reader users must be notified when a popup appears.

Back to top

 

Ensure All Users Can Access Popup Contents

Popup must be accessible with both mouse and keyboard.

  • Content should not disappear prematurely
  • For modal dialogs: trap focus within the dialog until dismissed
  • For non-modal popups: popup should remain visible until user dismisses it or moves away

 

Allow Dismissal with the Escape Key

All popups should be dismissable with the Escape key.

  • Once dismissed, focus should return to the element that triggered the popup
  • This is essential for keyboard accessibility

 

Consult W3C’s ARIA Authoring Practices Guide

Use the appropriate design pattern for your specific popup type.

Back to top

 

Common Popup Types and Their Requirements

Modal Dialog

  • Focus trapped inside
  • Escape to close
  • Focus returns to trigger

Tooltip

  • Appears on hover/focus
  • Dismissable with Escape
  • Not interactive content

Dropdown Menu

  • Arrow key navigation
  • Escape to close
  • Focus management

Disclosure Widget

  • Toggle show/hide
  • aria-expanded state
  • Content in DOM order

 

Common mistakes

  • No focus management when popup opens, leaving keyboard users confused about where focus went
  • No way to close popup with keyboard (Escape key), trapping keyboard users
  • Focus not trapped within modal, allowing users to tab outside the modal to page content
  • Focus not returning to trigger element after popup closes
  • Popup content not announced to screen readers when it appears
  • No visible close button, making it unclear how to dismiss the popup

Back to top

 

WCAG 2.1 Success Criteria

  • 1.3.1 Info and Relationships (Level A) – Users must understand the relationship between triggers and their popups
  • 4.1.2 Name, Role, Value (Level A) – Popups must expose their name, role, and state to assistive technologies
  • 1.4.13 Content on Hover or Focus (Level AA) – Content triggered by hover or focus must be dismissable, persistent, and non-intrusive

Back to top

 

Getting help

If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.

Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.

Back to top

Learn More About Digital Accessibility

Learn about the new federal rules regarding web accessibility from the U.S. Department of Justice and web content accessibility guidelines.

DOJ Web Accessibility Rule WCAG 2.1 Guidelines