DailyRNG
Login
Advanced

Testing reachability and focus order

A page can be visually perfect and unreachable by keyboard. The test walks the tab order and asserts the sequence of focusable things. That sequence is a property of the document order, so it is testable and it is testable cheaply.

What you will see

Something visible. A blank computed style means the ring was removed with no replacement.

About 1 min of reading

Try It

Walk the tab order once

1

Press Tab and record

press Tab five times after goto and print the tag and identifier focused each time

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Five focusable elements in the order the keyboard reaches them.
2

Assert the interactive set

compare the recorded list to the links and controls the page declares

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Equal sets. A declared control that never focuses is a keyboard trap.
3

Assert the order

check the recorded list is in document order

Before you run it, say out loud what it will print. Then open the answer.

What it prints
True. False means a focus order that does not match the visual order.
4

Assert the ring

read the computed outline or box-shadow on a focused element

Before you run it, say out loud what it will print. Then open the answer.

What it prints
Something visible. A blank computed style means the ring was removed with no replacement.
Do not assert focus on text content. Assert on the element identity, or a copy edit breaks the test.

Data Flow

Tab presses to a focus path
1 Press Tab
↓
2 Record the focused element
↓
3 Repeat until nothing new focuses
↓
4 Assert the list against the expected order
Why this works
What to assert first

That the form controls and links appear at all. A missing one is the worst failure and the cheapest to catch.

Where the walk is fragile

Assert on stable hooks, the same as every other assertion. A focus test keyed to text content fails on a copy edit.

Examples

Walk the tab order

Press Tab repeatedly and record what gains focus each time. The list is the keyboard path the user would take.

Assert the set and the order

Every interactive control appears once, and the order follows the visual order. Both are assertions, and the second is the one people forget.

Assert the ring exists

A focused element with no visible ring is unreachable in practice. Assert a non-default outline or a background change on focus.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Asserting on layout, not on markup
Previous Lesson
Asserting on layout, not on markup
Next Lesson
Taming a flaky frontend test
Taming a flaky frontend test →