In addition to the mouse, all functionality a website offers must be usable by keyboard. This means, among other things, that all links and form fields must be accessible by tab key and usable with the enter key. The user must be able to distinguish at all times which link or form field currently has keyboard focus.
Keyboard navigation order
Users who navigate through a website by keyboard require a logical and predictable tab order. When the source code matches the page's reading order, this requirement has been met. Note that techniques like the CSS float property may cause the source code to deviate from the reading order.
The tabbing order can also be manipulated with the use of the tabindex attribute. Only use the 0 and -1 values, as positive values can cause issues.
An important detail to keep in mind is that links and buttons are the only elements picked up by the tabbing order. When onClick is used to make images or div elements clickable, they will not be accessible to keyboard users. Always use real buttons or links with an href="#" attribute.
Expandable menus
When CSS is used to hide sub levels of an expandable menu, they often become impossible to reach by keyboard. This can be solved by:
- Using an expandable menu that works by keyboard, as shown in the WAI-ARIA authoring practices.
- Repeating subnavigation items on their subsequent pages if they cannot be reached by keyboard.
Common problems
- Skip links and the like will only work in most browsers when
tabindex="-1"has been added to the link goal. - Do not impose specific timing requirements on the user for specific keystrokes. For example, do not expect them to hold the space bar or to quickly press the enter key three times.
- When links are activated with the use of JavaScript, only use device-independent event handles. Learn more about this topic in this WebAIM article.
- Sometimes, texts will only appear as a tooltip. Keyboard users will not be able to see these when this occurs. This example shows a tooltip that only appears when a user hovers their mouse over the question mark icon. By adding a link, we can give keyboard focus to the image and use a script to trigger the text to appear without the need for a mouse.
Recommendations
- You can help users with motor impairments by using CSS (
a:hover) to showcase the hitbox of a link on mouseover. Examples could be to outline the link or to add a background color when a user hovers over it. - Avoid using dropdown lists in which multiple choices can be selected.
How to test for keyboard accessibility
Put your mouse aside and see if you can reach all of the page's links by using the tab key. Hold the shift key while pressing the tab key to go back within the tabbing order. Use the enter key to activate links. Be extra attentive when testing the accessibility of links within expandable menus.
If you are a Mac user, you'll have to check your settings before you can start testing for keyboard issues:
- A general setting in "system preferences": go to "keyboard" and then "shortcuts". Select the "use keyboard navigation..." checkbox.
- A Safari setting in "preferences", "advanced". Select the "Press TAB to highlight..." checkbox.
Comments
Be the first to comment