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.
The only hard-and-fast rule is that you should not use JavaScript or CSS to remove the focus indicator. But if the focus indicator is obscured then you may want to create a custom keyboard focus indicator:
- 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.
- Use the JavaScript event handler onFocus as you would use the event handler onMouseOver. Also use onBlur as you would use onMouseOut
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.