Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Esc | Closes the modal window. |
- See detailed information about the keyboard support for the all buttons, input, etc., in the Keyboard control guide.
- Don't forget to check recommendations on accessibility for Form.
Roles & attributes
The list below describes roles and attributes that component already has.
| Role | Attribute | Element | Usage |
|---|---|---|---|
dialog | div | Identifies the element that serves as the dialog container. Gets this role from Modal. | |
aria-labelledby="IDREF" | Gives the dialog an accessible name by referring to the element that provides the dialog title. | ||
aria-modal="true" | div | Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). Gets this attribute from Modal. |
Considerations for designers & developers
Attributes
The list below will help you to keep in mind the necessary attributes to make our components fully accessible in the particular cases in your interfaces.
| Attribute | Element | Usage |
|---|---|---|
aria-describedby="IDREF" | div | Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog. |
Headings
By default, FullscreenModal.Title in our Modal component is marked as h2. Since there is no strict WCAG recommendation on this, we've made this decision for the following reason: Modal windows are usually part of the page and don't have a separate URL, so to keep consistency within the page, it's recommended to have only one h1 tag on the page. Having more than one h1 tag per page can confuse users of assistive technology.
However, if your modal window has a separate URL, you can mark FullscreenModal.Title as h1.
Resources
W3 modal dialog example has detailed information about the modal window accessible behavior.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.