Skip to main content

Cornell University

Web Accessibility Reviews

Elements that currently have focus may never be hidden by other elements (such as a sticky header).

WGAC 2 criterion 2.4.11 Focus Not Obscured (Minimum) (AA)
Category Keyboard
ACT Rules

WCAG 2 criterion

2.4.11 Focus Not Obscured (Minimum) (Level AA)

Tools and requirements

  • Manual Evaluation

Test procedure
For any focusable element on the page, check to ensure that at least some portion of the element's focus indicator is visible when focus is granted to it.

If focus is "visible" behind a semi-opaque overlay, it is not a failure of this particular criterion. Instead, in these situations, you would likely want to consider a failure against 2.4.3 Focus Order (#56) because focus should not leave an overlay without it dismissing or 1.4.11 Non-Text Contrast (#39) because the focus indicator is far less likely to have a 3:1 contrast ratio when hidden behind a semi-opaque background.

If focus is hidden behind an element that the user opened, it will only fail if the user can use a keyboard command to view the focused element without moving focus. (This includes using ESC to close an overlay, using arrow keys to scroll the page without moving focus, or using a command to toggle between two different views.)

This criterion is particularly important to check when there are sticky headers or modals present on the page. These elements are broken away from the normal flow of the page. As such, other page content will flow underneath these elements.

If a component is movable by the user, the visibility of the focus indicator is only evaluated against the initial placement of the movable component. (Dragging a window away from its initial position such that focus may become hidden will not constitute a failure.)

Specific situations that can be flagged under this criterion include

  • A sticky header (or other sticky element) fully obscures the focus of an element like a link or button.
  • A modal or slide-over (or similar) allows focus to escape the element without disappearing, causing elements to gain focus behind the modal/slide-over.

AI Prompt