How Tab Order Affects Website Usability for Keyboard Users

Many people move through websites with the keyboard instead of a mouse: people with motor disabilities, screen reader users, power users and anyone with a broken trackpad. Pressing Tab moves from one link, button or field to the next. The sequence it follows is the tab order, and when it's wrong, a site becomes confusing or unusable.

How tab order works

By default, the browser follows the order of elements in the page's code, top to bottom. Visual position doesn't matter; only the code order does. That's why layouts rearranged with CSS can look right but tab in a strange order.

What the guidelines require

• Focus order (WCAG 2.4.3): the order must preserve meaning and operation.
• Focus visible (2.4.7): you must be able to see which element has focus.
• Bypass blocks (2.4.1): there must be a way to skip repeated content like navigation menus.

Common mistakes

• Positive tabindex values (tabindex="1" and up), which force an order that rarely matches the page.
• Layouts reordered with CSS so the code order and the visual order don't match.
• Clickable elements that aren't focusable, such as a div styled as a button.
• Hidden elements that still receive focus, like links inside a closed menu.
• Pop-ups that don't take focus, or let focus wander behind them.
• Removed focus outlines, so you can't see where you are.

How to test

1. Click the address bar, then press Tab repeatedly through the whole page.
2. Watch whether focus is always visible and moves in a sensible order.
3. Check you can open and close menus and dialogs, and that focus returns to where it was.
4. Try completing a key task, such as a form or checkout, without the mouse.

Chrome's Settings → Accessibility → "Show a quick highlight on the focused object" makes focus easier to follow. See keyboard-only navigation.

How to fix it

• Put elements in the code in the order people should reach them.
• Use real buttons and links instead of styled divs.
• Use tabindex="0" only to make custom controls focusable, and tabindex="-1" for elements you'll focus with script.
• Add a "Skip to main content" link at the start of the page.
• Keep a clear, high-contrast focus style.

For readers

When a site's layout is hard to follow, reader view or ADHD Reading Focus, which shows one paragraph at a time, can reduce what you need to navigate. See WCAG 2.2.