|The element with keyboard focus must have a visible focus style that is different from the non-focus state.
- Many browsers don't provide a prominent or consistent visible keyboard focus styling for interactive elements, making it difficult for users to identify and track the element with keyboard focus.
- Author defined visible keyboard focus style makes it easier for users to know which interactive element has keyboard focus and provides more consistent user experience between browsers and operating systems.
|WCAG Success Criteria
2.4.7 Focus Visible (Level AA, Primary Success Criterion)
select elements and elements with widget roles with
- Use CSS psuedo element selector
:focus to change the styling of elements with keyboard focus.
blur event handlers on checkboxes and radio buttons to change the styling of not only the form control, but also its label text to make it easier to see.
- Styling changes should include creating a border around the interactive element and its label, typically using the CSS
- For consistent look and feel to the website it is often useful for the focus and hover styles to be the same or similar.
- Use the the keyboard (i.e. typically he "tab" key, but in the case of widgets other keys) to move focus through the links, form controls, embedded applications and widgets on the page.
- Check if the element with keyboard focus is clearly visible for all focusable elements on the page as you move focus between elements, and that it changes more than just color (i.e. border/outline around element with focus).
- Test keyboard focus styling using more than one browser and operating system, since there is a wide varability of between operating systems and browsers for styling keyboard focus.