Keyboard

Keyboard accessibility allows navigation to each element of interaction in the visual interface. Here are some points to consider to help ensure that user input is accessible with the keyboard.

Tab Index

A Tab Index is a position in the tabbing navigation order of a document. In an enviroment where we read left-to-right, it should be possible to navigate from left to right, from top to bottom with the Tab key, and in the opposite direction using Shift + Tab.

Here’s an example of an HTML element with a tab index:

<div tabindex="0">Interactive element</div>

There are 3 ways to set the tab index attribute:

• With a negative value (usually -1). This means that the element isn’t reachable by keyboard navigation. The element can still receive focus with the mouse.
• Use a zero (tabindex="0"). This means that the element is reached by keyboard navigation in DOM order.
• A positive value (greather than 0). This means that the element is reached in the order of 0 to the greatest N value. In other words, tabindex="0" is reached before tabindex="1" which is reached reach before tabindex="2", and so on.

The tab index is defined in HTML or JavaScript depending the page initialization scenario. We recommend using an HTML implementation when practical.

Keyboard interaction

Many elements respond to a mouse click. This is usually defined with the onClick attribute. If no additonal interaction is needed with a component, it is required that pressing the Enter or Space key has the same behavior to the onClick.

There are a helper methods to automate this action. Feel free to use them. In React, for example, the method is util.fireClickOnEnter. You will also have to decide on which keyboard event to use: KeyDown, KeyUp or KeyPress. When possible, always use the KeyDown event as KeyPress has compatibility problems with Internet Explorer.

Here is an example of implementation using React:

import * as {fireClickOnEnter} from "./util";
[...]
<div tabIndex={0} onClick={() => action() } onKeyDown={fireClickOnEnter}>Interactive element</div>

Focus trap

In certain situations, like in modals, we do not want the user to tab outside of the modal. If this was allowed, the user could navigate below the dimmer resulting in a poor interaction experience.

There’s a helper to set how a focus trap must work. It is defined as core.initializeFocusTabIndex and has these arguments: