✎ Technique: Hit areas

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.


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:

Two large button shaped links sitting next to one another with a white space between them

✓ 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.

The blue button shape on the left displays a black outline around its outer perimeter

✗ 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.

The second control shows a black outline just around the text, not the whole box

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.