I built a bookmarklet that shows where the Tab key goes, and what it never reaches

Matjaž Korošec — Fri, 30 Oct 2026 16:15:10 +0000

Run Lighthouse on any page and scroll to the bottom of the Accessibility section. There is a list called "Additional items to manually check". Two of them are about the keyboard: "Interactive controls are keyboard focusable" and "The page has a logical tab order".

Manually. I wanted to check every page of my own site with the keyboard, so I built a tool for it.

What it is

Tab trail is a bookmarklet. Click it on any page and it draws a numbered dot on every Tab stop, joined by a line in the order the keyboard visits them. The stop you are on turns orange. Press Tab and follow the numbers, or press Play and it walks every stop for you.

Then it marks in red what fails WCAG 2.2 AA.

Try it on the live page. It has 3 things broken on purpose, so the first click shows red.

What turns red

7 checks, each with its WCAG rule:

Missed spots (2.1.1 A). Something looks clickable (a pointer cursor, a button role, an onclick) but Tab never gets there. The classic <div onClick> "Add to cart".
Hover menus (2.1.1 A, 2.4.7 AA). A menu that opens on :hover but never when Tab reaches it.
Forced order (2.4.3 A). A tabindex="5" that pulls an element ahead of the rest of the page.
Hidden focus (2.4.11 AA). Tab lands on something a sticky header, cookie bar or chat button covers completely. This one is new in WCAG 2.2.
Keyboard trap (2.1.2 A). Tab and Shift+Tab both leave focus on the same spot.
Lost focus (2.4.3 A). A popup closes and focus drops to the top of the page instead of going back to the button that opened it.
Out of order (2.4.3 A). Tab jumps somewhere it shouldn't, or a popup that blocks the page doesn't get Tab first.

The parts that were harder than they look

Hover menus come from CSS, so it reads your CSS. It goes through every style sheet it can read for :hover rules that show something (display, visibility, opacity, max-height) that is hidden right now and holds a link or button. Then it looks for a :focus, :focus-within or :focus-visible rule that shows the same element. No match and no aria-expanded toggle means red. Nested CSS and Tailwind v4 output had to work too: & rules resolved against their parent, @media inside rules, :hover inside :is() and :where().

Hidden focus needs the page to stop moving. After each Tab press it waits until scrolling is done, then tests 5 points on the focused element (the center and 4 corners). Only when all 5 land on something fixed or sticky is it flagged. Partly covered passes AA, so it is not red.

Safari and Firefox on a Mac skip links on Tab by default. Safari skips links and buttons until you turn on "Press Tab to highlight each item", Firefox skips links until you turn on Keyboard navigation in System Settings. A naive checker would flag every one of those presses as a jump. Tab trail marks them SKIPPED and tells you which setting to flip.

It has to survive any site. It draws inside its own shadow root, so the page's CSS can't touch it. It runs under a strict Content Security Policy and Trusted Types. When the page opens a modal <dialog>, everything outside it goes inert, so the tool moves itself into the dialog to stay clickable and moves back out when it closes.

Firefox can't store it. A bookmark there can be at most 65,536 characters, and Tab trail is 223,286. In Firefox you paste the script in the console.

Hand it to your AI

"Copy for AI" copies only the problems, each with its WCAG rule, what should happen, a unique CSS selector, a trimmed HTML snippet, the React, Vue or Angular component that drew it (on a dev build), a fix hint and how to check the fix. Paste it into your coding agent and it knows where to look.

Long numbers, emails and things that look like tokens are masked before they reach your clipboard. Read it once anyway.

Put it in your tests

While it is open, the page has window.__tabTrail, so a test can run it with no clicks:

npm i -D --save-exact tab-trail

import { readFileSync } from "node:fs";
import { test, expect } from "@playwright/test";

const script = readFileSync("node_modules/tab-trail/dist/tab-trail.js", "utf8");

test("Tab reaches everything", async ({ page }) => {
  test.setTimeout(300_000);
  await page.goto("http://localhost:5173/");
  await page.evaluate(script);
  await page.evaluate(() => window.__tabTrail.play());
  const problems = await page.evaluate(() => window.__tabTrail.problems());
  expect(problems.map((p) => `${p.check}: ${p.selector}`)).toEqual([]);
});

play() moves focus through every stop, so it covers Missed spots, Hover menus, Forced order and Hidden focus. Out of order and Keyboard trap need real Tab and Shift+Tab presses, and state().untested tells you which checks never ran, so a green test can tell a clean page from a skipped check. The full example, with the TypeScript types, is in the README.

Already run axe? Keep it. axe reads the HTML, Tab trail walks the Tab key.

What it doesn't do

It's the keyboard part, not a full audit. It checks that Tab gets there, not that Enter or Space then works. It doesn't compare Tab order with the visual order when CSS moves things around, doesn't judge your focus ring's contrast, and doesn't tell you what a screen reader says. Style sheets from other domains without CORS can't be read. The whole list is in docs/limits.md, and how it sits next to Accessibility Insights, WAVE and the rest is in docs/compared.md.

It reads the page and sends nothing: no network requests, no cookies, no storage. Close it and it's gone.

Get it

matjazkorosec / tab-trail

Tab order and focus order checker. A bookmarklet that draws every Tab stop and marks what Tab never reaches. WCAG 2.2 AA check helper.

Tab trail

One click shows the path the Tab key takes through any page, and marks in red what fails WCAG 2.2 AA.

Some people only use the keyboard. If Tab skips your "Add to cart" button, they can't buy from you. If it skips "Send" on your contact form, they can't write to you. Even Lighthouse tells you to check this by hand. Tab trail checks it for you.

I built it to check every page of my own site with the keyboard. Try it on the live page, it has 3 things broken on purpose.

Install

Bookmark

Open matjazkorosec.com/tools/tab-trail and drag the Tab trail button to your bookmarks bar. Don't see the bookmarks bar? Press Ctrl+Shift+B, or Cmd+Shift+B on a Mac.
Open your site and click the bookmark.
Press Tab and follow the numbers, or press Play and it walks every stop for you. Click the bookmark…

View on GitHub

1 file of plain JavaScript, MIT licensed. Drag the button from the page to your bookmarks bar, click it on your own site, and press Play.

If it gets something wrong on your site, press Copy log in the panel and open an issue with it. I'd like to see the pages that break it.

DEV Community: Matjaž Korošec

[Boost]