Keyboard
This skill puts the mouse away and walks a running page with keys alone. It records every focus stop in order and returns a numbered report of what the keyboard cannot reach, see or operate.
Every stop pressed, never read from the code
Focus order, reach and operation are judged from keys pressed in the running page. A stop the walk did not press is Not verified, never assumed. One unreachable control is a finding however minor the control.
How the focus ring looks, dialog focus traps and accessible names belong to defaults, and a failure there cites its id. Opening the running result belongs to verify. Forcing hidden states open belongs to lab.
1. Load the recorder
Open the page at the state the user named and click nothing. Run tabstops.js through the browser's evaluate call. It returns pointer targets with no keyboard way in, then records each stop as keys are pressed. Judging order or reach from the markup is keyboard-press-the-keys.
Send keys through trusted input, such as Playwright's keyboard.press or the operating system. A dispatched DOM KeyboardEvent never moves focus, so a walk with no stops means the keys never arrived.
2. Walk forward, then back
Press Tab from the top of the page until focus leaves it, then Shift+Tab back to the start. Read window.__keyboard.stops and call window.__keyboard.highlight().
Stops follow the reading order of the layout. A jump from the header to the footer and back, or any positive tabindex, is keyboard-order-follows-layout.
Every stop shows an indicator on screen. A stop with no visible ring is keyboard-see-every-stop. Focus landing on links inside a closed drawer is keyboard-no-hidden-stops. A stop with no name cites defaults-name-icon-buttons.
When navigation comes before the main content, the first stop is a skip link to it. Twenty header stops before the first result is keyboard-skip-link.
3. Reach every control
Compare the stops against what the page shows and against the recorder's unreachable list. A clickable div the walk never lands on is keyboard-reach-every-control.
4. Operate each control
Enter and Space press buttons, Enter follows links and Space toggles checkboxes and switches. A control that answers a click but no key is keyboard-operate-every-control.
Menus, tabs, radio groups, listboxes and grids take one Tab stop, and arrows move inside them. A menu where every item is its own Tab stop is keyboard-arrows-inside-composites.
Escape closes the open menu, popover, sheet or dialog. An overlay that only a click can close is keyboard-escape-closes.
5. Open and close each overlay
Open each dialog, menu and popover from the keyboard. Focus moves inside, stays inside a modal and returns to the trigger on close. A failure cites defaults-trap-and-return-focus.
6. Remove something, then find focus
Delete a row, dismiss a toast, collapse a section and submit a form from the keyboard. Focus lands on a neighbour, the container or the result. A stop the recorder marks lost, with focus left on body, is keyboard-focus-survives-removal.
7. Report the walk
Return the stops as a numbered list of role and name, with the screenshot showing the highlight() numbers. Cite each finding by its stop number and the key that failed. A finding with no stop and no key is keyboard-numbered-walk.
The pair
Every check is a pair. The broken line sits beside the line that replaces it.
| Rule | Broken | Replacement |
|---|---|---|
keyboard-press-the-keys |
"The markup uses buttons, so it is reachable" | The walk recorded with Tab and Shift+Tab |
keyboard-order-follows-layout |
tabindex="3" on the search field |
No positive tabindex, the field placed in reading order |
keyboard-see-every-stop |
Stop 7 focused with no visible ring | Stop 7 showing the project's :focus-visible outline |
keyboard-no-hidden-stops |
Tab landing on links in the closed drawer | inert on the drawer while it is closed |
keyboard-skip-link |
Twenty header stops before the first result | A Skip to Content link as stop 1 |
keyboard-reach-every-control |
<div onClick={openRow}> |
<button onClick={openRow}> |
keyboard-operate-every-control |
A switch that toggles on click only | Space toggles it |
keyboard-arrows-inside-composites |
Eight Tab stops inside one menu | One stop, arrows move between items |
keyboard-escape-closes |
A popover that closes on outside click only | Escape closes it and focus returns to the trigger |
keyboard-focus-survives-removal |
Focus on body after deleting a row |
Focus on the next row |
keyboard-numbered-walk |
"Keyboard support is patchy" | "Stop 12, Space does nothing on Notifications" |
Reporting
Severity. HIGH is a control the keyboard cannot reach or operate, or focus lost to body after an action. MEDIUM is a stop out of reading order, a stop with no visible ring or a stop hidden off screen. It is also a composite with a Tab stop per item, or an overlay Escape does not close. LOW is a missing skip link, or a report without numbered stops.
Format. One finding per root cause, numbered and citing the stop:
1. file:line - [rule-id] stop N, key, what is wrong
Cite the recorder's element when the source line is not found. Then a Rule | Count | Severity summary. Block when any HIGH remains, Approve otherwise. Mark content inside cross-origin frames as Not verified.