Panel Dialog Accessibility
Best Practices
A panel dialog must use role="dialog" , expose a visible title as its accessible name, and set aria-modal="true" while open. Its close and back buttons must have accessible names. The visible title must be an onscreen heading that starts the dialog’s heading hierarchy at level 2.
A panel dialog must open from a click or application event and must not open on hover or focus. See dialog best practices for shared dialog requirements.
Opening the panel must move focus inside it and make content behind it inert. Closing it must return focus to the trigger.
Interaction Design
Keyboard
When the panel opens, focus must move into it, typically to the close button or first interactive control.
TAB and SHIFT + TAB cycle through controls inside the open panel. ESCAPE closes the panel unless an operation requires an explicit choice.
Screen Reader
A screen reader announces the dialog role and title when focus enters. Sliding to another panel must announce the new title and move focus into that panel.
The trigger must not announce ‘has popup’; a dialog is not a popup, so aria-haspopup="true" is not valid in this context.
Pointer
Clicking or tapping the close button or permitted scrim area closes the panel and returns focus to its trigger.
ARIA Reference
| Attribute | Description |
|---|---|
| role="dialog" | Identifies the panel as a dialog. |
| aria-modal="true" | Indicates that content outside the open panel is unavailable. |
| aria-labelledby | Uses the visible panel title as the dialog name. |
| aria-label | Names icon-only close and back buttons. |
| aria-hidden="true" | Hides decorative button icons. |