Accessible Modal Patterns

Build modal dialogs that work correctly for all users including screen reader and keyboard users.

Usage

Describe your modal to get an accessible implementation pattern.

Examples

• "Build an accessible confirmation dialog"
• "Create an accessible modal form with validation"
• "Fix screen reader issues in our existing modal component"

Guidelines

• Trap focus within the modal while it is open
• Set aria-modal=true and role=dialog on the container
• Move focus to the first interactive element on open
• Return focus to the trigger element on close
• Close on Escape key press and optional backdrop click