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. Moreover, ensuring keyboard focus, tab order and no keyboard traps is important for the following reasons:
- Keyboard focus will primarily allow sighted users to know which element from the webpage has focus. If keyboard focus is not present or is difficult to visually see, it becomes a barrier to a user and makes it difficult to access information through a keyboard.
- Keyboard tab order allows users to properly navigate the page. If the tab order is incorrect and instead starts on the top of the page and then directs the user to the bottom of the page, users will have missed the content in-between those two sections or the user will be forced to use the “tab” key numerous of times before they reach their destination.
- Keyboard traps prevent the user from navigating further in the page. A user may be forced to perform various workarounds to access the information or may be completely blocked from navigating through the entire webpage again.
- 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.
Keyboard focus
The video below showcases what keyboard focus and a correct tab order look like.
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.