Modal

Modal dialog overlays on top of the main content of a page. It is used to focus the user's attention on a specific task and require interaction before they can continue browsing the site. Modal dialogs are disruptive and should be used sparingly and with caution.

WCAG Score - Not compliant


Provided by the component

Focus management

When opened, focus automatically moves to the first interactive element within the modal. Focus remains trapped within the modal until dismissed, cycling through interactive elements with Tab navigation.

Focus restoration

When the modal closes, keyboard focus returns to the element that triggered the modal opening, maintaining user context and navigation flow.

Keyboard navigation

Users can close modals using the Esc key. Tab and Shift+Tab navigate through modal elements exclusively. Arrow keys navigate within specific interactive components.

Touch accessibility

Touch targets meet AA minimum size requirements (24px) and provide adequate spacing to prevent accidental activation.

 


Implementation considerations

Developers must do the following in the implementation to be considered fully accessible: