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

WCAG Sufficient Techniques

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

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

Contact Us

For assistance or to report accessibility problems please contact:

Andrew Normand
Web Accessibility Lead
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867