Interactive elements should not be difficult to select or activate when using a mouse or a touchscreen.
Generous sizing and spacing is important, and their implied visual “hit area” should correspond to the control’s active area.
Examples
In these examples, page navigation is provided through “prev” and “next” links. The two controls are separated by 0.5em, ensuring that it’s not easy to accidentally activate the wrong control when the user is interacting by touch or user’s mouse hand is shaky.
Here's how they look:
✓ Good example
For the “prev” control, display: block and padding is applied to the <a> element. As you can see by focusing this control, the entire visual box is clickable: Everything that looks interactive is interactive.
✗ Bad example
The “next” control has been styled differently. The non-interactive <li> element provides the blue background and the padding. By focusing the link inside it, you can see that the focus outline fits tightly around the link text—a much reduced and deceptively small hit area compared to the “prev” example. Targeting this control could prove difficult.
Code editor
You can compare the different hit areas in this code editor and use it as a starting point for your own solutions to the problem.
See the Pen compare hit areas by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.