Lessons · HTML and CSS · 0, -1, and never a positive one
0, -1, and never a positive one
tabindex=0 puts an element in the tab order at its document position. tabindex=-1 makes it focusable from script only. A positive value reorders the whole page.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Zero is the only value most pages should ever use. Minus one is how you send focus to a heading after loading new content, so a screen reader user is not left at the top wondering what happened.
How to think about it
If the tab order is wrong, move the markup. Numbering it is a promise every element anybody adds later has to be reasoned about against.
Worked example
<button id="b1">One</button><div id="d" tabindex="0">Two</div><button id="b2">Three</button>Two Tabs and focus is on d: in the order, in document position.
<button id="b1">One</button><button id="b2" tabindex="1">Two</button>One Tab and focus is on b2, not b1. A single positive value jumped the whole queue.
Your turn
The tabindex value that means 'focusable, in document order'.
Write a page and watch it render
The trap
tabindex=-1 is not 'hidden'. The element is still there and still reachable by code; it is only Tab that skips it.