Digital Accessibility Index: Learn where the world’s leading brands fall short on accessibility.

See Report

WCAG 2.1 - SC 2.4.7 Focus Visible

Provide some sort of visual indicator to indicate which element has the keyboard focus. If the browser provides a default presentation, do not use styles to remove it. (You may replace it with a different presentation more in keeping with your site design)

Official Requirements:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

How to fix:

  • Use the :focus CSS pseudo element to indicate which element has the user focus.
  • Do not use this pseudo element to remove all visual treatment of the focused element
  • Via scripting, use the onfocus and onblur event handlers to add style treatments, for browsers that do not support the :focus pseudo element natively.

Not sure where to start?

Start with a free analysis of your website's accessibility.