Tab Order That Jumps Around the Page

Header, footer, then the form

Some visitors move through a page with the keyboard. Each press of the Tab key moves to the next link, button or form field, in the order those items appear in the page's code.

On most pages that matches what the eye sees. On some, the code order and the visual order have drifted apart.

Then a keyboard user goes from the logo to the footer, back up to the main menu, into a sidebar, and finally to the form they came for.

Some give up long before the form.

How the order gets scrambled

• Floated or positioned boxes shown near the top but coded near the bottom.
• Layout code that reorders columns for different screen sizes.
• Numbered tab settings added to force a few items first.
• Hidden phone menus that still take focus on a computer.
• Pop-ups and chat boxes added at the very end of the page.
• Two-column forms coded down one column, then the other.

The third does the most damage for the least effort. A positive tab number jumps an item ahead of everything else, so a few items come first and the rest follow in an order nobody planned.

What the standard asks for

WCAG 2.0, the Web Content Accessibility Guidelines, covers this under focus order, at its most basic level of conformance.

Its wording is that focusable components receive focus "in an order that preserves meaning and operability." In plain terms, tabbing through a page should follow the order a sighted reader would.

A related requirement asks that the reading order in the code makes sense wherever the meaning depends on it.

Both say the same thing: the code order is the real order, whatever the layout shows.

Who uses the keyboard

People whose hands make a mouse difficult, through a tremor, an injury or a disability. People using screen readers, which follow the same code order.

People with a broken trackpad, a wrist in a cast, or a habit of tabbing through forms because it is faster.

Many of them are filling in exactly the forms a business most wants completed: enquiries, bookings, applications.

Testing with the Tab key

Open a key page, leave the mouse alone, and press Tab repeatedly while watching the highlight. Shift and Tab together move backwards.

Note every jump that surprises you, every press where the highlight disappears, and every item you cannot reach at all.

On a Mac, Safari skips links when tabbing unless a setting in its advanced preferences is switched on, so turn it on first or test in another browser.

Test the home page, the contact page, the main form and the page most visitors arrive on. Ten minutes covers all four.

A worked example

A Montessori school's home page shows a Book a tour box beside the welcome text, near the top. Last month a parent wrote to say she could not reach it with the keyboard.

The school's developer pressed Tab through the page. The first press went to the newsletter field in the footer, which carried a numbered tab setting from the theme.

The next dozen presses vanished into the phone menu, hidden off the edge of the screen but still reachable.

The tour box came last of all, because it was coded after the footer and placed at the top with layout code.

The fix removed the numbered setting, hid the phone menu properly on larger screens, and moved the tour box in the code to where it appears on screen.

A keyboard user now reaches the menu, the welcome text and the tour box in the order a sighted visitor reads them.

Fix the code order, not the numbers

The tempting fix for a jumpy page is to number the tab stops. It works for the items numbered and scrambles everything else.

The lasting fix is to put things in the code in the order they should be read, and to use layout code to place them, not to rearrange them.

Grid layout, which arrived in Chrome and Firefox this month, makes it even easier to place things anywhere on screen, and so even easier to drift from the code order.

When a design needs different arrangements on phones and computers, ask the developer how the code order will work in both before the design is approved.

Menus and pop-ups

A phone menu pushed off the edge of the screen on a computer is still in the page. Unless it is properly hidden, Tab visits every item in it, invisibly.

Pop-ups should take the focus when they open and hand it back when they close. One that opens without taking focus leaves keyboard users tabbing through the page behind it.

Chat boxes and cookie notices added by scripts usually land at the end of the code. Check that they can be reached and closed with the keyboard.

Seeing where the focus is

Testing the order only works if the focus can be seen. Many sites remove the browser's focus outline because someone found it untidy.

Without it, a keyboard user cannot tell where they are, whatever the order. WCAG 2.0 requires the focus to be visible at level AA, the level most organisations aim for.

The outline can be restyled to suit the design. It should not be removed.

The counter-case

A small jump between two items sitting side by side is minor, worth fixing when the page is next edited rather than today.

A simple one-column site built on a well-made theme may already be fine. Ten minutes with the Tab key will say so.

And keyboard order is one part of accessibility, not the whole of it. Labels, contrast and text alternatives for images matter as much.

Where the order jumps on a page people need, though: fix the code order, remove numbered tab settings, and keep the focus visible.

The test

1. Open your four key pages.
2. Press Tab from the top of each.
3. Note every jump and vanished highlight.
4. Remove numbered tab settings from the code.
5. Match the code order to the visual order.
6. Check that menus and pop-ups work by keyboard.
7. Keep the focus outline visible.

Step five is the real fix. The other steps find the problem or patch it, while matching the code to what people see keeps the order right through every future edit.

The fields at the end of that order need labels that stay visible, covered in forms labelled only by placeholder text.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.