Targets need enough size or spacing

• Rule: axe/target-size
• Checks: All touch targets must be 24px large, or leave sufficient space
• WCAG: 2.5.8
• Fix class: design: A fix needs a visual decision.

Who it affects

• People with limited dexterity, who need targets large enough to hit.
• People with low vision, who zoom, magnify or need strong contrast.

How to fix it

A button or link is smaller than 24 by 24 pixels, such as an icon button

Make the clickable area at least 24 by 24 CSS pixels, with padding or with min-width and min-height. The icon can stay small; only the target needs to grow.

<button type="button" aria-label="Remove item" style="min-width: 24px; min-height: 24px">
  <svg aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-remove"></use></svg>
</button>

Small targets sit close together, such as pagination links or a row of icons

Enlarge each to 24 by 24 pixels, or space them so that a 24-pixel circle centered on each small target overlaps no other target and no other small target’s circle. That means each small target’s center sits at least 12 pixels from every other target and at least 24 pixels from every other small target’s center.

axe asks whether a small element with tabindex="-1" is a target

If people can click or tap it, it is a target: enlarge or space it as above. If it only takes focus from script and has no pointer action, nothing needs to change.

Fixes that fail

Setting min-width and min-height on an inline element such as <a>

Width and height do not apply to inline boxes, so the target stays the same size. Set display: inline-block or inline-flex as well.

Enlarging the target at one breakpoint only

axe checks the viewport it ran in. Compact mobile layouts often shrink targets again, so check every breakpoint.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.