Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
Focus visible is very important for low vision users, people with motor disability & attention disorders. If there is no visible focus on any active element or the element that receives keyboard focus users might not be able to determine where their current focus is & will be lost. While browsers handle the default visible focus for active elements it is always a best practice to provide visible focus to the elements using the CSS techniques.
Points to Remember
- Let browsers handle the visible focus for active elements
- ensure that active element is provided with visible focus.
- Ensure that when the user is navigating through the page using keyboard visible focus moves along for every element presented on the page
- Ensure that there is sufficient contrast between the visible focus & the background of the element, for example if the visible focus is black & the background of the element is black then focus visible is not visually distinguishable.
Code Example
For the current site the visible focus is provided in style.css in the following way
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
References
Understanding Success Criterion 2.4.7
Leave a Reply