Level AAA Operable WCAG 2.5.5

What This Criterion Requires

WCAG 2.5.5 requires that the size of the target for pointer inputs is at least 44 by 44 CSS pixels, with certain exceptions. This enhanced criterion goes beyond the Level AA requirement (2.5.8 Target Size Minimum, which requires 24x24 pixels) to ensure that interactive elements are comfortably operable for all users. Small touch targets are one of the most common usability and accessibility barriers on the modern web and in mobile applications. People with motor impairments such as tremors, limited dexterity from arthritis or Parkinson's disease, and those who use mouth sticks or head pointers require generously sized targets to avoid accidental activation of adjacent elements. Older adults, whose fine motor control naturally declines with age, also benefit significantly. Even users without disabilities experience frustration with small targets on mobile devices, especially in challenging environments like moving vehicles or while walking. The 44x44 pixel minimum applies to all pointer-activated controls including links, buttons, form inputs, checkboxes, radio buttons, toggle switches, and interactive icons. Exceptions exist for inline links within text, targets whose size is determined by the user agent and not modified by the author, and cases where an equivalent control meeting the size requirement is available on the same page.

Why It Matters

Target size is a critical accessibility concern that affects a broad and growing population. The World Health Organization estimates that over 1 billion people experience some form of disability, and motor impairments are among the most common. Conditions such as arthritis affect over 350 million people worldwide, and Parkinson's disease affects over 10 million. For these users, tapping a 20-pixel-wide link on a phone screen can be impossible. Research by the MIT Touch Lab found that the average adult finger pad is approximately 10 to 14 millimeters wide, which translates to roughly 40 to 56 CSS pixels on most devices. Targets smaller than this lead to frequent errors, mis-taps, and user frustration. The consequences go beyond inconvenience: in healthcare applications, a mis-tap could mean selecting the wrong medication dosage; in financial applications, it could mean confirming an unintended transaction. Mobile usage now accounts for over 60% of global web traffic, making target size more important than ever. Apple's Human Interface Guidelines recommend a minimum 44x44 point target, and Google's Material Design guidelines recommend 48x48 density-independent pixels, both aligning with or exceeding this WCAG criterion. Meeting this criterion improves usability for every user, not just those with disabilities.

Common Failures and How to Fix Them

Tiny icon buttons without sufficient click area

Social media sharing icons, close buttons on modals, and navigation hamburger menus are rendered at 16x16 or 24x24 pixels without any additional padding or clickable area, making them extremely difficult to tap on mobile devices.

Inaccessible
<button class="close-btn" style="width: 16px; height: 16px; padding: 0;">
  <svg width="16" height="16" viewBox="0 0 16 16">
    <path d="M4 4l8 8m0-8l-8 8" stroke="currentColor"/>
  </svg>
</button>
Accessible
<button class="close-btn" style="min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;">
  <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
    <path d="M4 4l8 8m0-8l-8 8" stroke="currentColor"/>
  </svg>
  <span class="visually-hidden">Close</span>
</button>

Densely packed navigation links with no spacing

Footer navigation or sidebar menus display links in a tightly packed list with line height and padding that result in each link's clickable area being well under 44 pixels tall. Users with motor impairments frequently tap the wrong link.

Inaccessible
<nav>
  <ul style="list-style: none; padding: 0;">
    <li><a href="/about" style="font-size: 12px; line-height: 1.2;">About</a></li>
    <li><a href="/contact" style="font-size: 12px; line-height: 1.2;">Contact</a></li>
    <li><a href="/faq" style="font-size: 12px; line-height: 1.2;">FAQ</a></li>
  </ul>
</nav>
Accessible
<nav>
  <ul style="list-style: none; padding: 0;">
    <li><a href="/about" style="display: block; min-height: 44px; padding: 12px 8px; font-size: 14px;">About</a></li>
    <li><a href="/contact" style="display: block; min-height: 44px; padding: 12px 8px; font-size: 14px;">Contact</a></li>
    <li><a href="/faq" style="display: block; min-height: 44px; padding: 12px 8px; font-size: 14px;">FAQ</a></li>
  </ul>
</nav>

Small checkbox and radio button controls

Native checkboxes and radio buttons render at the browser default size (typically 13x13 pixels) without enlarged labels or click areas. Users with tremors or low dexterity cannot reliably select these controls.

Inaccessible
<div>
  <input type="checkbox" id="terms">
  <label for="terms" style="font-size: 11px;">I agree to the terms</label>
</div>
Accessible
<div>
  <input type="checkbox" id="terms" style="width: 24px; height: 24px;">
  <label for="terms" style="display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; font-size: 16px; cursor: pointer;">I agree to the terms</label>
</div>

How to Test

  1. Use browser developer tools to inspect the computed size (width and height) of interactive elements. Ensure each target is at least 44x44 CSS pixels.
  2. On mobile devices, attempt to tap each interactive element with the pad of your finger, not the tip. Note any elements that require precise targeting or that trigger adjacent elements.
  3. Use the axe DevTools browser extension or Lighthouse, which can flag some target size issues automatically.
  4. Check custom controls like toggle switches, star ratings, sliders, and icon buttons, as these most commonly fail target size requirements.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria