<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1639054036391679&amp;ev=PageView&amp;noscript=1">

WCAG 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)

Offical 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.

Get Started