A visible icon may have a very small clickable area, while a small symbol can sit inside a generous control. Measure the actual interactive element rather than its graphic.

WCAG 2.2’s Level AA minimum-target criterion describes 24 × 24 CSS pixels with explicit exceptions and spacing conditions. Larger areas can still be useful. Our 48 × 48 design target is not a claim that this is the universal AA minimum.

Allocate space to the control

An illustrative larger link target could use:

.action-link {
  display: inline-flex;
  min-inline-size: 3rem;
  min-block-size: 3rem;
  align-items: center;
}

At a 16-pixel root size, three rem equals 48 pixels. Still inspect actual layouts and enlarged text. Padding on a non-clickable outer container does not enlarge the link’s own target.

Test neighbouring actions on a narrow screen for intersections and overlays. Another element’s transparent area can intercept clicks even while the intended text remains visible.

Then inspect keyboard focus and wrapping. Larger targets must not obscure content or hide functionality. Record the specific elements, dimensions and applicable exceptions. Compare all neighbouring actions in that control group.

Sources