- Verify that when moving among objects that the visual focus indicator is easy to identify.
- Keyboard navigation through the software and menus should be clearly visible when the focus moves.
- Confirm that the screen reader is tracking the visual focus indicator as you navigate using a keyboard.
- Run a screen magnification program (if available) and verify that the magnifier can track the visual focus indicator as you navigate using the keyboard and mouse.
Provide Alternative Styling
- Give it a background color – Test background color change
- Change the text color (don’t forget to make it high contrast for color blind people!) – Test text color change
- Provide a custom outline – Test text outline change
- Go high visibility – Test high visibility
Use a focus state for links
By default the browser has styles to show focus on links with a dotted border but this is often eliminated by CSS reset stylesheets. Assigning a background color to focused links is probably the most important thing you can do for keyboard-only users tabbing through web pages. When users tab on to any one link this background color will display, clearly highlighting where the user is.
If your website doesn’t provide this focus state then it can be difficult for keyboard-only users to orientate themselves on pages. A focus state for links can be easily achieved with the following CSS code:
a:active, a:focus {background: yellow;}
Link Focus Examples
In this example a:focus and a:active have been styled exactly the same as a:hover. This is the best practice as it won’t matter how the user reaches the link it will look exactly the same.
The CSS code would look like the following:
a:active, a:focus, a:hover {color: #99131F; font-weight: bold; border: thin dotted #999;}
Examples
Class Example (Before, Problems, After)
WCAG 2.0 Guideline
Guideline 2.4: Provide ways to help users navigate, find content and determine where they are.
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
Suggested Tools for Checking Focus Indication
Try accessing all elements on a page using the keyboard only.