modal-initial-focus

Description

Keyboard focus must be placed inside the modal initially when a modal is opened in a website.

Keyboard users can access interactive elements in a modal easily if the keyboard focus is automatically shifted to the modal when a modal is opened. If the keyboard focus remains outside the modal, it can be challenging for users who can’t use pointing devices to interact with the modal or dismiss it.

Example

Consider the following example.

Note that the keyboard focus is on the button ‘Seasonal Dishes’, which is outside the modal. This creates difficulty for keyboard users to perform any action on the modal, including dismissing it. This makes the website inaccessible to people who can’t use pointing devices.

In contrast, consider the following example.

Here, the keyboard focus moves inside the modal (on the ‘Ok’ button) as soon as the modal appears. This makes it easy for a keyboard user to perform any action on the modal, including closing it.

How to fix?

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

• Identify any modals used on your webpage.
• Check if the modal receives keyboard focus when it opens.
• If not, code the modal such that it receives keyboard focus as soon as the modal is opened.

Reference

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