Keyboard navigation: an essential feature on any website

Keyboard navigation: an essential feature on any website

While tactile devices grow rapidly as the main means of access to the Web, laptops and desktop computers continue to have great relevance, being irreplaceable in some cases. And although we have incorporated the idea that desktop users browse our site using the mouse as the main input device, there are occasions where that role is played by the keyboard. This can happen for several reasons:

The user does not have a mouse.

The user has a mouse, but for some reason, the computer does not recognize it (something that can happen on a new or newly formatted computer).

The user is more accustomed to using his computer mostly with the keyboard (this is especially common among expert users, familiar with command line interfaces).

The mouse is wireless and ran out of batteries during navigation.

The user has some permanent disability (e.g. partial paralysis) or temporary disability (e.g., a plastered arm) and cannot use the mouse, but the keyboard.

In these cases, the only way to navigate a website is through the keyboard. Most browsers allow you to “jump” from link to link using the Tab key, and activate the selected link by pressing Enter. The selected link is distinguished by a specific aspect, which varies by browser (for example, Chrome encloses the anchor text with a rectangle with a shaded blue line, while Firefox draws a gray rectangle with a dotted line). Different text fields, radio buttons and other form components can be selected with Tab and the directional keys. But we must enrich this “default” mechanism to provide the best possible experience.

In that sense, the official WAI-ARIA standard recommends a series of practices to improve keyboard navigation as a means for greater web accessibility.

Do not modify the visual indicator of selected item that the browser brings by default (for example, the blue rectangle of Chrome). Replacing it with another style may confuse the user who is already accustomed to the signals of his preferred browser.

All interactive elements, not just links, must be “keyboard-focused”. This includes form elements, drop-down menus, buttons, dialog boxes, and other widgets. The attribute tabindexallows us to achieve it.

Use a link to “skip” navigation. In this way, the user does not have to press Tab through all the top menu links (which may be many) to get to the main content area.