universal-design-center

Web Accessibility Criteria - Keyboard Access

 Introduction

Keyboard accessibility is one of the most important aspects of web accessibility. ALL functionality of web content must be available using a KEYBOARD ONLY. This means, without using a mouse or a track-pad, a user must be able to get to and complete all the elements/functionality of a web page.

The ability to navigate and operate a page through a keyboard interface is essential for users who rely on a keyboard to access information. If elements/functions are not accessible with a keyboard, users will be excluded from performing specific tasks and from accessing key information.

Why is Keyboard Access Important? 

Navigating a web page using a mouse or a track-pad is not the only way to navigate a web page. Many users use some form of keyboard to navigate a web page for various reasons. Some reasons include:

  • Motor disability
  • Blindness
  • Low vision
  • User preference

Some users presumably use a screen reader while they use a keyboard to navigate a page. However, the screen reader can only convey the information on the web page to a user if the page is keyboard accessible. Finally, in addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard.

 Best Practice

  • All interactive content should be accessible via a keyboard interface.
  • The tab order should have the same structure as reading a book. It should be from left to right from top to bottom.
  • The keyboard focus should be visible for all sighted users.
  • Verify that keyboards can navigate and interact with the web page on their own without the use of a mouse.
  • Avoid creating Flash-only web pages as they are not keyboard accessible.

Back To Top 

 How to Test

General Test

  1. Start from the browser address bar. (Forces focus to start at the top of the page)
  2. Take your hand off your mouse and use only your keyboard.
  3. Using the Tab button, navigate until you’ve reached the bottom of the page. (You can use Shift+Tab to navigate back one step.)
    1. For elements like radio buttons, checkboxes, etc. the arrow keys should be used to check that all interactive elements have visual focus.

Verify that:

  1. All interactive elements are accessible via keyboard.
  2. All interactive elements display a visual keyboard focus.
  3. The Tab Order meets the structure of the Page.
  4. There are no Keyboard Traps.

 Back To Top 

 WCAG and References