UX7: Accessible and inclusive design
Keyboard use and focus
🎯You'll be able to
Make every action work from a keyboard, with a visible focus indicator and a logical order.
🏠The everyday picture
Some people drive with hand controls instead of pedals. The car still has to go everywhere a normal car goes. A keyboard is a different set of controls for the same screens.
📘What it really is
-
Who uses a keyboard: people who can't use a mouse or touch (tremor, paralysis, blindness with a screen reader), and people with switch devices, voice control or external keyboards on tablets (P5 in the kit's research).
-
Every action reachable: Tab moves forward, Shift+Tab back, Enter activates links and buttons, Space activates buttons and ticks checkboxes.
-
Use real controls:
button,a,inputandselectare keyboard-ready. Adivwith a click handler isn't, unless you add a lot of extra work, so use abutton. -
Visible focus: a clear outline shows where you are (WCAG 2.4.7). It needs at least 3 to 1 contrast against the background, and it shouldn't be hidden behind sticky headers (2.4.11).
-
Logical order: focus follows the visual and reading order.
-
Move focus on purpose: after a failed submit, move focus to the error summary; after opening a dialog, into the dialog; after closing, back to where you were.
-
No traps: focus can leave every component.
📝A worked example
Input: the slot screen.
Steps:
- Open
slot.html?clinic=gomti-nagarand press Tab repeatedly. - In the starter, focus jumps from the Back link to "Continue": the times are
divs and can't be reached. - In the reference, each time is a
<button aria-pressed="false">. Tab reaches 10:30; Space chooses it.
Expected output: test 3 of npm run test:prototype reaches 10:30 with Tab, presses Space, and checks aria-pressed="true", the words
"Selected: 10:30" and that Continue is enabled. The focus outline is 3px solid var(--color-focus), which is 5.12 to 1 against the
page background in the reference tokens; the starter's focus colour reaches only 1.43 to 1.
🌍Where it's used
- Banking and tax portals, where power users fill forms by keyboard.
- Point-of-sale and call-centre systems, where staff work faster with keys.
- Assistive technology, which builds on keyboard access.
📝Case scenario
A railway booking site's seat map could only be used with a mouse. A wheelchair user's organisation complained that its members could book a ticket but not choose an accessible seat. The seat map was rebuilt with buttons and a list alternative.
🖱️Try it
Book an appointment on the reference prototype using only the keyboard. Success: you complete the journey, you can see where focus is, and the order matches what you see.
⚠️Common mistakes
- Click handlers on
divs. Sign: Tab skips the control. Fix: usebutton. - Removing the focus outline. Sign:
outline: nonewith nothing instead. Fix: a clear:focus-visiblestyle. - Focus left behind. Sign: after an error, focus stays on the button. Fix: move it to the summary.
🛠️For your project
Project 2's test 3 checks the slot picker by keyboard, and Project 3's test 3 checks the focus colour's contrast.
✅Quick check
Which keys activate a button?
Show the answer
Enter and Space.
How much contrast does a focus indicator need?
Show the answer
At least 3 to 1 against what's next to it.