Why positive tabindex values break tab order
tabindex above 0 pulls elements out of the natural keyboard order and confuses everyone who tabs. Use 0 or -1 only.
Step by step, with screenshots: Keyboard navigation: focus order, visible focus, traps and modals →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
Tab order is the order in which keyboard focus moves through links, buttons and form fields when someone presses Tab. By default it follows the order of the HTML source, which normally matches the visual reading order.
A tabindex attribute with a value above 0 pulls an element to the front of that sequence, so focus jumps to it first and then around the page in an order that no longer matches what people see. WCAG 2.2 success criterion 2.4.3 (Focus Order) requires an order that preserves meaning. getReport lists elements with positive tabindex values. A page is OK when it uses only tabindex="0", to make a custom control focusable, and tabindex="-1", for elements focused by script.
What a passing site looks like
- The natural tab order is not changedinfo onlyeffort M
Tab order
Why it matters. Positive tabindex values force keyboard focus to jump around the page in an order that does not match what is on screen, which is disorienting for keyboard and switch users.
- Remove tabindex values above 0; use tabindex="0" to make custom controls focusable and tabindex="-1" for focus targets.
- Order elements in the HTML the way they appear on screen so the natural tab order is right.
Questions people ask
What does tabindex="-1" do?
It makes an element focusable by script or as a link target but keeps it out of the Tab sequence. Use it for elements you move focus to programmatically, such as a dialog's heading when it opens or the main content after a skip link. It does not hide the element from screen readers and does not disable it.
What does tabindex="0" do?
It adds an element that is not normally focusable, such as a custom div-based button, to the Tab sequence in its natural source position. Better still, use a real <button> or <a href>, which is focusable and works with Enter and Space without extra code. If you must use tabindex="0", add a suitable role and keyboard handling too.
Why should I avoid positive tabindex values?
A value such as tabindex="1" or tabindex="5" puts that element before everything without one, wherever it sits on the page. Focus then starts in an unexpected place, jumps around and later skips back, which confuses keyboard, switch and screen magnifier users. It is also fragile, because every new element must be numbered. Fix the source order instead.