DEV Community

FrozonFreak
FrozonFreak

Posted on Originally published at thewebhig.hashnode.dev

Make targets big enough to hit (Web HIG tip #12)

#css #webdev #a11y

Open your site on a phone and try to tap the "×" that closes a banner, the edit icon in a table row, or the second of three pagination numbers. If you hit the wrong one, or have to zoom in first, the target is too small. People with tremors, limited dexterity, or a phone in one hand on a moving bus miss it much more often.

Web HIG tip #12 (Quick #75 / HIG-A11Y-007): Interactive targets MUST be at least 24×24 CSS px. Primary touch actions SHOULD use 44×44 CSS px.

Why it matters

A target is the area that responds to a click or tap, not the icon you can see:

  • A 16px icon with no padding gives the finger a 16px target, even if the design looks roomy around it
  • Small targets packed side by side turn a miss into a wrong action: delete instead of edit, next page instead of previous
  • Icon-only toolbars, close buttons, table row actions, and pagination links are the usual offenders
  • Pointer users with tremors or limited dexterity are affected too, not only touch users

The full HIG covers this in §5.4, Target Sizes, and it separates two levels on purpose. 24×24 CSS px is the MUST (HIG-A11Y-007, severity error), aligned with WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum), Level AA. The WCAG-defined exceptions apply, and the HIG does not redefine them. 44×44 CSS px is a SHOULD, an ergonomic recommendation for primary touch actions. It is not a WCAG AA floor and is not part of HIG-A11Y-007 enforcement, so a 32px secondary button is not a defect. Quick #20 is the companion rule: targets must not overlap in ways that cause mis-taps.

The rule of thumb

Ask: if I tap the middle of the gap between two controls, do I know which one I'll get?

Grow the hit area, not the icon. Padding is usually all it takes.

<button class="icon-button" type="button" aria-label="Close">
  <svg aria-hidden="true" width="16" height="16">…</svg>
</button>
Enter fullscreen mode Exit fullscreen mode 
/* 16px icon, 24px minimum target, 44px on coarse pointers */
.icon-button {
  display: inline-grid;
  place-items: center;
  min-inline-size: 24px;
  min-block-size: 24px;
}

@media (pointer: coarse) {
  .icon-button {
    min-inline-size: 44px;
    min-block-size: 44px;
  }
}
Enter fullscreen mode Exit fullscreen mode

The visible icon stays the same size. The button around it grows, and that is the part that receives the tap.

Do this instead

  • Measure the clickable box, not the glyph. In DevTools, inspect the <button> or <a>, not the <svg> inside it
  • Use padding or min-inline-size / min-block-size to reach 24×24, and aim for 44×44 on primary touch actions such as submit, add to cart, and the main navigation toggle
  • If a control has to stay visually small, keep enough space around it. WCAG's spacing exception covers an undersized target only when a 24px circle centred on it doesn't intersect another target or another such circle
  • Links inside a sentence are covered by WCAG's inline exception. Footer link lists, tag chips, and breadcrumb rows are not sentences, so give them room
  • Put the size on the component (your IconButton, Chip, Pagination) so every use inherits it, and use your spacing tokens rather than one-off pixel values (Quick #63)

Quick check for your app

Open a page on example.com in your browser's device mode, or on a real phone. Inspect each icon button, close control, chip, and pagination link, and read the box size of the element that has the click handler. Anything under 24×24 needs more size or more space around it. Then try the primary actions with your thumb, one-handed: those are the ones that should reach 44×44. A tool can measure boxes, but only trying it tells you whether the controls are easy to hit.

The Web HIG is an open set of guidelines for how the web should behave, not a component library. Design systems define how it looks. The Web HIG defines how it behaves.

Top comments (0)