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

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?
• Tip: You can use SHIFT and TAB to tab back up the page

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?