Keyboard Accessibility

Problem

Web pages that cannot be fully operated using a keyboard alone are not accessible to people who find using a mouse difficult or impossible to use. It is also a problem if the meaning of content changes because the keyboard is focusing on elements in a different order than what is visually communicated on the web page. This can lead to disorientation if users receive important information in the wrong order. 

How to Fix

Disconnect your mouse. Check that all functionality of the website can be accessed using only the keyboard (e.g. tab key, enter key, directional arrows).

Keyboard Traps

  • Check that the keyboard does not become trapped anywhere on the page (e.g. if a user tabs to a slideshow, they should be able to tab away from the slideshow)
  • Use proper HTML form controls and links. These are keyboard accessible by default.
  • Advise the user of any non-standard exit methods for moving focus away from a webpage component (e.g. any methods that do not use unmodified arrow, tab keys, or other standard exit methods)

Focus Order

  • Check that all website content receives focus in a logical, usable order (i.e. this is usually left to right, top to bottom)
  • Structure the underlying HTML of your page in an order that follows the logical sequences and relationships existing within the content.
  • Help users bypass blocks of repeated content by providing a Skip to Content link and good heading structure.

Timing

  • Check that all functionality does not require specific timings between individual keystrokes.

Things to Avoid

  • Do not automatically submit a form field or open a window because an element receives keyboard focus. (e.g. tabbing to a Submit button should not automatically submit a form)
  • Do not use scripting to emulate links or to remove focus when focus is received.
  • Only use the tabindex attribute in situations when the tab order cannot be changed by other methods (e.g. rearranging the content order or altering the styling).

Take it to the Next Level (AA)

Without visual focus indicators, a website will be inaccessible to sighted keyboard users. 

  • Ensure that styling on the web page does not conflict with the browser's default keyboard focus indicators.
  • Use CSS to provide highly visible focus indicators to show what element currently has keyboard focus (e.g. whenever there is a CSS style for :hover, make sure there is also a CSS style for :focus)

External Resources:

  1. Understanding Success Criterion 2.1.1 Keyboard (Level A)
  2. Understanding Success Criterion 2.1.2 Keyboard Trap (Level A)
  3. Understanding Success Criterion 2.4.3 Focus Order (Level A)
  4. Understanding Success Criterion 2.4.7 Focus Visible (Level AA)
  5. WebAIM Guide to Keyboard Accessibility