Read time: 1 minute 10 seconds
All functionality must be usable with the keyboard.
Users should be able to access and move between links, buttons, forms, and other controls using their Tab key and other keystrokes. Things like pop-up calendars should also let users type in a date or be keyboard accessible.
- Maria has tendonitis and is unable to use a mouse; instead, Maria uses the keyboard to navigate the web.
Steps to take
- Use the keyboard to navigate through the page using the Tab key.
- Make sure you can reach all interactive elements and trigger them with the spacebar, enter key, or arrow keys.
- Use semantic HTML elements that are accessible by default (for example: buttons, labeled inputs, etc). If you must use divs for interactions, ensure they are focusable and labeled appropriately.
- Check to see that focus is always visible and appears in logical order. Our Website Design System has more information about focus visible, including best practice colour combinations.
- Make sure that no content gets focused off screen or is hidden from view.
- Use a keyboard accessible media player for embedded videos. W3C use Able Player, YouTube is also a good option.
- Check to see 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.
- Learn more about why keyboard accessibility is so important. Watch World Wide Web Consortium's (W3C) video about keyboard compatibility (47 seconds):
Web Content Accessibility Guidelines
- 2.1 Keyboard Accessible (Guideline)
- 2.1.1 Keyboard
- 2.1.2 No Keyboard Trap
- 2.4.3 Focus Order
- 2.4.7 Focus Visible