Skip to main content

Accessibility discovery

Buy three, on a moving bus

The scenario

You are on the top deck of a bus with one hand on the rail. Or you have a tremor, or arthritis in your thumb, or you are holding a sleeping toddler. You have two stops left to order the thing you forgot.

Your task

  1. Close the cookie banner, change the quantity to 3, and pay. Use one finger or the hand you do not normally use.
  2. Watch the mis-tap counter as you go. Do not try to be careful — be as quick as you would really be.
  3. Press Measure the targets and compare the numbers against 24 and 44 pixels.
Time
8 minutes
Barrier
Targets too small and too close together
Success criterion
WCAG 2.2 — 2.5.8 Target Size (Minimum) at AA, 44 by 44 at AAA

Checkout

Version

Brynmill wool socks

£12.00 a pair

Qty 1

Total: £12.00

Mis-taps: 0

Try it on a phone. This exercise lands hardest on a real touchscreen, held one-handed, standing up. If you are running the session in a room, ask everyone to open it on their phone rather than their laptop.

What this exercise is showing

WCAG 2.2 added 2.5.8 Target Size (Minimum), which asks for 24 by 24 CSS pixels, or enough spacing around a smaller target that a 24 pixel circle centred on it would not overlap its neighbour. The AAA version, 2.5.5, asks for 44 by 44 — which is what Apple and Google have both recommended for years, and what most people's thumbs actually need.

Size is only half of it. The other half is what sits next to what. Putting Cancel order beside Pay now, the same size and a few pixels apart, means that every slip is expensive. Good design puts distance, or a different weight, or a confirmation step between a mistake and its consequence.

This is not only about permanent disability. It is a bus, a cold morning, a cracked screen, a cast on your wrist, a baby on your hip, the last 3% of your battery. Design for the worst moment, not the best one.

Questions for the group

  • What did the measurements say? Was anything under 24 pixels? Was anything under 44?
  • Where in our product does a destructive or expensive action sit next to a routine one?
  • What is our smallest tap target — a close button, a checkbox, a pagination link, an icon in a table row?

What good looks like

  • 44 by 44 as the working minimum for anything you tap, with 24 as the absolute floor.
  • Space between targets, not just size. The gap is part of the target.
  • The dangerous action looks different, sits apart, and ideally asks again.
  • Cookie banners do not cover the thing people came to do, and they can be dismissed with one obvious, full-size control.