Technote

Themes & plugins Practical

Series Accessibility is quality Part 4 of 8

Walking the site by keyboard: where the order breaks

Take your hand off the mouse and Tab through a page once; five minutes exposes most of it. Nearly always, the culprit is CSS having reordered the screen.

The cheapest and most productive accessibility check is tabbing through a page once. No tools, no installation, no specialist knowledge. Take your hand off the mouse, press Tab repeatedly, and watch two things: can you see where you are, and is the movement the order the screen implies?

A five-minute check you can run on the screen in front of you right now

Order follows the document, not the layout

Focus moves in the order things appear in the HTML, not the order you see them. Usually those match, so nothing surfaces. They diverge the moment CSS rearranges the visual order.

Once visual and document order disagree, keyboard movement becomes unpredictable

That last row is the quiet one. If an off-canvas menu is merely pushed off-screen without being properly hidden while closed, the menu is shut but its links still take focus. To the user it looks as though ten presses of Tab go nowhere at all.

The part a designer decides

This looks like an implementation slip, but it usually starts in the mockup. Draw the blocks in a different order for desktop and mobile and the build has no option but to reorder with CSS — and at that instant the two orders separate.

So decide the reading order first. If this screen were read top to bottom as a single column, what order would it be? That becomes the document order, and the responsive layouts are built without disturbing it. Where you genuinely must reorder, note it in the handoff. An exception announced in advance is not an incident.

Traps and skips

While you are going round, watch for two more things: where focus gets trapped and what gets skipped.

Five lines to confirm on a single keyboard pass

The skip link on that last row is almost never drawn in a mockup, and it earns its place. On a site with twenty menu items it removes twenty presses of Tab from every single page change. Keep it hidden until it receives focus and it costs the design nothing.

Problems that come out of layout structure are covered further in the Themes & plugins archive, and clearing them up across a live site falls within the scope of our optimization program.

Next part

The screen keyboard users spend longest on is a form. Next: labels and error messages — starting with why a form that uses placeholders as labels loses people halfway through.

More on this topic

All technotes

Themes & plugins Practical

Decide the editable regions before you design them

A design the CMS cannot express stays up for negotiation long after it ships. Deciding what editors may change, first, removes the negotiation entirely.

Designers 6 min read

₩270,000 · Join the program