WCAG 2.2 Target Size: How Big Should Buttons Be

Why size matters

Small interactive elements can be tough for people with mobility issues or those using touchscreens to tap correctly. Controls that are large enough make it easier for everyone, regardless of their abilities, to use the interface without getting frustrated.

What WCAG 2.2 says

Under Success Criterion 2.5.8, the target size for pointer inputs has to be at least 24 by 24 CSS pixels. This means the area you tap or click with a mouse, stylus, or finger has to be big enough. It applies to things like buttons, form controls, and other interactive elements.

If a target is really small, there are a few exceptions mentioned in the guidelines. For instance:

• If targets are next to each other and have enough space, they can still be tapped accurately.

• When text links are inline and the line height limits their size.

• If a browser provides a control and it hasn't been changed.

Despite these exceptions, 24 × 24 CSS pixels is the smallest size designers should aim for when making accessible interfaces. Using bigger targets usually makes things easier for everyone, not just those with motor issues.

Practical considerations

• Spacing matters: Small visual elements can work if you give them enough space, making them easy to click on.

• Responsiveness is key: On touch devices, having bigger tap areas helps avoid mistakes and makes things better for people with bigger fingers or mobility issues.

• Don't just think pixels: While CSS pixels give you a starting point, actual size can vary by device, so testing on real hardware is still a must.

In summary

WCAG 2.2 sets a clear target for interactive elements: they should be at least 24 by 24 CSS pixels in size, with a few exceptions. Following this guideline makes buttons and controls more user-friendly and helps create a more inclusive online experience.