WebsightWhat it asks for, in plain English
Anything you can click or tap should be at least 24 by 24 CSS pixels, so that people with imprecise pointing can hit it. Small targets are allowed only when they are spaced out: if you draw a 24 pixel circle centred on the small target, it must not overlap any other target or its circle. Tiny icons crammed together fail; the same icons with breathing room pass.
There are exceptions. Links inside a line of text are exempt. Controls the browser draws itself, with no styling, are exempt. A small target is fine if the same action is available elsewhere on the page as a target that meets the size. And a target that has to be small for what it does, such as a pin on a map, is exempt.
This is new in WCAG 2.2. The failures are mostly icon buttons (close, edit, delete) in toolbars, pagination numbers, and dense rows of social media links.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.5.8 page has the full intent, techniques and definitions.
Who it affects
Someone with a tremor aims for a 16 pixel delete icon and hits the edit icon next to it.
A person with large fingers on a small phone taps two pagination numbers at once.
Anyone using a touch screen on a moving train needs every target to be bigger than their wobble.
Example
Three 16 pixel buttons touching each other. Delete is one wobble away from Share.
28 by 28 pixel buttons with an 8 pixel gap. The icon inside can stay small; it is the hit area that matters.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}.row{display:flex;align-items:center;gap:0;background:#f3f4f6;padding:6px 10px;border-radius:6px;width:300px}.row span{flex:1}button{width:16px;height:16px;padding:0;border:0;border-radius:3px;background:#374151;color:#fff;font-size:11px;line-height:16px}</style>
<div class="row"><span>Quarterly report.pdf</span><button aria-label="Rename">R</button><button aria-label="Share">S</button><button aria-label="Delete">D</button></div><style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}.row{display:flex;align-items:center;gap:8px;background:#f3f4f6;padding:6px 10px;border-radius:6px;width:300px}.row span{flex:1}button{width:28px;height:28px;padding:0;border:0;border-radius:4px;background:#374151;color:#fff;font-size:12px}</style>
<div class="row"><span>Quarterly report.pdf</span><button aria-label="Rename">R</button><button aria-label="Share">S</button><button aria-label="Delete">D</button></div>How to check it
- With the browser inspector, hover over small icon buttons, close buttons, pagination links and toolbar icons and read their width and height. Each should be 24 by 24 CSS pixels or more.
- For anything smaller, check the gap to its neighbours: there should be enough space that 24 pixel circles around each would not overlap.
- Ignore links in running text, which are exempt, but check icon links in lists and headers.
- On a phone, try tapping each small control with a thumb and see what you hit.
What Websight checks for 2.5.8
Websight runs this automated check for 2.5.8:
Websight's target size check measures buttons and links on the page against 24 by 24 and the spacing rule, and reports the ones that fall short. It cannot judge the exceptions, such as whether a target is essential or has an equivalent elsewhere, so those are on the manual checklist.
Practical tips
- Give icon buttons padding rather than shrinking them to the icon; a 16 pixel icon in a 32 pixel button is ideal.
- Space adjacent small targets by at least 8 pixels.
- Make the whole card or row the link where the design has one action, instead of a tiny arrow in the corner.
Other criteria in guideline 2.5, Input Modalities
- 2.5.1 Pointer Gestures (level A)
- 2.5.2 Pointer Cancellation (level A)
- 2.5.3 Label in Name (level A)
- 2.5.4 Motion Actuation (level A)
- 2.5.7 Dragging Movements (level AA)