Skip to content


What component has

Keyboard support

Keyboard support
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EscCloses 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.

Roles & attributes
dialogdivIdentifies 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"divTells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). Gets this attribute from Modal.

Considerations for designers & developers


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.

aria-describedby="IDREF"divGives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.


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.


W3 modal dialog example has detailed information about the modal window accessible behavior.

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.