modal-focus-on-closure

Description

Ensure that when a modal is closed, keyboard focus returns to the triggering element or the next element.

When keyboard users close a modal, they expect the keyboard focus to return to the element that triggered the modal or the next element. If the keyboard focus shifts to a random element, users lose their flow when accessing the content on a website.

The experience of users of assistive technologies like screen readers will be jarred if the keyboard focus shifts unexpectedly when they close a modal.

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 button named ‘Seasonal Dishes’.

The second image shows the website status when the modal is closed.

Note that the keyboard focus shifted to the ‘About Us’ button when closing the modal. This creates an inconsistent experience for users of assistive technologies like screen readers as a few buttons were skipped without their knowledge.

In contrast, consider the following example.

Here, the keyboard focus shifts to the button ‘Inside the Cafe’ on modal closure. This element is the next element after the ‘Seasonal Dishes’ button on which the modal was triggered. This behavior simplifies the website for users of assistive technologies like screen readers, as they can continue accessing the elements of the website in the same order as other users.

How to fix?

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

• Identify any modals used on your webpage.
• Check if the keyboard focus returns to the element that triggered the modal or the next element when the modal is closed.
• If not, code the modal such that the keyboard focus shifts to the same element or the next element when the modal is closed.

Reference

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