Skip to main content
No Result Found

modal-exit-trap

Severity: Critical

Description

Ensure that users can close all modals on a website using a keyboard-accessible method.

You can configure the tabindex attribute to a close button to ensure that this rule is followed.

Example

Consider the following example.

Incorrect code sample
Copy icon Copy

Although this modal has a close button, keyboard users can’t access it as a user will have to use a pointing device to click the close button. So, this code violates the modal-exit-trap rule.

In contrast, the following example defines tabindex="0" on the close button.

Correct code sample
Copy icon Copy

With tabindex="0" defined on the close button, keyboard users can easily close the modal. This improves the accessibility and user experience of the modal.

How to fix?

Follow these steps to fix the modal-exit-trap rule if it gets flagged:

  • Identify any modals used on your webpage.
  • Check if it has a close button and if the close button is navigatable using a keyboard.
  • If not, create a close button and use tabindex="0" to make it accessible using a keyboard.

Reference

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle