This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Accessibility
How big does a button for fingers and shaky hands have to be?
A button of 20 pixels height hits a finger on the phone only with luck, a shaky hand with the mouse neither. Level AA (2.5.8, new in WCAG 2.2) requires 24 × 24 pixels or sufficient distance. The level AAA criterion 2.5.5 requires 44 × 44 CSS pixels for each target operated with a pointer. Excluded are links in the flow text, elements with an equivalent larger alternative and elements whose size the browser specifies.
What the Criterion Requires
Each target typed or clicked is at least 44 CSS pixels wide and high. This corresponds to about 9 millimeters on a mobile phone, the width of a fingertip. Exceptions: links in a sentence or paragraph; targets for which there is an equivalent alternative of 44 pixels on the same page; Targets whose size is not determined by the author (browser control); and targets for which the concrete representation is essential, such as points on a map.
For whom this counts
People with tremor, arthritis, spasticity or after stroke don’t hit small targets or hit alongside them. On the phone, this affects everyone who taps with their thumb, on the bus, with a glove, with a thick finger. The 44 pixels come from the design guidelines of the large operating systems and have proven themselves as a limit from which operating errors significantly decrease. Larger goals also reduce the error rate for everyone else.
This is how we deal with it
Today, the measuring core measures each operating surface in the test area Responsive against the 24-pixel limit of level AA and specifies width and height for each location. The same measurement says which areas reach 44 pixels. The criterion is automatically decidable except for the question of whether an alternative is equivalent. It belongs to the category AAA in knowledge; The report sets the standards.
Examples
Button with 24 pixels
.symbol-knopf { width: 24px; height: 24px; } /* Stufe AA */.symbol-knopf { min-width: 44px; min-height: 44px; } /* Stufe AAA */44 × 44 CSS pixels per target, excluding intervals. Links in the text are excluded.
- Enter buttons, menu items and icon links with a minimum height and width of 44 pixels (min-height, min-width) or equivalent inside distance.
- Increase the click area of icons with interior clearance, not the icon itself.
- Leave links in the flow text as they are; they are excluded.
- Check lines in tables and lists with icon actions: there are small targets most common.
