Keyboard Focus Order

What it's for

See the order the Tab key moves through a page, which is how people who can’t use a mouse reach links, buttons and fields. The stops are numbered on the page itself, and the problems that trap or confuse keyboard and screen reader users are listed.

For example, when a tester reports that tabbing through your sign-up form jumps around, paste its HTML here to see the order and spot the tabindex that causes it.

How to use it

Paste HTML and press Show the order. Each stop gets a numbered badge on the page (orange for one moved by a tabindex above 0), and the table lists them with the name a screen reader would give each one. Problems listed:

• Stops with no name, so a screen reader says only “button” or “link”.
• A tabindex above 0, which pulls an element ahead of everything else.
• Things that react to a click but can’t be reached with the keyboard, such as a <div> with an onclick.
• Stops inside aria-hidden="true", which screen readers skip.

Click in the page and press Tab to follow the order yourself; the line above the page says which stop has focus.

Example

Press Try an example. The HTML has two links, a search field with tabindex="1", a “Buy now” <div> with an onclick, a button holding only an image with no alt, and a Help link.

The message says 5 stops in the tab order. 3 things to look at. The search field is first, the button is #4 with no name, and “Buy now” can’t be reached with the keyboard.

Good to know

The page’s scripts don’t run here, so content a script adds or a menu that opens on click isn’t seen, and focus that a script moves isn’t followed. Elements hidden by styles are left out. The names are worked out simply from labels, aria-label, aria-labelledby, text and alt; a screen reader may word them differently.