Modal

Use modals to display focused content or request user decisions without leaving the current page.

General

Ensure sufficient colour contrast for all text and controls

Provide clear, descriptive titles that explain the modal's purpose

Make all interactive elements keyboard accessible

Trap focus within the modal while it is open

Return focus appropriately when the modal closes

Web

Semantic markup

Use role="dialog" or role="alertdialog" on the modal container

Use aria-modal="true" to indicate the modal nature

Use aria-labelledby to reference the modal title

Use aria-describedby to reference the modal description (if needed)

Key accessibility attributes:

role="dialog" : Identifies the element as a modal dialogue

role="alertdialog" : Use for modals that contain urgent information requiring immediate attention

aria-modal="true": Indicates content outside the modal is inert

aria-labelledby: References the modal title (required)

aria-describedby : References the modal description (optional but recommended)

Close button: Provide descriptive aria-label (e.g., "Close modal" or "Close dialogue")

Focus management

When the modal opens, move focus to the first focusable element (typically the close button or primary action)

Trap focus within the modal — pressing Tab should cycle through modal elements only

Implement a focus trap using JavaScript or a focus trap library

When the modal closes, return focus to the triggering element

Tab (⇥) — Move focus through modal elements

Shift + Tab (⇧ + ⇥) — Move focus backwards through modal elements

Escape (Esc) — Close the modal (always required)

Enter or Space — Activate focused button

Overlay behaviour

The overlay should not be focusable

If clicking the overlay dismisses the modal, ensure this is clear to screen reader users

For critical decisions, consider disabling overlay click dismissal to prevent accidental closure

When a modal opens, screen readers announce the role, title, and description

Example announcement: "Confirm deletion dialogue. Are you sure you want to delete this item? This action cannot be undone."

Use role="alertdialog" for urgent modals to ensure immediate announcement

Inert content

Content behind the modal should be inert (non-interactive)

Use aria-modal="true" to inform assistive technologies

Consider using the inert attribute on background content

Prevent keyboard and screen reader access to underlying page content

React Native

Use an appropriate modal component with accessibility properties

Provide accessibilityLabel for the modal describing its purpose

Use accessibilityRole="dialog" or appropriate role

Ensure the close button is clear accessibilityLabel (e.g., "Close modal")

Manage focus appropriately when the modal opens and closes

Ensure all interactive elements meet a minimum 44px × 44px touch targets