2.4.7 Focus Visible
Official description of the success criterion
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
What to do?
Ensure keyboard focus is visible.
Why is it important?
Helps users understand which element is currently focused on.
Common pitfalls
Some feel that the default focus style is ugly and want to get rid of the default outline. And they either replace it with nothing or a style that is not visible enough.
Creating a custom focus style that is not visible enough on all site backgrounds.
How to test for it?
Check all interactive elements. Some automated tools can help find issues with focus styles.
The default browser focus styles are enough to conform to this criterion. Out of the more common browsers, Safari has a quite invisible focus style. But for example, Firefox and Chrome both have very visible style that works well on all backgrounds.
How to take this criterion into account in design?
If you design a custom focus style for a site, ensure the colors change if necessary based on the background of the content. If a site has different backgrounds, it is usually best to show all the different color combinations for the site developer to ensure they all get implemented.
How to take this criterion into account in development?
If you develop a custom focus style for a site, ensure the colors change if necessary based on the background of the content. If you aren't sure, either use a contrast checker tool or ask the project designer (if you have one).