UX7: Accessible and inclusive design
Touch, zoom and reflow
🎯You'll be able to
Size and space touch targets, and make sure screens work when people zoom or enlarge text.
🏠The everyday picture
A lift's buttons are big enough to press with a gloved hand and far enough apart that you don't hit two floors at once. Touch screens need the same care.
📘What it really is
-
Target size: WCAG 2.2 AA asks for at least 24 by 24 CSS pixels, or enough space around smaller targets (2.5.8). Apple's guidelines suggest 44 by 44 points and Android's 48 by 48 density-independent pixels. Many teams use 44 by 44 as their floor; the kit does.
-
Spacing between targets matters as much as size: P3 and P5 hit "Cancel" when aiming for the button next to it.
-
The whole label is the target: clicking a checkbox's label should tick it (a
label fordoes this), which also makes the target bigger. -
Zoom and text size: content should work with text enlarged to 200% (1.4.4) and reflow at 320 CSS pixels wide (1.4.10) without sideways scrolling or cut-off text.
-
Orientation: don't lock the screen to portrait unless it's essential.
- Gestures: anything done with a swipe or a drag should also have a simple tap alternative (2.5.7).
📝A worked example
Input: tap targets in the starter.
Steps:
- Run
npm run test:prototypeon the starter. - Read test 7's output.
Expected output: small targets on the search page, including "Go" and every "Choose a time" link. In the reference, .btn has
min-height: 48px and min-width: 44px, back links have min-height: 44px, and the checkbox's label is at least 44 pixels high, so
test 7 passes on every page.
🌍Where it's used
- Payment apps, where a mis-tap can send money to the wrong person.
- Kiosks in hospitals and railway stations.
- Apps for older users, who are more likely to have tremors or reduced dexterity.
📝Case scenario
A grocery app put "+" and "−" buttons 4 pixels apart. Customers often ordered two of something when they meant to remove one. Larger, separated buttons and a quantity shown in words ("2 packets") reduced returns.
🖱️Try it
On your phone, find a screen where two small targets sit close together. Measure them in a screenshot. Success: you estimate their size and suggest a layout that gives each at least 44 by 44 pixels.
⚠️Common mistakes
- Small text links as the main action. Sign: 12-pixel links. Fix: buttons or larger links with padding.
- Targets too close. Sign: "Cancel" right next to "Confirm". Fix: space them, and make the destructive one less prominent.
- Fixed heights that cut off text. Sign: buttons overflow at 200% text. Fix:
min-height, notheight.
🛠️For your project
Project 2's test 7 checks that every link and button is at least 44 by 44 pixels at 375 pixels wide; test 8 checks reflow at 320.
✅Quick check
What minimum target size does WCAG 2.2 AA ask for?
Show the answer
24 by 24 CSS pixels (or enough spacing); many teams use 44 by 44 as their own floor.
Why use min-height instead of height for buttons?
Show the answer
So buttons can grow when text is enlarged instead of cutting it off.