ARIA APG Guide

Operable / 2.5 Input Modalities

2.5.8Target Size (Minimum)

Level AANew in 2.2

Ensure interactive targets are at least 24 by 24 CSS pixels or have sufficient spacing. Avoid targets that are too small to activate reliably.

New success criterion added in WCAG 2.2

This criterion was introduced in WCAG 2.2 and was not part of WCAG 2.1. Refer to the links below for detailed guidance.

Why does target size matter?

On smartphones and tablets, users tap buttons with their fingers, so small buttons lead to accidental taps on adjacent elements. This is especially serious for people with hand tremors, motor impairments, or large fingers. Even with a mouse, accurately clicking tiny icon buttons (delete, edit, etc.) around 16px is difficult.

This criterion, introduced in WCAG 2.2, requires pointer-operable targets to be at least 24×24 CSS pixels. Even if a target is smaller than 24px, the criterion can still be met if there is sufficient spacing between adjacent targets (the 24px-diameter circles centered on each target don't overlap).

Note

24px is only the minimum requirement (Level AA). Both iOS HIG and Material Design recommend 44×44px or larger, which is preferable from a user experience standpoint. The average finger contact area is 11–25mm in diameter, so 24px can still be too small in some cases.

Failing Example (Small and Crowded)

Try pressing the buttons below. The tiny 16px buttons are packed with only 2px of spacing. Accurately distinguishing between Share, Edit, and Delete is very difficult.

Tiny, crowded icon buttons (Fail)

Each button: 16×16px / Spacing: 2px

Buttons are small and tightly packed, making it easy to hit the wrong one (each 16×16px, 2px spacing).

Passing Example (24px+ with Sufficient Spacing)

The same buttons are now 44×44px (nearly double the 24px minimum) with 8px spacing. Notice the difference in ease of use.

Tap-friendly icon buttons (Pass)

Each button: 44×44px (minimum: 24px) / Spacing: 8px

Each button is 44×44px with 8px spacing. Easy to tap accurately.

Tip

Icon-only buttons must always have an aria-label. Screen readers cannot announce the visual shape of an icon, soaria-label="Share" is needed to convey the purpose in text (WCAG 1.1.1 Text Alternatives).

How to Fix (Code)

Good / Recommended

Use min-width / min-height to ensure at least 24px (recommended 44px), and add gap between buttons.

/* ✅ Recommended: tap-friendly 44×44px (minimum requirement is 24×24px) */
.icon-btn-group {
  display: flex;
  gap: 8px;          /* Ensure adjacent offset areas don't overlap */
  flex-wrap: wrap;
  align-items: center;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;   /* Minimum requirement is 24px. Recommended is 44px (iOS HIG / Material Design) */
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
}

/* Don't remove focus rings */
.icon-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

Bad / Avoid

Common violation patterns:

  • Size below 24px — Placing icon fonts or SVGs with padding: 0 quickly leads to violations. Explicitly set min-width / min-height.
  • Zero spacing, tightly packed — With gap: 0 or margin: 0, adjacent offset areas overlap, and the spacing exception cannot be used.
  • Looks large visually but the click area is small — Increasing font-size or background doesn't expand the hit area without setting padding or min-height. Measure the hit area in DevTools.
/* ❌ Violation: 16px is below the 24px minimum requirement */
.icon-btn-group-bad {
  display: flex;
  gap: 2px;          /* Almost no gap → spacing exception is not met either */
}

.icon-btn-tiny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;       /* Below 24px → WCAG 2.5.8 violation */
  height: 16px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
}

Exceptions and Spacing Considerations

The following cases are exempt from 2.5.8:

  • Inline text links — Links embedded within paragraph text, such as "see here," are exempt. The line height serves as a natural target area.
  • Default browser/OS UI as-is — Native UI elements like <select> or <input type="file">that the author has not customized.
  • Essential cases — Where the size is inherently meaningful (e.g., a 1px pin indicating a landmark on a map).
  • Equivalent alternative on the same page — If a larger alternative with the same functionality exists elsewhere on the same page.

Note

Spacing calculation example:If the 24px-diameter offset circle centered on each target doesn't overlap with adjacent targets' circles, it passes. For example, two 16×16px buttons side by side need a center-to-center distance of at least 24px. Button width 16px ÷ 2 (8px per side) × 2 + gap ≥ 24px → gap ≥ 8px meets the condition.

Checklist

  • All pointer-operable elements (buttons, links, custom UI) are 24×24px or larger, or meet the spacing condition
  • Elements prone to being small (icon buttons, etc.) have min-width / min-height: 24px (recommended 44px)
  • The gap or margin of button groups ensures adjacent offset areas don't overlap
  • Exceptions (inline links, native OS UI, essential cases) are not applied to other elements
  • Icon-only buttons have aria-label (or equivalent alternative text)
  • Focus rings are not removed (outline: none not used)
  • Icon-to-background contrast ratio is 3:1 or higher (WCAG 1.4.11 Non-text Contrast)
  • Click/tap areas have been measured in DevTools or on a real device

APG Patterns Related to This Criterion

Correctly implementing these patterns helps meet this success criterion. See each page for implementation details, live demos, and Good / Bad examples.

Normative References