tabindex
Controls whether an element can be reached with the Tab key.
Syntax
<div tabindex="0">…</div>Parameters
| Parameter | Type | Description |
|---|---|---|
| tabindex | 0 | -1 | `0` — the element joins the Tab order; `-1` — focus only from a script. |
Examples
Press Tab: the block with tabindex="0" gets focus too:
<style>
:focus { outline: 3px solid orange; }
</style>
<button>Button</button>
<div tabindex="0">Scrollable panel</div>
<div>Plain div (skipped)</div>
<a href="#">Link</a>Notes
Links, buttons and fields are focusable on their own — they need no tabindex. Positive values (1, 2…) change the Tab order and nearly always confuse users: fix the order of elements in the markup instead.
See also
Related recipes
In the tutorial
- Accessibility — How to make a page usable for everyone — keyboard use, focus, labels and alt, aria-label, contrast and meaningful tags.