a11y/target-size

Why

Small, crowded targets (a close "×", pagination numbers, icon toolbars) are missed by people with tremors, limited dexterity or large fingers, and by anyone on a moving bus. New in WCAG 2.2; axe-core does not run its target-size rule by default, so it must be turned on.

Fix

Give icon buttons and small links min-width: 24px; min-height: 24px (44px is a comfortable size on touch screens), using padding so the icon stays small. Where a target must be smaller, keep 24px of spacing around its centre. Links inside sentences and controls drawn by the browser are exempt.

Examples

/* bad: a 16px icon with no padding */
.close { width: 16px; height: 16px; padding: 0; }
/* good */
.close { min-width: 24px; min-height: 24px; padding: 4px; }

Sources

• WCAG 2.2, Understanding SC 2.5.8 Target Size (Minimum)
• WCAG 2.2 Technique C42, using min-height and min-width to ensure sufficient target spacing

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/target-size