Touch targets are too small

Message shown by axe and Lighthouse: All touch targets must be 24px large, or leave sufficient space · target-size · WCAG 2.5.8

What it means and why it matters

Small icons and links close together are hard to hit for people with motor impairments and on phones (WCAG 2.5.8).

How to fix it

Make interactive targets at least 24×24 CSS pixels or add enough spacing between them.

Code example

Before

<a href="/fb" style="display:inline-block;width:16px;height:16px"><img src="fb.svg" alt="Facebook"></a>

After

<a href="/fb" style="display:inline-block;min-width:24px;min-height:24px;padding:4px"><img src="fb.svg" alt="Facebook"></a>

All accessibility errors