2.5.8 Target Size (Minimum)

What this rule means

WCAG 2.5.8 establishes a minimum target size of 24 by 24 CSS pixels for all interactive elements. This is the Level AA requirement introduced in WCAG 2.2, providing a practical minimum that balances usability with design flexibility. The enhanced 44px target from criterion 2.5.5 remains the AAA recommendation.

The 24px minimum applies to the entire clickable/tappable area, including any padding that extends the hit region. If a target is smaller than 24px, it must have sufficient spacing from adjacent targets so that the 24px circle centered on the target does not overlap with any other target. This is known as the "undersized target with offset" exception.

Why it matters

The 24px minimum target size was chosen based on research showing this is the smallest reasonable target that users with motor impairments can reliably activate. While 44px is optimal, the 24px minimum acknowledges that some interface patterns require compact layouts. The spacing requirement ensures that even small targets can be activated without accidentally hitting a neighbor.

This criterion has the widest impact of any WCAG 2.2 addition because it applies to every interactive element on the page. Navigation links, toolbar buttons, form controls, pagination, tag lists, and inline actions all must meet the 24px threshold or use adequate spacing.

Related axe-core rules

• target-size — Ensures interactive elements meet the minimum 24x24 CSS pixel target size or have sufficient spacing from adjacent targets. This rule checks the bounding box of clickable elements and flags undersized targets that overlap with neighbors.

How to test

1. Run axe-core or axe DevTools — the target-size rule will flag elements smaller than 24x24 pixels that lack sufficient spacing.
2. Use browser DevTools to inspect the computed size (including padding) of interactive elements.
3. For targets smaller than 24px, verify that the spacing from adjacent targets provides at least a 24px non-overlapping zone.
4. Check compact UI patterns: toolbars, tag lists, breadcrumbs, pagination, and inline actions.
5. Test on touch devices to verify that small targets can be tapped reliably without mis-activation.

How to fix

Use CSS to ensure interactive elements meet the 24px minimum or provide adequate spacing.

Minimum target size with CSS

/* Base interactive element sizing */
button,
a,
input,
select,
textarea,
[role="button"],
[role="link"],
[role="tab"],
[role="checkbox"],
[role="radio"] {
  min-width: 24px;
  min-height: 24px;
}

Icon button meeting minimum size

<!-- Bad: 16px icon with no expanded target -->
<button class="icon-btn-small">
  <svg width="16" height="16" aria-hidden="true">...</svg>
  <span class="visually-hidden">Close</span>
</button>

<style>
/* Bad: target is only 16x16 */
.icon-btn-small {
  padding: 0;
  border: none;
  background: none;
}
</style>

<!-- Good: 16px icon with expanded clickable area -->
<button class="icon-btn">
  <svg width="16" height="16" aria-hidden="true">...</svg>
  <span class="visually-hidden">Close</span>
</button>

<style>
/* Good: padding expands target to 24x24 minimum */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
  border: none;
  background: none;
}
</style>

Spacing approach for compact layouts

/* When targets must be smaller than 24px,
   ensure adequate spacing between them */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Spacing between small tags */
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 12px;
}

/* Inline link spacing */
.inline-actions a {
  padding: 4px;
  margin: 0 4px;
  /* Ensures 24px target with 4px padding on 16px text */
}

Responsive target sizing

/* Progressive enhancement for target size */
.action-button {
  min-width: 24px;
  min-height: 24px;
  padding: 4px 8px;
}

/* Larger targets on touch devices */
@media (pointer: coarse) {
  .action-button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 16px;
  }
}

Common mistakes

• Small icon buttons (16px or 20px) with no padding to expand the clickable area.
• Dense navigation menus with links smaller than 24px and no spacing compensation.
• Tag or chip components with tiny close/remove buttons that are difficult to target.
• Breadcrumb links with insufficient height, especially on mobile viewports.
• Custom checkboxes or radio buttons styled smaller than 24px without expanding the clickable label area.
• Relying on the visible element size without accounting for padding that contributes to the clickable area.