Understanding Tabindex

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Understanding Tabindex

The tabindex attribute lets you change whether an element is focusable.

1. Zero
2. A positive value
3. A negative value

You can apply tabindex to any element, even to a <div>.

Zero

If you set an element’s tabindex to zero, you will be able to focus on the element with the tab key and the mouse.

<div tabindex="0">You can focus on me!</div>

Quick tip: If you click before the element you want to focus, the next Tab key should focus the element.

Positive tabindex

The tabindex value dictates the order of elements that can be tabbed. If you set tabindex to zero, the order will be the document source order. (Which means whatever comes first in the document will get tabbed to first).

<div tabindex="0">Tabindex 0</div>
<div tabindex="0">Tabindex 0</div>
<div tabindex="0">Tabindex 0</div>
<div tabindex="0">Tabindex 0</div>
<div tabindex="0">Tabindex 0</div>

Buttons, links, and form behave as if their tabindex is set to zero.

<div tabindex="0">Tabindex 0</div>
<a href="#">Link</a>
<button>Button</button>
<input name="" id="" />
<div tabindex="0">Tabindex 0</div>

Elements with positive tabindex values will be tabbed first. tabindex="1" first, followed by tabindex="2", and tabindex="3".

When there are no more elements with positive tabindex values, you tab into the elements according to the document source order.

<div tabindex="1">Tabindex 1</div>
<div tabindex="4">Tabindex 4</div>
<div tabindex="2">Tabindex 2</div>
<div tabindex="5">Tabindex 5</div>
<div tabindex="3">Tabindex 3</div>
<div tabindex="0">Tabindex 0</div>

This positive tabindex first behavior is confusing. We expect to tab through elements in the order we read. (Left to right, top to bottom). So you should never use positive tabindex (unless you have a valid use-case).

Negative tabindex

If you set a negative tabindex value, you prevent users from tabbing onto the element.

<button tabindex="-1">Button with negative tabindex</button>
<button>Normal button</button>

However, you can still focus on the element with a mouse click.

Negative tabindex is used to direct focus. We can do this by using the focus method. You’ll learn about directing focus and the focus method in Shifting Focus.

Focusability and the ability to interact

If you can focus on an element, you should be able to interact with the element. If you cannot focus on an element, you should not be able to interact with an element.

This means a few things:

First, if you set tabindex to zero, you should make sure the user can interact with the element with both Enter and Space.

const div = document.querySelector('div[tabindex="0"]')

div.addEventListener('keydown', event => {
  const { key } = event
  if (key === ' ' || key === 'enter') {
    // Do something
  }
})

Second, you should never set negative tabindex to buttons, links, or form elements. Users should be able to interact with these elements.

If you want to disable buttons or form elements, you can use the disabled attribute instead. Disabled buttons and form elements cannot be focused on with the mouse or the keyboard.

<button disabled>Disabled button</button>
<button>Normal button</button>

Third, you should not show a focus style if you cannot focus on an element. Since users cannot focus on elements with negative tabindex, these elements should NOT have a focus style.

[tabindex="-1"] {
  outline: none;
}