Skip to main content
No Result Found

modal-initial-focus

Severity: Critical

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.

A dialog box over a site. But the keyboard focus is outside the dialog box

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.

A dialog box over a site. The keyboard focus is inside the dialog box

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

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