2.5.8 Target Size (Minimum)

Level: AA | Principle: Operable | Since: WCAG 2.2 | Automation: Manual

What This Means

Interactive targets (links, buttons, form controls) must be at least 24x24 CSS pixels in size, or have sufficient spacing from adjacent targets so that the combined target-plus-spacing reaches 24 CSS pixels in both dimensions. This minimum ensures users can activate controls without accidentally hitting the wrong one.

Who This Affects

Motor impairment users — limited fine motor control means small targets are easily missed
Tremor users — shaking makes precise tapping on small targets extremely difficult
Touch screen users — finger tips are imprecise compared to mouse pointers
Elderly users — reduced dexterity and vision make small targets problematic

Common Pitfalls

1. Tiny icon buttons

<!-- Bad: 16x16 icon button with no padding -->
<button style="width: 16px; height: 16px; padding: 0;">
  <img src="close.svg" alt="Close" />
</button>

<!-- Good: minimum 24x24 target -->
<button style="min-width: 24px; min-height: 24px; padding: 4px;">
  <img src="close.svg" alt="Close" />
</button>

2. Inline links packed tightly together

<!-- Bad: small links with no spacing -->
<p>
  <a href="/terms">Terms</a> | <a href="/privacy">Privacy</a> | <a href="/cookies">Cookies</a>
</p>

3. Dense table rows with action buttons

Tiny edit/delete icons in each row of a data table with minimal padding.

4. Social media icon links

Small social icons (16x16 or 20x20) in the footer with no padding.

How to Fix

Ensure minimum 24x24 CSS pixel target area

/* Apply to all interactive elements */
button,
a,
input,
select,
[role="button"],
[role="link"] {
  min-width: 24px;
  min-height: 24px;
}

Use padding to increase target size without changing visual size

/* Icon appears 16x16 but target area is 24x24+ */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 4px;
}

.icon-button svg {
  width: 16px;
  height: 16px;
}

Add spacing between adjacent targets

If individual targets are smaller than 24x24, the combined target-plus-spacing must reach 24px:

/* Inline links with enough spacing */
.footer-links a {
  display: inline-block;
  padding: 4px 8px;
  /* Even if the text makes it < 24px tall, padding compensates */
  min-height: 24px;
  line-height: 24px;
}

Exceptions

The 24x24 minimum does not apply when:

| Exception | Example | |-----------|---------| | Spacing | Target is smaller but has enough spacing from other targets to reach 24px | | Inline | Target is in a sentence or list item where size is determined by line height (e.g., a text link within a paragraph) | | User agent | Default browser control that hasn't been styled (e.g., default checkbox) | | Essential | Specific size is legally or functionally required | | Equivalent | Another control on the page provides the same function and meets the target size |

How to Test

Open DevTools (F12), select interactive elements (buttons, links, form controls), and check their computed dimensions in the Box Model panel.
Verify each interactive element is at least 24x24 CSS pixels, or has enough spacing from adjacent targets so the combined target-plus-spacing reaches 24px.
Pay special attention to dense areas: footer links, toolbar buttons, data table action icons, and social media icons.
Test on a touch device by tapping interactive elements to confirm you can reliably hit the correct target.
Pass: All interactive targets are at least 24x24 CSS pixels, or have sufficient spacing from adjacent targets to meet the 24px threshold.
Fail: Any interactive target is smaller than 24x24 CSS pixels without sufficient spacing, making it difficult to activate accurately.

axe-core Rules

| Rule | What It Checks | |------|---------------| | — | No automated axe-core rule reliably checks the 24x24 minimum. Target size requires manual measurement. |