Accessibility
03 / Keyboard, Focus & Touch
Key question
Does it work without a mouse?
Many people use digital services without a mouse: with a keyboard, voice control, a switch, head or eye tracking, or a screen reader. Others have trembling hands or large fingers on small screens. Anything that can be clicked must also be accessible by other means.
Learning objective: You can plan workflows for keyboard and touch, make the focus visible, and define sufficient target sizes.
For many, what cannot be reached does not exist.
3.1 / Keyboard
Tab, Enter, space bar and arrows.
Use the keyboard to jump from element to element. Three rules make this reliable:
01
Available
Every control can be navigated to using Tab.
02
Logical order
The focus follows the reading order.
03
No trap
There's always a way out of anywhere.
A 'Skip to content' link at the top of the page saves having to tab through the entire navigation on every page.
The keyboard is the acid test for all other assistive tools.
3.2 / Visible focus
Focus is the keyboard's mouse pointer.
Many designs remove the focus outline because it is distracting. For people using a keyboard, that is like hiding the mouse pointer. The outline should be clearly visible: at least 2 px thick, with a 3:1 contrast ratio against its surroundings, and not obscured.
With the CSS focus-visible property, the outline only appears when using the keyboard, not when clicking. This keeps the design clean and uncluttered without anyone losing their place.
Design focus, don't hide it.
3.3 / Touch and gestures
Goals must be big enough.
Apple recommends touch targets of at least 44 × 44 points, while Google recommends 48 × 48. At Level AA, WCAG 2.2 requires at least 24 × 24 pixels or sufficient spacing between adjacent targets. Small icons therefore need a larger, invisible clickable area.
Gestures like swiping, dragging, or pinching always need a simple single-tap alternative, such as arrows for a carousel or plus and minus buttons for zooming. Nothing should be triggered solely by shaking or tilting the device.
Every gesture needs a simple alternative.
Exercise
A day without a mouse
Task: Test one of your own projects for keyboard and touch accessibility.
STEP 1
Tab through a page from top to bottom and note the order.
STEP 2
Highlight areas without visible focus and elements that you cannot reach.
STEP 3
Measure the smallest touch targets on mobile.
STEP 4
Add a simple alternative for each gesture.
Evaluation: Where did you get stuck, and how much design does the solution really need?