Undefined Keyboard Focus Indicator
Many stylesheets use a "reset" style, that essentially removes all formatting. In doing so, the keyboard focus indicator is not defined, which prevents keyboard users from seeing what item on the page currently has the keyboard focus. Sometimes the focus is set, but it conflicts with the other colors and is not visible.
Keyboard Activation Of Custom Controls
Putting onclicks event handlers on LI, div, span, and other elements without coding for keyboard accessibility as well can create barriers for keyboard users. Unlike anchor tags, buttons, and some other elements, these HTML elements are not natively keyboard focusable. Putting onclicks on these elements will cause them to be useable only by a mouse. The options to resolve this issue depends on your intended functionality for these elements: if you intend them to show additional content, to open up sub menus, or to function as a pseudo-checkbox or button.
Some users, especially those with specific disabilities, may rely heavily on using keyboards or other devices to change focus. For instance, a user might change locations in a web page using a tab key, and this would be a change of "focus." As the user moves around the page using the keyboard controls, there should be a visual indicator showing the element with the current focus.
Having a focus strategy will improve the experience for all website users but especially helps support people with visual and motor disabilities. A focus strategy starts at the beginning of a web development project with keeping focusable content within a logical order in the DOM.
- Do not change the order of the DOM without taking into consideration the website experience for keyboard users.
- Include styles to highlight focusable content in your CSS files. (OIT base templates have this styling already included.)
- Only add focus behavior to interactive controls like buttons, links or anything else that requires user input
- Avoid using tabindex equal to anything greater than "0"
- Include "skip-link" option for navigation so users can go straight to content. Make sure this link is visible when it receives keyboard focus.
For further information, see WCAG 2.0 success criteria 2.1.1 on Keyboard Operability.