A keyboard-only test means you put the mouse aside and try to complete every task with Tab, Enter and Space. It quickly shows controls you cannot reach, focus you cannot see and a confusing order.
This lesson belongs to web development without assessed-project substitution. It tests a practice page, so you can rehearse the method before applying it to your own work.
What should I check?
Check four things: reachability, order, visible focus and activation. Each one is a clear pass or fail.
| Check | Question | Pass looks like |
|---|---|---|
| Reachability | Can Tab reach every control? | All controls get focus |
| Order | Does focus move in a sensible sequence? | Top to bottom, matching the layout |
| Visible focus | Can I see where focus is? | An outline or highlight |
| Activation | Do Enter and Space do the job? | Same result as a click |
Worked example: a three control practice page
A fictional page has a name box, a choice of class (a dropdown) and a Show result button that writes a greeting under the form.
Test script, starting with the page loaded and no mouse use:
- Press Tab. Expect focus on the name box, visibly outlined.
- Type “Aina”. Press Tab. Expect focus on the class dropdown.
- Use the arrow keys to choose 4 Bestari. Press Tab. Expect focus on the button.
- Press Enter. Expect “Hello Aina from 4 Bestari” under the form.
- Press Shift and Tab. Expect focus to return to the dropdown.
| Step | Key | Expected | Actual | Result |
|---|---|---|---|---|
| 1 | Tab | Name box focused | Name box focused | Pass |
| 3 | Tab | Button focused | Button skipped | Fail |
| 4 | Enter | Greeting shown | Nothing | Fail |
The failures in steps 3 and 4 share one cause, found next.
The mistake: a clickable element that is not a control
The button in the failed test was built like this:
<div id="show">Show result</div>with a click handler attached in JavaScript. It looks like a button and works with a mouse. But Tab skips a plain div, and Enter does nothing because a div is not a control.
The fix is a real button element:
<button id="show">Show result</button>The same click handler now works, Tab reaches it, and Enter and Space both activate it. Keep the appearance in CSS, since the structure and the style are separate jobs, as in separating structure, presentation and behaviour.
The second common fault: invisible focus
Some styles remove the outline with outline: none to look tidier. The page then passes reachability but fails visible focus, because the user cannot see where they are.
If you change the outline, replace it with another clear indicator, such as a thick border or a background colour change. Re-run the test after any style change.
Check yourself
Tab on a page goes name box, then button, then a dropdown that sits above the button on screen. Name the fault and one fix.
Answer
The fault is a focus order that does not match the visual order: the dropdown appears above the button but receives focus after it. Keyboard users jump around the page.
Fix: place the dropdown before the button in the HTML so the source order matches the layout, rather than moving it on screen with CSS alone. Then repeat the Tab test from the top.
What to study next
Record your keyboard test so someone else can repeat it with documenting student-authored changes with a reproducible test log. For the design side, see designing an accessible input form for a fictional task.
To practise with a teacher, see online one-to-one Computer Science tuition.