Chapter 25: Keyboard Navigation

They key concept of accessibility is to allow users to navigate and interact with the web page using just a keyboard. In other words all the functionalities of the web page must be usable by keyboard alone. This in no way prohibits the use of mouse functionality, but stress the need of keyboard equivalent’s to mouse events.
Using the native elements supplied by markup by default will be keyboard functional. When the developer uses custom UI components and add functionality through any scripting language, these problems often arise.

Basic keyboard navigation

Keyboard Key Functionality
Tab Move from one interactive element to other.
Shift + Tab Moves from one interactive element to another in reverse order.
Space or enter key Activates or selects the currently focused element.
Navigational arrow keys (up, down, left and right) Moves between the options in an element. Eg: Moves between the options in a dropdown.

Remember that the non interactive elements such as <p>, <span> <div> will not receive focus by the keyboard when the screen reader is switched off.

Navigating custom components

The custom components such as tabs, treeviews, onmouse hover menus etc still need to be operable with the keyboard. The detailed interaction patterns of each of these components are explained in detailed in the advanced accessibility training courses.