modal-focus-trap

Description

Keyboard focus must be locked inside the modal when a modal is open on a website. Users shouldn’t be able to use the tab key to move outside the modal without closing the modal.

The purpose of a modal won’t be served if a user tabs out of the modal without closing the modal or performing an action. It would be tough for keyboard users to return to the modal input if the keyboard focus shifts outside the modal without closing it.

You can use the tabindex attribute to limit the keyboard focus within the modal until it is closed.

Example

In the following example, the first image shows a restaurant website’s homepage with a modal open. The keyboard focus here is on the ‘OK’ button in the modal.

In the second image, the keyboard focus shifts to ‘Inside the Cafe’ button without closing the modal when the user presses the tab key a couple of times. This behavior creates an inconsistent experience for users of assistive technologies.

This example violates the modal-focus-trap rule.

In contrast, consider the following example.

Here, in the first image, the keyboard focus is on the ‘OK’ button, and in the second image, it shifts to the ‘Maybe Later’ button. The user cannot move outside the modal without closing the modal. In other words, the keyboard focus remains trapped within the elements in the modal.

This example does not violate the modal-focus-trap rule.

How to fix?

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

• Identify any modals used on your webpage.
• Check if the user can use the tab key to move the keyboard focus outside the modal when the modal is still open.
• If yes, use the tabindex attribute to limit the keyboard focus within the modal until it is closed.

Reference

• WCAG 2.4.3: Focus Order (Level A)
• Technique G59