Keyboard Accessibility Quick Reference Guide for PC Users

The following applies to any interactive element. Interactive elements include:

  • Links
  • Form fields
  • Radio buttons
  • Checkboxes
  • Buttons
  • Tab panels
  • Navigation menus (including flyouts)
  • Accordion menus

All of these must be reachable, visible, logical and usable from the keyboard.

Reachable

  • Can you reach interactive elements using the Tab key?
  • Tip: Hold down a Shift key, then use the Tab key to move backwards through the interactive elements on a page.

Visible

  • Can you visibly tell which interactive element you have reached (in other words, do elements have visible keyboard focus)?
  • Is the visible indication of keyboard focus obvious?
  • Tip: Ideally, if an interactive element looks different when the mouse pointer hovers over it,
    then it should do the same when it has keyboard focus.

Button has white dashed border around it when it has keyboard focus.

Logical

Does the order that you move between interactive elements with the Tab key make sense and follow the natural reading order of the page?

Screenshot showing correct tab order, going from first element on page, which is a help button, to the navigation, to the slideshow on Accessible University

Usable

  • Can you use interactive elements without a mouse?
  • Do arrow keys move between options in a checkbox or radio button group?

  • Does the spacebar check and uncheck checkboxes?
  • Does the spacebar select an option in a radio button group?
  • Does either the Enter key or spacebar trigger a button?

  • Does the Enter key let you follow a link?