Dialog
Messages that float over page content and provide time-sensitive alerts.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: VPDS uses a native HTML dialog element and backdrop pseudo element. Our library components already handle some of the dialog behaviors.
- Ensure the screen reader announces the dialog title and/or content. When the dialog opens, focus is moved into it and is trapped there until it closes. Tabbing will cycle through the focusable elements in the dialog.
- Use an
element for headings. - Place the close button at the end of the DOM in the dialog so that the keyboard navigation goes through all the content before the close button.
- Ensure the escape key closes the dialog. When a dialog closes, focus is returned to the control which triggered it.
Keyboard controls
Keyboard focus tab order
| Dialog | Focus behavior |
|---|---|
| Standard | Standard keyboard focus tab order will follow the DOM order. |
| With close | Focus should be placed on the first interactive element inside dialog, excluding close buttons. |
| Forms with CTAs | Not recommended to use close buttons on dialogs that include form elements. |
Keyboard
| Key | Behavior |
|---|---|
| Enter or Space | Prompts the action associated with the focused interactive element in the dialog. |
| Tab | Moves keyboard focus to the next focused interactive element in the dialog. |
| Shift + Tab | Moves keyboard focus backwards to the previous interactive element in the dialog. |
| Esc | Closes the dialog. |