How large click targets must be
Links and buttons must be large enough or spaced far enough apart to be hit reliably. WCAG 2.2 asks for at least 24 × 24 pixels or equivalent spacing.
How it works
A target is the area where a tap or click triggers an element. For an icon button that is often just the symbol itself, for a text link the line of text. When small targets sit close together, it is easy to hit the wrong one: with a finger on a phone, with a shaking hand, with limited fine motor control, or simply while walking.
WCAG 2.2 introduced success criterion 2.5.8 for this: a target is at least 24 × 24 CSS pixels. Smaller targets are allowed if they are spaced well enough: a circle of 24 pixels in diameter around the centre of each small target must not overlap another target or another such circle. The stricter level, 2.5.5, asks for 44 × 44 pixels; that is also the size Apple recommends for touch targets.
2.5.8 is new in WCAG 2.2. The European standard EN 301 549, the usual yardstick under the European Accessibility Act, still refers to WCAG 2.1, which doesn't contain it. It is good practice all the same.
What matters
- The target counts, not the symbol. A 16-pixel icon can have a 44-pixel target if the button has padding.
- Spacing as a way out. Where space is tight, such as social icons in the footer, enough room between small targets will do.
- Exceptions. Links in running text, browser controls you don't restyle, and targets with an equivalent larger alternative on the same page are not covered by the rule.
- Typical trouble spots. Slider dots, close buttons on pop-ups and banners, pagination, tightly packed footer links and menus with a small line height.
A minimum size enlarges the target while the symbol keeps its size and stays centred:
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}How to set it up
The size and spacing of controls are set by the theme, that is its CSS. Whoever maintains the theme enlarges targets through padding, minimum size or line height; the look often changes very little. Elements from plugins, such as sliders or cookie banners, can usually be adjusted with custom CSS. The report lists the targets that are too small, with their code.