Target Size (Minimum)

Overview

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where spacing, equivalent, inline, user agent control, or essential exceptions apply.

Understanding

The W3C Web Accessibility Initiative (WAI) provides detailed guidance on understanding and implementing this criterion. The Understanding document covers the intent, benefits, and supporting techniques in depth.

Techniques

W3C provides documented techniques for meeting this criterion. Each technique links to the full specification with code examples and test procedures.

• C42
• AAA18

How to Test

1. 1

   Measure all interactive targets — verify each is at least 24×24 CSS pixels (including padding).

2. 2

   For targets smaller than 24px, verify the surrounding offset area (spacing to adjacent targets) brings the total to 24px.

3. 3

   Use browser DevTools computed styles to confirm padding is included in the hit area.

4. 4

   Exceptions: inline text links, targets with an equivalent 24px+ control, user-agent controls, and essential targets.

Failing & Passing Examples

/* Icon close button 16×16px with only 4px gap to adjacent button;
   total offset area < 24px — fails 2.5.8 */
.close-btn {
  width: 16px;
  height: 16px;
  margin: 2px; /* total spacing only 4px — insufficient */
}

/* Option A: size the target to at least 24×24px */
.close-btn {
  width: 24px;
  height: 24px;
}
/* Option B: keep small icon but add padding to reach 24px */
.close-btn {
  width: 16px;
  height: 16px;
  padding: 4px; /* 16 + 4 + 4 = 24px total */
}