Keyboard Access

Problems

• Screen reader users generally do not use a mouse.
• 40% of people with a motor impairment have difficulty using their hands. Many cannot use a mouse.

WCAG Success Criteria

• 2.1.1 Keyboard

User Story

As a user who cannot use a mouse, I need to move in and out of components with a keyboard, so I don't get trapped.

WCAG Sufficient Techniques

• G202: Ensuring keyboard control for all functionality
• G90: Providing keyboard-triggered event handlers

Testing Method

• Try tabbing through the page using the keyboard
• Can you select and navigate menus using the arrow keys?
• Do mouse hover states for links and buttons work?
• Can you successfully tab to the end of the page?
• Do the comboboxes still work after they have been opened and closed the first time?
• Tip: Use SHIFT and TAB to tab back up the page

Expected Behaviour

• The W3C's ARIA Authoring Practices Guide (APG) provides a list of expected keyboard behaviours for common form components including, accordions, alerts, buttons, checkboxes, comboboxes, disclosure (show/hide) and menus.

Practical Exercise 1

• Does this page function in the same way for both keyboard and mouse?

Keyboard Friendly CSS

• Wherever you have a style for :hover, make sure that you also have a style for :focus

• Incorrect

  /* link styles */
  a:link { color: #03c; }
  a:visited { color: #606; }
  a:hover { color: #c00; }
  a:active { color: #600; }
  li { margin-bottom: 0.4em; }
  

• Correct

  /* link styles */
  a:link { color: #03c; }
  a:visited { color: #606; }
  a:hover { color: #c00; }
  a:focus { color: #600; }
  a:active { color: #600; }
  li { margin-bottom: 0.4em; }
  

Practice Exercise 2

• The footer on the following page is missing a keyboard focus CSS state.

  #footer a:hover {
      background-color: #009900;
      color: #FFFFFF;
  }
  

• Try editing msle-home.css using Firebug to add the appropriate focus state.
• Then test by tabbing through the footer links.
• Can you see which link has focus?