Target size too small (target-size)

The target-size rule flags buttons, links and other controls that are smaller than 24 × 24 CSS pixels and sit too close to their neighbours. People with a tremor, or anyone tapping on a phone, hit the wrong one. The fix is a minimum size of 24 × 24 px for every target – or enough space around the small ones.

What the rule means

WCAG 2.5.8 Target Size (Minimum) is new in WCAG 2.2, at Level AA. A pointer target has to be at least 24 × 24 CSS pixels, unless one of these exceptions applies:

• Spacing: a circle of 24px diameter centred on the target does not touch another target or another small target's circle.
• Equivalent: the same function is available through another control on the page that is large enough.
• Inline: the target is in a sentence, or its size is set by the line height of the text – a link in a paragraph.
• User agent control: the browser draws it and the author has not changed it.
• Essential: the size is essential or legally required, such as pins on a map.

axe measures the size of each interactive element that is not inline in text, and, where it is small, the space to its nearest neighbours. It cannot know about the equivalent or essential exceptions. Where another element covers part of a target, or a small element is not in the tab order, it often cannot decide and reports the case as undecided.

The rule ships disabled in axe-core, so many tools never run it. Reviseberg runs the full WCAG 2.2 A/AA rule set, which includes it. EN 301 549 V3.2.1 is based on WCAG 2.1 and has no clause for 2.5.8, which is why the fact box shows none.

Who is affected

People with tremors, Parkinson's disease, arthritis or limited fine motor control. People using a head pointer, a mouth stick or a trackball. Older people, whose accuracy declines. And everybody using a phone one-handed, on a bus, or with large fingers – small targets packed together are one of the most common frustrations on mobile.

Why the check fails

• Icon buttons – close ×, share icons, "copy" or "delete" – drawn at 16–20px with no padding.
• Pagination links and carousel dots set side by side with a few pixels between them.
• Social icons and footer link rows styled tightly to fit one line.
• Mobile layouts that keep desktop icon sizes but shrink the gaps around them at 360px.
• Component libraries with a "small" or "compact" size variant used for primary controls.

How to fix it

1. Give every control a hit area of at least 24 × 24 px with min-width/min-height and padding – the icon can stay small, the clickable area grows.
2. Where controls must stay small, space them so that a 24px circle around each touches no neighbour.
3. For touch-heavy screens, aim higher: 44 × 44 px is the Level AAA figure (2.5.5 Target Size (Enhanced)) and a comfortable size for fingers.

/* Before – 16 × 16 px targets, 2px apart */
.pager      { display: flex; gap: 2px; }
.pager__btn { width: 16px; height: 16px; padding: 0; font-size: 12px; line-height: 1; }

/* After – at least 24 × 24 px, with room between them */
.pager      { display: flex; gap: 8px; }
.pager__btn { min-width: 24px; min-height: 24px; padding: 4px 8px; font-size: 16px; line-height: 1; }

How to test it manually

1. Open the page in developer tools with device emulation at a phone width (360px) and at desktop width.
2. Hover over small controls and read their size in the element tooltip – below 24 × 24 px needs a closer look.
3. For each small one, check the spacing: would a 24px circle centred on it overlap a neighbouring control?
4. Try the page on a real phone: tap each icon button and pagination link once. Wrong hits are the finding the rule predicts.
5. Decide the exceptions the rule cannot see – is there an equivalent larger control, or is the small size essential?

Related WCAG criterion

2.5.8 Target Size (Minimum), Level AA. Related: 2.5.1 Pointer Gestures and 2.5.7 Dragging Movements, the other WCAG criteria about operating a page with a pointer; 2.5.5 Target Size (Enhanced) is the Level AAA version at 44 × 44 px.

How Reviseberg reports it

Reviseberg runs target-size on every crawled page twice – at 1280px and again at 360px, because a narrow layout often squeezes targets together that have room on a desktop. The issue list shows the rule with its severity, WCAG criterion and level, the number of targets and pages affected, and the points you get back by fixing it. The detail view gives the CSS selector, the HTML snippet and each affected page.

Targets axe cannot decide – partly covered by another element, or not in the tab order – go to the Potential issues queue for a person to decide, and are never counted as passes. When an exception applies that the rule cannot see, such as an equivalent larger control, mark the finding "false positive" with that reason; "ignore" and "can't fix" work the same way, and every decision is logged.

Related rules

• undefined – zoom blocked, so people cannot enlarge small targets themselves.
• undefined – icon buttons that are also missing a name.
• undefined – inline links, which this rule exempts, still need to be recognisable.

Measure every target on desktop and mobile – get a free scan