Many users are physically unable to use a pointer interface (such as a mouse), and therefore may rely on navigating through digital products including websites using a keyboard alone. In this article we will mainly focus on web applications, however, many of the same information can be applied to other application mediums.
Before being able to resolve any issues with keyboard access, it's important to understand, how a keyboard is used to interact with a web application. A number of the common keyboard keystrokes for navigation and interaction are listed within the following table.
| Key(s) | Usage of Key |
|---|---|
|
Tab |
Moves to the next focusable element (such as a link, form control or button) |
|
Shift and Tab |
Moves to the previous focusable element (such as a link, form control or button) |
|
Enter |
Activates the current link or button. |
|
Space |
Check or uncheck a checkbox form element. Additionally will activate a button. |
|
Up Arrow or Down Arrow |
Moves between radio buttons or in some instances menu links. |
|
Left Arrow or Right Arrow |
In some instances, move between menu links or adjusts sliders (for example an audio or progress bar) |
|
Escape |
Closes the current modal dialog or dropdown menu and return focus to the previous element. |
By default, users will only be able to access a number of elements such as links, buttons and field controls using the keyboard natively. It's always best to use native HTML elements as these are natively accessible. If it is not possible to use these elements, a tabindex="0" will need to be assigned against the element to enable it to be keyboard focusable. Defining a specific tabindex such as tabindex="1" or tabindex="4"tabindex does not mean the control is entirely keyboard accessible.
You can try keyboard accessible by using the TAB button, to navigate between the links, buttons, form fields, and other features on this blog. The current focus should be reasonably to distinguish. The navigational order of the content should follow that of the visual layout of the page. When navigating yours or this blog consider:
- Can you access all the features using the keyboard alone?
- Can you operate all controls using the keyboard alone?
- Is it reasonably easy to distinguishwhere you are currently on the page?
This blog post will be updated further overtime.
Leave a comment