Target Size (Minimum) WCAG 2.5.8: 24x24px Rules, Inline Exceptions, and CSS Fixes

Small, cramped touch targets are among the most common barriers for mobile users, people with motor tremors, and individuals operating devices in dynamic environments. In WCAG 2.2, the W3C introduced Success Criterion 2.5.8 Target Size (Minimum) at Level AA to ensure that all interactive pointer targets meet a minimum physical bounding box.

Overview of WCAG 2.5.8 Target Size (Minimum)

Unlike WCAG 2.1 SC 2.5.5 (which recommended 44x44px at Level AAA), SC 2.5.8 is a mandatory Level AA requirement. This means failure to meet the 24x24px standard creates direct legal exposure under ADA Title III and European Accessibility Act audits.

24x24px (Level AA) vs 44x44px (Level AAA) Standards

The Spacing Diameter Exception Explained

If a target is smaller than 24x24px (e.g. an 18x18px icon button), it can still pass if there is sufficient spacing around it such that a 24px diameter circle centered on the target does not intersect any adjacent target or spacing circle.

Inline Links & Native Control Exceptions

The following elements are exempt from the 24x24px requirement:

• Inline Links: Links contained within a sentence or paragraph of running text.
• Native User-Agent Controls: Unstyled standard checkboxes or radio buttons rendered by the browser.
• Essential Visuals: Situations where a particular presentation is essential (e.g. pins on a detailed geographic map).

Production CSS Techniques for Expanding Touch Targets

You can maintain sleek, compact visual designs while providing accessible 24px (or 44px) clickable hit areas using CSS pseudo-elements:

/* Expand clickable hit area without changing visual footprint */
.icon-btn-compact {
  position: relative;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
}

/* Invisible 44x44px touch target overlay */
.icon-btn-compact::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}