It’s no accident that both Section 508, 1194.21(c), and WCAG 2.0 Success Criterion 2.4.7 both call for visible focus indication. Users with mobility/dexterity disabilities often rely on keyboard accessibility, perhaps using assistive technologies (such as mouth sticks) that rely on the keyboard.
Unlike mouse users who point directly to UI elements, these users need a clear on-screen indication so they know where they are on a web page as they navigate with the keyboard from UI element to UI element. Otherwise, they have limited ability to navigate form elements, follow links, select buttons, and so on.
The browser, PDF reader, Flash player or other user agent is responsible for providing a focus indicator for interactive elements. Browsers typically inherit focus indication from the operating system settings, by default. If users need a more visible indicator, they can change the OS setting, and web pages inherit the setting. This provides continuity in the user experience.
POTENTIAL PROBLEMS WITH CUSTOM FOCUS INDICATORS
Web developers should take care if they override the OS focus setting. An accessibility audit would call the following focus issues out as accessibility problems:
- No focus indicator
- Partially hidden focus indicator
- Visual effects that obscure the focus indicator
- Poor color contrast for the focus indicator
SHOULD I USE DEFAULT OR CUSTOM KEYBOARD FOCUS INDICATORS?
As a web developer, you need not avoid custom focus indicators. Your responsibility is to ensure that content, including visual effects, do not interfere with focus indication.
- Create an on-focus effect, which is similar to creating a mouse-over effect. Use the CSS :focus class as you would use :hover. a:focus does not work in Internet Explorer (as of version 7). Consider using a:active as well.
And don’t forget that you should ensure that the color contrast is sufficient so that low-vision keyboard-only users can see the focus indicator.
For example, The WCAG 2.0 guidelines use focus indication that has a yellow highlight and a thin border.