Keyboard access
Can you reach all interactive elements using the tab key?
Why it’s important
- Anita has low vision and relies on the keyboard to complete tasks.
- Tiara has tendonitis and is unable to use a mouse; instead, she uses the keyboard to navigate the web.
Next steps
- Use the keyboard to navigate through the page using the tab key.
- Users should be able to access and move between links, buttons, forms, and other controls using their Tab key and other keystrokes.
-
Check users can reach all interactive elements and activate them with the spacebar, enter key or arrow keys.
- Use semantic HTML elements that are accessible by default (For example: header, main, button etc). If you must use divs for interactions, ensure they are focus-able and labeled appropriately.
- Check to see that focus is always visible and appears in logical order.
- Make sure that no content gets focused offscreen or is hidden from view.
- Check that the page includes a skip navigation link (if navigation is present before the main content). This will allow users to skip past navigation to reach the page’s main content.
References
Resources
- Keyboard Accessibility (webAIM)(this link opens an external website)
- Keyboard only navigation for improved Accessibility(this link opens an external website)
- Video - Keyboard Compatibility (YouTube)(this link opens an external website)
World Content Accessibility Guidelines
- 2.1 Keyboard accessible (Guideline)(this link opens an external website)
- 2.1.1 Keyboard(this link opens an external website)
- 2.1.1 No Keyboard Trap(this link opens an external website)
- 2.4.3 Focus Order(this link opens an external website)
- 2.1.2 No Keyboard Trap(this link opens an external website)
- 2.4.7 Focus Visible(this link opens an external website)