Level AA · WCAG 2.2
2.5.8 Target Size (Minimum)
Pointer targets are at least 24 by 24 CSS pixels, or have enough space around them.
Partly automated Some failures are detectable, others need judgement.
How it fails in practice
A row of 16px social icons in a footer, spaced four pixels apart. A close button too small to hit on a phone.
How to fix it
Grow the hit area with padding rather than the icon — the target can be bigger than the thing you can see.
At a glance
- Level
- Level AA — the level EN 301 549 requires, and therefore the level the BFSG and the EAA are measured against.
- Principle
- Operable
- Guideline
- 2.5 Input Modalities
- Added in
- WCAG 2.2
- EN 301 549
- Not referenced in EN 301 549 v3.2.1
- Automated check
- Partly automated
How to test it by hand
- Find the small targets: icon buttons, close buttons, pagination, links in footers and filter lists, the plus and minus next to a quantity.
- Measure each one in the developer tools: 24 by 24 CSS pixels or more passes.
- A smaller target passes only if a circle 24 pixels across, centred on it, touches no other target and no other small target’s circle — the spacing exception.
- Links inside a sentence are exempt, as are controls whose size the browser sets and targets whose size is essential. Check again at phone width: targets shrink when the layout does.
In code
/* 16×16 icons, 4px apart */
.social a {
display: inline-block;
width: 16px; height: 16px;
margin-right: 4px;
}/* The icon stays 16px; the target grows to 24 */
.social a {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 24px; min-height: 24px;
}Partly automated
How far an automated check gets
A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.
Measured automatically from the rendered geometry, including the spacing exception — and on one page per template inside the menus that open on hover or focus, which are closed when the page loads.
Rules that check this criterion
target-sizeTarget size too small
The rule ids are axe-core’s (version 4.14.0), the open-source engine our scan runs, and our keyboard agent’s — the names a report or a CI log will show. An underlined id has a page of its own here.
Related criteria
Other criteria under the same guideline.
Further reading
-
Target size
Pointer targets must be at least 24 × 24 CSS pixels or have enough spacing from other targets (WCAG 2.5.8, Level AA, new in 2.2).
-
target-size
The axe rule target-size flags buttons and links smaller than 24 × 24 px without enough space around them (WCAG 2.5.8). Fix with code example.
Find out which criteria your site fails
We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.