It’s important to enhance keyboard usability by making sure that focus logically moves through the controls on the page and that there is a clear visible indication of which control currently has focus.
- Make sure that focus order is logical. Focus order usually matches code order, so do what you can to ensure that the desired focus order matches the visual layout of controls. Don’t use the tabindex attribute with any value greater than 0 in an effort to change focus order of a control. This can lead to unpredictable changes to focus order, such as if additional controls were to be later added to the page.
- Provide a clear visual indication of focus. Use CSS to provide a clear visual indication of when links, buttons, and other active control receives focus, such as through a border line or change in text color or background color, or preferably a combination of those effects. The default browser focus effect is often not visually obvious enough, and sometimes those focus indications can be inadvertently suppressed when reset CSS files are used. For custom controls that aren’t natively focusable, such as divs or spans, use CSS to apply a visual focus effect because browsers will not provide any native indication.
- Make hidden elements visible when they have focus. Watch out for visually hidden controls that are in the focus order. They can be confusing for sighted keyboard users: If a control isn’t supposed to be active, like a menu item in a dropdown menu that hasn’t been expanded, then it shouldn’t be able to receive focus. But if a control is hidden but available to receive focus, such as a “skip to main content” link, then it should become visible when it receives focus.
Testing
Use the Tab key to move through each active element on a page.
- Is progress through elements logical, without unexpected jumps to different locations on the page?
- Is there a clear visual indication for each element as it’s focused?