When navigating through the page with the keyboard, users need to know where they are on the page.
Visual Focus
Why Is This Important?
If the focus is not visible, users have no chance to efficiently navigate the page.
Checking for Basic WCAG Requirements
- Follow the advice in the Keyboard Access check.
- Observe that every focused element has a visible indication that it is focused.
If there is any indication of focus, the focus is considered visible. (This means that even minor changes in appearance technically meet WCAG.)
Best Practices
- Have a clearly visible indication of the focus, that meets at least the 3:1 contrast ratio and/or change the outline of the element.
Tools & Bookmarklet
- ANDI has very nice visualizations that show interactive elements. It also adds a clearly visible focus outline to the page.