focus-entirely-obscured

Description

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

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

The focus-entirely-obscured rule follows Level AA conformance and allows user interface elements to be 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. In the second image, as the cookie warning box completely obscures the user input element with keyboard focus, this website violates the focus-entirely-obscured rule.

In the following example, you can see that the cookie warning box covers only a part of the user input element that has keyboard focus (the button Seasonal Dishes). So, the following modified website does not violate the focus-entirely-obscured rule.

Note that while partially covered user input elements with focus do not break the focus-entirely-obscured rule, they violate the stricter focus-obscured-enhanced rule (Level AAA conformance).

How to fix?

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

• Check if your website has modals, dialog boxes, cookie banners, and other components that fully hide a user element.
• Redesign such components so that the user interface elements are at least partially visible when they receive focus, or ensure keyboard focus is retained in the components until they are closed.

Reference

• WCAG 2.4.11: Focus Not Obscured (Minimum) (Level AA)
• focus-obscured-enhanced