Overview

Touch target sizing is one of the most common accessibility failures on mobile — and one of the easiest to fix. WCAG 2.2 introduced Success Criterion 2.5.8 Target Size (Minimum) at the AA level, requiring interactive targets to be at least 24x24 CSS pixels, or to have sufficient spacing so the target plus its surrounding unoccupied space reaches that threshold. Apple’s Human Interface Guidelines and Google’s Material Design both recommend a minimum of 44x44px for comfortable touch targets. Default browser checkboxes and radio buttons are only 13-16px, making them too small for many users with motor impairments, tremors, or limited dexterity.

WCAG Criteria:

• 2.5.8 Target Size (Minimum)  — interactive targets must be at least 24x24 CSS pixels, or have sufficient spacing to reach an equivalent area (Level AA, WCAG 2.2)
• 2.5.5 Target Size (Enhanced)  — interactive targets should be at least 44x44 CSS pixels (Level AAA)

Key requirements:

• All interactive elements must be at least 24x24 CSS pixels (AA) or 44x44 CSS pixels (AAA)
• If the target itself is smaller than 24px, its surrounding unoccupied spacing must compensate
• Apple and Google both recommend 44x44px minimum for mobile touch targets
• Default browser checkboxes and radio buttons (13-16px) fail the minimum requirement
• Inline links within text are exempt from 2.5.8, but standalone icon buttons are not

Touch Target Sizing

<!-- Tiny 16x16px buttons packed together — fails WCAG 2.5.8 -->
<div style="display: flex; gap: 2px;">
  <button
    style="width: 16px; height: 16px; padding: 0;"
    aria-label="Close item 1"
  >
    &times;
  </button>
  <button
    style="width: 16px; height: 16px; padding: 0;"
    aria-label="Close item 2"
  >
    &times;
  </button>
  <button
    style="width: 16px; height: 16px; padding: 0;"
    aria-label="Close item 3"
  >
    &times;
  </button>
</div>

<!-- 44x44px buttons with adequate spacing — meets WCAG 2.5.5 (AAA) -->
<div style="display: flex; gap: 8px;">
  <button
    style="
      min-width: 44px;
      min-height: 44px;
      padding: 12px;
    "
    aria-label="Close item 1"
  >
    &times;
  </button>
  <button
    style="
      min-width: 44px;
      min-height: 44px;
      padding: 12px;
    "
    aria-label="Close item 2"
  >
    &times;
  </button>
  <button
    style="
      min-width: 44px;
      min-height: 44px;
      padding: 12px;
    "
    aria-label="Close item 3"
  >
    &times;
  </button>
</div>

What’s wrong with the tiny packed buttons?

• Each button is only 16x16px — well below the 24px AA minimum and the 44px AAA recommendation
• The 2px gap means there is almost no unoccupied space between targets, so mis-taps are extremely likely
• Users with motor impairments, tremors, or limited dexterity will struggle to hit the correct button
• On mobile devices, a fingertip covers roughly 40-50px, making 16px targets nearly impossible to tap accurately

What the properly sized buttons provide:

• min-width: 44px; min-height: 44px meets the AAA (enhanced) target size recommendation
• padding: 12px ensures the tap area extends well beyond the visible icon
• 8px gap between buttons adds additional spacing to prevent accidental activation of adjacent targets
• Comfortable for users on touch devices, with motor impairments, and for all pointer types

What the screen reader announces:

Common target sizing failures:

• Default checkboxes and radio buttons (13-16px) without enlarged click/tap areas
• Icon-only toolbar buttons without padding
• Close/dismiss buttons on toasts, modals, and banners
• Pagination links and breadcrumb items on mobile layouts
• Social media icon rows in footers

Resources

• WCAG 2.5.8 — Target Size (Minimum) 
• WCAG 2.5.5 — Target Size (Enhanced) 
• Adrian Roselli — Target Size and 2.5.5 
• Apple Human Interface Guidelines — Layout 
• Material Design — Touch Targets 
• MDN — Touch Target Sizes