Modal

Modals direct the user's attention to a task or information through a window overlaying the page content.

Keyboard


Key

Interaction

Tab

Cycles through the components that take focus

Esc

Closes modal

Space or Enter

Activates buttons

 

Focus order

Keyboard navigation is constrained to the dialog. Tab cycles through the components that take focus.

Modal component focus order

Modal component focus order

 

Design Checklist


Accessible use of color

Color is not used as the only visual means of conveying information, and it meets a minimum of Level AA WCAG standards.

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and 3:1 for large text.

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1.

Keyboard interactions

It follows WCAG standards for keyboard accessibility guidelines and includes a description of keyboard interactions.