I would if I could a guide to web accessibility

2.5.8 Target Size (Minimum)

If a target is too small, it is hard to activate. This criterion aims to ensure the targets are large enough.

Some automated tools can detect too small targets but you can also check for them yourself. On this page I have a quick CSS demo of the issue and how you can check for it as well. Essentially you can check if the size is enough by adding a 24x24 pixel circle on top of the target.

Each example has three identical-size targets (which aren't real targets in this example). On top of each, there is a 24x24 pixel circle, centered on the target.

Problematic example

The problematic example has 20px size targets without any space between the targets. When we add a 24x24 pixel circle on top of them, the circles will overlap. Which means the criterion will fail.

Better example

There are several ways to ensure the minimum target size. You can use padding or margin. Padding will add to the target size and margin will add space around the target. So here are two more examples that improve the problematic example.

A solution with padding:

The circles touch each other but they don't overlap. So this is alright.

A solution with margin:

Similarly to the padding example, the circles touch each other but they don't overlap. So this is alright as well.

Final comments

It's good to remember that adding margin doesn't actually make the targets themselves larger. So they aren't that much easier to hit. But the space helps people avoid hitting the wrong targets.

It's also recommended that the target sizes be larger than this on mobile. UI and accessibility communities often recommend a minimum target size of 44 or 48 pixels. And I've gotten frustrated with hitting small targets, especially on mobile devices so many times that I can recommend this. For example, the volume button on social media tends to be so small that it is very hard to hit.