There are people with motor disabilities for whom using the mouse is very difficult. This may be because they have tremors in their hands, are unable to use their hands, or have no hands at all. Along the same lines, visually impaired people are also often users of keyboard navigation.
For all these reasons, adapting our websites to keyboard navigation is of great importance.
How do we navigate using the keyboard?
You can move around a page through the interactive elements using the Tab key. Interactive elements are: buttons (button), links (link), menus (nav) and form inputs (input, select, option, textarea). In this sense, it is relevant to use this kind of tags instead of others that do not receive the focus, such as divs, in order to make them navigable.
Other useful key combinations are:
- Go backwards: Shift + Tab.
- Activate a link or button: Enter.
- Close a modal: Esc.
- Move between radio inputs or select elements: Arrows.
- Navigate through the menu: Up and down arrows.
- And many more.
In addition, we must take into account:
Tab order.
The tab order refers to the order in which items are selected when the tab key is pressed. By default, this is determined by how the DOM is structured. Therefore, the configuration of the HTML is crucial, as it will determine how the page can be navigated. Also, to avoid possible confusion, we should avoid modifying its order with CSS.
On the other hand, if you want an element to appear in the tab order that by its nature would not appear because it is not interactive, or if you want it to appear in another order, you can use tabindex.
- tabindex="0": If you add this to a tag, it will be inserted in the tab order, no matter if it is an image, a paragraph... This element will be inserted according to its natural position.
- tabindex="-1": With this you will remove an element from the tab stop.
- tabindex="1": Any tabindex greater than zero will be placed before everything else. This is considered an anti-pattern, since it is better to structure your code well than to force it.
The tab order is not only relevant for those who navigate by keyboard, but also for those who use screen readers. The latter also navigate using the DOM order.
Focus
When we navigate with the keyboard, we need a visual indicator to show us what position we are in. By default, these signals are provided by browsers with a colored border, usually blue. If we want to change its style, we can edit it in the CSS using the “outline” property. Although it is possible to eliminate this border, doing so is not recommended, since we would be worsening the accessibility of the website.
Skip menus
Both people who use screen readers and those who navigate with the keyboard usually find at the beginning of the pages a menu with many links to access everything. This can be annoying as they have to go through all the links before they can access the content.
To address this situation we can place a link that “jumps to content”. This must be at the beginning of the page, only be visible when clicking on the tab, and must redirect to the main content. This link will be read at first by screen readers and will appear when navigating the keyboard and will allow the audience to jump to what they are really interested in.
To learn more about this, you can check out this wonderful article by WebAim.
Modals
Modals are complicated to manage. When one is opened, the first element in it must receive the focus and, as you navigate through it, we must not leave that screen, moving cyclically through the elements of the modal. Likewise, they must be able to be closed with the escape key and, when doing so, the focus must return to the main page from which they were opened. A correct example is this one from W3C.
Top comments (0)