It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it.
Accessibility Requirements for 2.4.7 Focus visible (AA)
- Interactive elements like links, buttons, and form fields, have a visible focus indicator.
Common mistakes for 2.4.7 Focus visible (AA)
- The browser default focus indicator has not been replaced with something that is easier to see;
- An indicator has been provided for mouse hover, but not duplicated for keyboard focus.
Techniques 2.4.7 Focus visible (AA)
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the “Other Techniques” section.
Common Failure for 2.4.7 Focus visible (AA)
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
- F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
FAQs for Focus visible (AA)
What are the special benefits for Focus visibility
This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time.
Should I use focus visible?
Yes, any element which supports keyboard input (such as an input element, or any other element which may trigger a virtual keyboard to be shown on focus if a physical keyboard is not present) should always match :focus-visible when focused.
What is a visible focus indicator?
It indicate (highlights) which element on a web page is focused. Only one element on a page can be focused at a time, and it should be obvious. Most all focusable elements are interactive – form fields, links, buttons, tooltips, etc