Hidden or empty element receives focus
Keyboard focus or touch screen swiping falls on an element that is hidden or empty
- Rule ID:
- focus-on-hidden-item
- User Impact:
- Serious
- WCAG :
- 2.4.3.a
Rule
Every focusable element must be visible and must have content.
Background
When an element that is not visible receives keyboard focus, users may be left wondering if they are missing content or functionality. Sighted users may have difficulty locating the focused element, and the purpose of the element may not be obvious to users of assistive technology.
How to Fix
The method you use to fix this issue will depend on how you intend the element to behave.
Choose one of the following options:
-
If the element is meant to be neither visible nor focusable, do one of the following:
- Remove the element from the DOM
- Hide the element using the CSS property
display: none;
-
If the element is meant to be visible, but not interactive, make it visible and remove the focus state
-
If the element is meant to be visible and interactive, then ensure that it is both focusable and visible to all users