Glossary
tabindex
The `tabindex` attribute controls whether an element can receive keyboard focus and where it sits in the tab order. Three cases matter: `0` makes a non-interactive element focusable in document order, `-1` makes it focusable by script but not by tabbing, and any positive value pulls it to the front of the tab order ahead of everything else. The third is almost always a mistake, and the specification itself advises against it.
The three values
`tabindex="0"` places the element in the tab order at its position in the document. It is what a custom control needs in order to be reachable at all.
`tabindex="-1"` makes an element programmatically focusable — `element.focus()` works — while keeping it out of the tab sequence. This is what a skip link target, a modal container or an error summary needs.
A positive value creates a separate, higher-priority tab sequence. Every positive-tabindex element is visited, in ascending order, before any element with `0` or a native focusable role.
Native interactive elements — links with `href`, buttons, form controls — are focusable without any attribute, and adding `tabindex="0"` to them is redundant.
Why positive values go wrong
The order becomes global. Adding a `tabindex="1"` anywhere reorders the whole page, not just its neighbourhood.
It must then be maintained across every component and every template. One element added without a number lands after all the numbered ones, wherever it appears visually.
The result is a tab order that does not follow the visual order, which is a WCAG failure under the focus order criterion and is disorienting regardless.
The correct way to change tab order is to change the order of elements in the DOM, which keeps the sequence and the visual layout in agreement.
Where -1 is genuinely needed
The target of a skip link, so that focus actually lands there.
A modal dialog container, so focus can be moved into it when it opens. Native `<dialog>` handles this without the attribute.
An error summary announced after a failed form submission, where focus should move to the message.
A container in a composite widget — a grid, a toolbar, a tab list — following the roving tabindex pattern, where only the active item is in the tab order and arrow keys move between the rest.
How to check it
Search the source for positive values. Any occurrence is worth questioning, and most are worth removing.
Tab through the page and watch the focus indicator. It should move in reading order, left to right and top to bottom.
Check that no element with `tabindex="-1"` is expected to be reachable by tabbing, which is a common confusion between the two negative use cases.
Check that elements given `tabindex="0"` also have a role and keyboard handlers, since focusability alone does not make a `div` operable.
Frequently asked questions
- Should I ever use a positive tabindex?
- Almost never. It creates a global priority order that must be maintained everywhere. Reordering elements in the DOM is the correct approach.
- What is tabindex="-1" for?
- Making an element focusable by script without adding it to the tab sequence — skip link targets, dialog containers, error summaries.
- Do buttons and links need tabindex?
- No. Native interactive elements are focusable already, and adding tabindex="0" to them is redundant.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website