DailyRNG
Login
Advanced

Keyboard paths through interactive regions

A page is keyboard complete when every action has a key path and no path traps the user. Traps are the failure that automated tools never find, so they are found by walking the page with one key.

What you will see

The modal closes and focus returns to a sensible place. If focus is lost, the return target is missing.

About 1 min of reading

Try It

Walk the page and find the gaps

1

Count the clickables

grep -oE '<(a|button|input|select|textarea)\b|onclick' index.html | wc -l

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

What it prints
The set of things that should be reachable by keyboard.
2

Count the focusables

grep -oE '<(a[href]|button|input|select|textarea|area)\b|tabindex="0"' index.html | wc -l

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

What it prints
Should equal the first count. Fewer means something is not focusable.
3

Find positive tabindex

grep -c 'tabindex="[1-9]' index.html

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

What it prints
Zero. Any positive value creates an order that no one can maintain across pages.
4

Test the modal exit

open the page, open the modal, press Escape

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

What it prints
The modal closes and focus returns to a sensible place. If focus is lost, the return target is missing.
Do not close a modal by clicking only. It must close on Escape, and focus must move back to the element that opened it.

Data Flow

Tab walk to a trap
1 Focus the first control
↓
2 Tab until focus returns to it
↓
3 Record every control reached
↓
4 Compare to the set of clickable things
↓
5 Any gap is a trap or a ghost
Why this works
The one-key walk

Start at the top, press Tab until the cycle repeats, and press Escape at every interactive region. If you ever cannot continue, that is the trap.

Focus management in a modal

While a modal is open, everything outside it must be unfocusable. Leaving it focusable means a keyboard user can act on content they cannot see.

Examples

Escape from every region

A modal, a game canvas, or a drag interaction must respond to Escape or have a visible way out that is reachable by Tab. A region with no exit is a trap.

No keyboard hijack

Do not capture Ctrl+arrows or plain letter keys the browser uses. Hijacking a browser shortcut makes the page unusable for anyone whose navigation depends on it.

Announce the shortcut

If Escape closes the modal, the page must say so near the control. A shortcut nobody can discover is not accessible, it is only technically reachable.

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.

← Custom controls and ARIA, honestly
Previous Lesson
Custom controls and ARIA, honestly
Next Lesson
Testing with real assistive technology
Testing with real assistive technology →