Hidden or empty element receives focus

Link to Hidden or empty element receives focus copied to clipboard

Keyboard focus or touch screen swiping falls on an element that is hidden or empty

Rule ID:
User Impact:


Every focusable element must be visible and must have content.


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

Additional Resources