WCAG 2.5.5 Target Size Enhanced — Accessibility Guide

What this rule means

WCAG 2.5.5 requires that all interactive targets (buttons, links, form controls, custom interactive elements) have a minimum size of 44 by 44 CSS pixels. This is the enhanced (AAA) requirement — a stricter version of the minimum target size requirement introduced in WCAG 2.2 at Level AA (2.5.8).

Exceptions exist for equivalent controls (where a larger alternative is provided), inline links within text, targets whose size is determined by the user agent (like native checkboxes), and targets where the specific size is essential to the information being conveyed.

Why it matters

Small touch targets are one of the most common usability barriers on mobile devices. Users with motor impairments, tremors, or limited fine motor control struggle to accurately tap small targets. Older adults experience reduced precision as a natural part of aging. Even users without disabilities frequently mis-tap small targets when using a phone with one hand or in motion.

Research from the MIT Touch Lab found that the average adult fingertip pad is approximately 10mm wide, which corresponds to roughly 44 CSS pixels at standard density. Targets smaller than this threshold significantly increase error rates for all users.

Related axe-core rules

There are no automated axe-core rules specifically for the 44px enhanced target size. The target-size rule in axe-core checks against the 24px minimum from WCAG 2.5.8 (Level AA). For the 44px threshold, manual measurement or custom tooling is required.

How to test

Use browser DevTools to inspect the computed size of interactive elements.
Measure both width and height — both must be at least 44 CSS pixels.
Check padding and clickable area, not just the visible content size.
Test on actual touch devices, not just desktop browsers with touch emulation.
Pay special attention to icon buttons, close buttons, pagination links, and form controls in dense layouts.

How to fix

Use CSS min-width and min-height to ensure interactive targets meet the 44px minimum.

Button sizing — CSS approach

/* Ensure all buttons meet 44px minimum */
button,
[role="button"],
a.btn {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 16px;
}

/* Icon buttons need explicit sizing */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

Expanding clickable area with padding

/* Small visual target with expanded touch area */
.close-button {
  /* Visual size: 16x16 icon */
  width: 16px;
  height: 16px;
  /* Expanded touch area with padding */
  padding: 14px;
  /* Total clickable area: 44x44 */
  box-sizing: content-box;
  cursor: pointer;
}

/* Or use negative margin to maintain layout */
.compact-close {
  min-width: 44px;
  min-height: 44px;
  margin: -14px;
  padding: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Navigation link spacing

<nav aria-label="Pagination">
  <ul class="pagination">
    <li><a href="/page/1" class="page-link">1</a></li>
    <li><a href="/page/2" class="page-link">2</a></li>
    <li><a href="/page/3" class="page-link">3</a></li>
  </ul>
</nav>

<style>
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}
</style>

Common mistakes

Icon buttons (close, menu, settings) that are only 24px or 32px in size with no expanded touch area.
Pagination links that are too small and too close together, causing mis-taps.
Form checkboxes and radio buttons relying on the browser default size without enlarging the clickable area.
Using only the icon size for the clickable area instead of adding padding to expand the touch target.
Dense toolbars with small closely-spaced buttons that are difficult to target accurately.

2.5.5 Target Size (Enhanced)