Tab Order
Definition
Only some elements take focus without help: an anchor with an href, button, input, select, textarea, summary, iframe, anything with contenteditable, and audio or video with controls. The tabindex attribute changes that set. A value of 0 puts an element into the natural sequence at its source position. A value of -1 makes an element focusable by script but not by Tab, which is how you move focus to a dialog or a heading. A positive value pulls the element in front of everything with 0, in ascending order, and is almost always a mistake. WCAG covers the result in success criterion 2.4.3 Focus Order at Level A: the sequence has to preserve meaning and operability. Tab order and reading order are close relatives — both derive from the source — but the tab order contains only focusable things.
Why It Matters
When the order goes wrong, a keyboard user loses the thread. Focus jumping from a form's first field to a footer link and back is disorienting for anyone and unworkable for someone who cannot see the cursor move. The failure mode that bites hardest is focus going somewhere invisible. An off-canvas menu pushed off-screen with a transform is still in the tab order, so a user tabs into a closed menu and presses Enter on a link they cannot see; the same happens with hidden carousel slides and with the page behind an open modal. Positive tabindex values create a different mess: add tabindex of 1 to one field and it now comes before every other control on the page, including the skip link.
How It Works
The browser builds the sequence in two passes. Anything with a positive tabindex comes first, in ascending numeric order; then everything with a tabindex of 0 or natural focusability, in source order. Shift+Tab reverses it. Visibility governs membership: display of none and the hidden attribute take an element out, and so does the inert attribute applied to a whole subtree, which is the clean way to neutralise the page behind a dialog. Opacity of 0, a transform off-screen, a zero height with overflow hidden and absolute positioning outside the viewport do not remove anything — those elements stay reachable and silent. Testing needs no tooling: load the page, press Tab repeatedly from the address bar, and watch that focus is always visible, always somewhere sensible, and eventually returns to the browser chrome.
Real-World Example
A single-file web app published at planner.99helpers.site has a mobile menu hidden by sliding it 100 per cent to the left. On a desktop keyboard pass, focus disappears after the logo for eleven presses while it travels through the closed menu's links. Replacing the transform with a display of none when the menu is closed, or marking the container inert, removes those eleven stops. A second fix is in the filter panel, where an earlier developer set tabindex values of 1 through 4 to get the order right; deleting all four and reordering the markup instead restores a predictable sequence and stops those inputs jumping ahead of the skip link.
Common Mistakes
- ✕Using positive tabindex values to correct an order — each one jumps ahead of every element with a tabindex of 0, so a single stray value reshuffles the whole page
- ✕Hiding a panel with a transform or opacity rather than display of none or the inert attribute — its controls stay in the tab order and focus vanishes into them
- ✕Putting tabindex of 0 on headings, paragraphs or list items — it adds tab stops that do nothing and makes the page longer to move through
- ✕Opening a dialog without making the rest of the page inert — Tab walks out of the dialog and into the content underneath it
Related Terms
Keyboard Navigation
Keyboard navigation is operating a page without a mouse: Tab and Shift+Tab to move between controls, Enter and Space to activate them, arrow keys inside composite widgets such as menus and radio groups.
Reading Order
Reading order is the sequence in which content is presented to assistive technology — the source order of the HTML, or the tag tree of a PDF. When it disagrees with the visual order, the page stops making sense out loud.
Focus Indicator
A focus indicator is the visible ring or outline showing which element the keyboard is currently on. Switching it off with an outline of none and putting nothing back is one of the most common faults in hand-written CSS.
Skip Link
A skip link is a link at the very top of a page that jumps past the header and navigation straight to the main content. It is normally hidden until it receives keyboard focus, then appears.
Single-File Web App
A single-file web app is a complete, working application contained in one HTML document, with the styles and the JavaScript written inside the same file. Open it in a browser and it runs — there is nothing to install and nothing to build.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →