General
- Ensure sufficient colour contrast for all text and controls
- Provide clear, descriptive titles for all overlays
- Make all interactive elements keyboard accessible
- Trap focus within the overlay while it is open
- Return focus appropriately when the overlay closes
Web
Semantic markup
- Use role="dialog" on the overlay container
- Use aria-modal="true" to indicate a modal nature
- Use aria-labelledby to reference the overlay title
- Use aria-describedby to reference additional description if needed
Key accessibility attributes:
- role="dialog": Identifies the element as a dialogue
- aria-modal="true": Indicates content outside the overlay is inert
- aria-labelledby: References the overlay title (required)
- aria-describedby: References description or summary (optional)
- Close button: Provide descriptive aria-label (e.g., "Close overlay")
Focus management
- When overlay opens, move focus to the first focusable element (typically close button or beginning of content)
- Trap focus within the overlay — Tab should cycle through overlay elements only
- When the overlay closes, return focus to the triggering element
Keyboard navigation
- Tab (⇥) — Move focus through overlay elements
- Shift + Tab (⇧ + ⇥) — Move focus backwards through overlay elements
- Escape (Esc) — Close the overlay
- Enter or Space — Activate focused button or control
- Arrow keys — Scroll content when focused in scrollable area (browser default)
Scrollable content
- Ensure scrollable regions are keyboard accessible
- Users should be able to scroll using arrow keys, Page Up/Down, and spacebar when focused on the content area
Background behaviour
- The background overlay should not be focusable
- Clicking the background should close the overlay
Screen reader announcements
- When an overlay opens, screen readers announce the role, title, and description
- Example announcement: "Video transcript dialogue. Watch the product demonstration and read along with the full transcript."
- Scrollable regions should be announced appropriately
- Use heading structure within content to aid navigation
Long content considerations
- Use proper heading hierarchy (<h2>, <h3>, etc.) to structure long-form content
- Provide skip links for very long content if appropriate
- Consider providing a "Back to top" button for lengthy scrollable content
- Ensure all headings are properly marked up for screen reader navigation
Inert content
- Content behind the overlay should be inert (non-interactive)
- Use aria-modal="true" to inform assistive technologies
- Prevent keyboard and screen reader access to underlying page content