Keyboard Access
Your website must be fully accessible via keyboard. This means that any interactions and information that can be accessed with a mouse, must also be accessible with just a keyboard.
To implement this technique, identify all functions on the page. Consider functions performed using both the mouse and keyboard together.
Examples of functionality include:
- Links
- Menus
- Buttons
- Checkboxes
- Radio buttons
- Form fields
- Drag and drop
- Text selection
- Resizing
- Adding or removing items from a shopping cart
- Initiating a chat session
Testing
Once you have determined functionality, verify that each of the functions identified can be performed using only the keyboard:
- Using the Tab, Enter, and Spacebar, navigate the page and ensure each input/interaction can be triggered. Make sure you can tab your way back to the address bar.
- Ensure
hoverinteractions (help text, etc.) can be triggered as well. When these happen through a keyboard, they have afocusstate instead ofhover. - Make sure the tab order of the page is logical and follows the visual order of elements on the page. This means you should not rearrange the HTML structure of the page with CSS.
- Check that the focus is always visible when moving through the page with the tab key.
- Make sure you can use and dismiss modal dialog boxes, lightboxes, or other pop-ups through the keyboard use.