General Guidelines

Keyboard support is a WCAG must!

See "Keyboard accessible"

  • 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
  • Focus
    • 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
    • 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.

More Resources

WebAim "Keyboard Accessibility"