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.
How to Test
General Test
- Start from the browser address bar. (Forces focus to start at the top of the page)
- Take your hand off your mouse and use only your keyboard.
- Using the Tab button, navigate until you’ve reached the bottom of the page. (You can use Shift+Tab to navigate back one step.)
- For elements like radio buttons, checkboxes, etc. the arrow keys should be used to check that all interactive elements have visual focus.
Verify that:
- All interactive elements are accessible via keyboard.
- All interactive elements display a visual keyboard focus.
- The Tab Order meets the structure of the Page.
- There are no Keyboard Traps.