Make interactive elements focusable

All interactive content must be keyboard focusable so that keyboard users can tab to the content in order to interact with it — they must also be able to move focus from one interactive component to another and not get trapped.

Meeting the Web Accessibility Standard

When an interactive element is keyboard focusable, this helps meet WCAG 2 Success Criterion 2.1.1 Keyboard (Level A).

When keyboard focus can move to and from all interactive elements on a page using standard keyboard methods, this meets WCAG 2 Success Criterion 2.1.2 No keyboard trap (Level A).

Use native HTML controls

Native HTML user interface components like <a>, <button>, or <input> are keyboard focusable by default — this means that they are automatically placed in the keyboard focus order and a user can reach them using the Tab key.

This is one reason that using native HTML elements is preferred for accessibility.

Use tabindex to control focusability

The tabindex attribute is a critical part of making custom interactive widgets keyboard accessible. Use it to add elements to or remove them from the focus order.

The tabindex attribute can take a few different values, each of which has a specific effect on the element’s keyboard accessibility.

tabindex="0"

tabindex="0" adds the element to the keyboard focus order based on its position in the Document Object Model (DOM) order, as if it were a natively focusable element.

It also makes the element focusable via JavaScript or when clicked with a mouse or finger tap.

tabindex="-1"

tabindex="-1" removes a focusable element from the focus order.

It also makes a non-focusable element — for example a <div> or <h1> — focusable via JavaScript or when clicked with a mouse or finger tap.

tabindex="1" or greater

tabindex="1", or any number greater than 1, creates a special focus order that comes before the default keyboard focus order.

For example, an element with tabindex="1" will be the first focusable item on the page, no matter its position in the DOM order. Then comes the element with the next highest positive tabindex value. After all the elements with positive tabindex values have received focus, the elements in the default keyboard focus order receive focus in the sequence in which they are found in the DOM order.

Avoid tabindex with positive values

When the tabindex attribute has a positive number as its value, it creates a special focus order that can cause serious problems for keyboard users. For more, see:

Do not make non-interactive content focusable

Content that users are not meant to interact with should not be made keyboard focusable. Avoid assigning tabindex="0" to non-interactive content. For more on why, see Making non-interactive elements focusable — The A11y Project.

More information on using the tabindex attribute

Avoid keyboard traps

Elements that can receive focus also must be able to release focus, so that the keyboard user can continue to interact with other parts of the content.

When an interactive element prevents the user from moving keyboard focus away to another element, that’s known as a ‘keyboard trap’, and this must be avoided.

For most interactive elements like links, buttons and form fields, this means that when an element has focus, the user should be able to press the:

With some more complex widgets, such as a modal dialog, focus is often constrained or ‘trapped’ inside it by design. This is fine as long as the user can dismiss or exit the widget by keyboard alone — for example, by setting focus to and activating a ‘close’ button or pressing the Esc key.

If it requires more than standard keystrokes (such as Tab, Enter, Space, ← ↑ ↓ → and Esc) to move focus away from a widget or other user interface component, you must provide instructions for how to do this.

For more on keyboard traps, see: