The purpose of this success criteria is to help people know which element has the keyboard focus.
Table of Contents
Official Requirements
Success Criterion 2.4.7 Focus Visible (Level AA): Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Why is it required?
There are some computer users who are physically unable to make use of a mouse. There are few others who prefer using a keyboard because it is usually more efficient. Generally, Computers and web browsers to be precise, can be operated with the keyboard alone. In case of web browsers, users can make use of the Tab key to shift between focusable elements.
Having said that, it is often tough for keyboard users to identify where they are on the page. Web designers must be mindful to ensure that it is easy to make out which item or content on the page currently has keyboard focus.
How do we fix it?
1. Prevent Overriding Browsers’ Default Focus Indicator
All web browsers show a recognizable outline around the element that currently possesses keyboard focus. This outline can be disabled using the outline:none property in CSS. Do not perform this action unless you are substituting/offering a better focus indicator than the one built-in the browsers.
2. Ensure that the focus indicator is consistent across all browsers
Some browsers like Google Chrome and Safari display an easy-to-see, blue-coloured outline around the content or element that currently has the focus. However, other browsers like Mozilla Firefox and Microsoft’s Internet Explorer display a thin dotted line. It is very difficult to see the latter.
In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, make use of the :focus selector in CSS to define a style change that happens when an element has focus.
3. Use event handlers to ensure that browsers don’t support pseudo elements natively
Through scripting, use the Onfocus and Onblur event handlers to add style treatments, for the browsers that do not support the :focus pseudo element natively.
Mistakes to avoid
1. The browser’s default focus indicator has not been replaced with something that is relatively easier to see.
2. An indicator has been provided for mouse hover but not replicated for keyboard focus.
