focus-obscured-enhanced

Description

User interface elements which receive keyboard focus must be completely visible. This helps users who can’t use pointing devices understand which element has keyboard focus. Ensure you do not design websites in which modals, dialog boxes, cookie banners, and other components overlap a user element.

If a component that overlaps UI elements is necessary, ensure that keyboard focus remains in that component until the user closes that component.

The focus-obscured-enhanced rule follows Level AAA conformance and doesn’t allow user interface elements to be even partially hidden when they receive keyboard focus.

Example

In the following example, the first image shows a restaurant website’s homepage and the second image shows how it looks when a cookie warning box appears over it.

In both the images, the button Seasonal Dishes has keyboard focus. As the cookie warning box partially obscures the user input element, this website violates the focus-obscured-enhanced rule.

In the following example, you can see that the cookie warning box does not cover the user input element that has keyboard focus (the button Seasonal Dishes). So, the following element does not violate the focus-obscured-enhanced rule.

How to fix?

Follow these steps to fix any violations in the focus-obscured-enhanced rule:

• Check if your website has modals, dialog boxes, cookie banners, and other components that overlap a user element.
• Redesign such components to not overlap user interface elements that may receive keyboard focus, or ensure that keyboard focus is retained in such components until they are closed.

Reference

• WCAG 2.4.12: Focus Not Obscured (Enhanced) (Level AAA)
• focus-entirely-obscured