Keyboard support is a WCAG must!
- Ensure all content can be accessed via keyboard alone
- Don't trap the keyboard in an element or widget
EXCEPTION: modals, these actually need focus trapping so user doesn't get confused about context
- Use focusable elements like links, buttons and form inputs appropriately
- Don't suppress focus indicators (focus ring) with CSS
- Don't put focus indicators on non-interactive elements, this can be confusing, for example a focus ring on a heading might cause the user to click on it but nothing would happen
- WebAim uses a brief background color change to the content area when you click on "skip to main content" to let users know they're focus has moved to that part of the page
- Tab order should follow the reading order and DOM order so people get to where they expect to be as then TAB
- Don't rely on assigning tabindex greater than 0, this can lead to confusion for users and more maintenance issues in code
Keyboard keys' expected behavior
- TAB key advances user through all interactive elements like links, buttons and form controls.
- ENTER and sometimes SPACEBAR perform and action, make a selection or follow a link
See WebAim's "Keyboard Testing" table for a full list of expected interactions.