modal-closure-with-esc

Description

Ensure that any modal in a website can be closed by pressing the escape key on the keyboard.

Keyboard users can close a modal in one button click if the escape key is configured to close the modal. You can use the keydown event in Javascript to map modal closure with the escape key.

Example

Consider the following example in which a modal is defined without the escape button configured to close the modal.

Although the modal has a close button defined, it is not mapped with the escape key. This makes it difficult for users who can’t access pointing devices to close the modal. So, this code violates the modal-closure-with-esc rule.

In contrast, the following example maps the Escape key with the close button using the keydown event.

With the keydown event mapped to the Escape key, keyboard users can quickly close this modal by pressing the escape key. This improves the accessibility and user experience of the modal.

How to fix?

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

• Identify all the modals used on your webpage.
• Check if these modals have a close button and if the close button is mapped to the Escape key using the keydown event.
• If not, map the close button with the Escape key using the keydown event using JavaScript.

Reference

• WCAG 2.4.3: Focus Order (Level A)
• Technique G59
• modal-exit-trap