Touch Targets

title: "Touch Targets — SC 2.5.5 and 2.5.8" weight: 12 description: "Learn WCAG touch target requirements: SC 2.5.5 Target Size recommends 44x44px minimum, and SC 2.5.8 Target Size Enhanced requires 24x24px with spacing for accessible touch interaction." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

WCAG touch target requirements ensure interactive elements are large enough to tap accurately: SC 2.5.5 Target Size recommends 44 by 44 CSS pixels minimum for pointers, and SC 2.5.8 Target Size Enhanced requires 24 by 24 with adequate spacing.

## What You'll Learn

You will understand touch target requirements, measure target sizes, ensure adequate spacing between targets, and design mobile interfaces that are easy to tap.

## Why It Matters

Small touch targets cause frustration and errors, especially for users with motor disabilities, users with large fingers, or users in motion. A target that is too small may be impossible to activate accurately.

## Real-World Use

A mobile site has close buttons that are 20x20px. Users repeatedly tap the wrong adjacent element. After increasing the target to 48x48px and adding 8px spacing, error rates drop by 60 percent.

## Touch Target Sizing

```mermaid
flowchart TD
  A[Interactive Element] --> B{Size >= 44px?}
  B -->|Yes| C{Spacing adequate?}
  B -->|No| D[Resize or add spacing]
  C -->|Yes| E[Passes SC 2.5.5]
  C -->|No| F[Add spacing]
  D --> G[Recheck]
  F --> G

Implementing Touch Targets

Ensure all interactive elements have adequate size and spacing.

<!-- Good: 48px touch target -->
<button class="mobile-btn" style="min-width:48px; min-height:48px;">
  Confirm
</button>

<!-- Bad: 24px touch target -->
<button class="mobile-btn" style="min-width:24px; min-height:24px;">
  X
</button>

<!-- Good: small icon with padding for touch -->
<button aria-label="Close" style="padding: 12px;">
  <svg width="24" height="24"><path d="..."/></svg>
</button>

/* Touch target sizing */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}

/* Spacing between targets */
.button-group {
  display: flex;
  gap: 16px; /* Minimum spacing */
}

.nav-links a {
  display: inline-block;
  padding: 8px 12px;
}

/* Inline links need special treatment */
.text-link {
  display: inline-block;
  padding: 8px 0;
  line-height: 1.8; /* Increases tap area */
}

// Touch target audit function
function auditTouchTargets() {
  const targets = document.querySelectorAll(
    'button, a, input, select, textarea, [role="button"], [tabindex]'
  );

  const issues = [];

  targets.forEach(el => {
    const rect = el.getBoundingClientRect();
    const style = window.getComputedStyle(el);

    if (rect.width < 44 || rect.height < 44) {
      // Check if padding makes it accessible
      const padding = parseFloat(style.paddingTop) * 2;
      const effectiveHeight = rect.height + padding;

      if (effectiveHeight < 44) {
        issues.push({
          element: el.tagName,
          text: el.textContent.trim().slice(0, 20),
          size: `${Math.round(rect.width)}x${Math.round(rect.height)}`,
          issue: 'Touch target too small'
        });
      }
    }
  });

  return issues;
}

Common Mistakes

• Making touch targets smaller than 44x44px
• Placing targets too close together without spacing
• Using padding instead of min-width/min-height
• Ignoring inline links that are hard to tap on mobile
• Making icon buttons with no padding
• Not considering finger size differences
• Assuming desktop click targets work on mobile

Practice and Challenge

Practice 1: Measure touch targets on your mobile site. Practice 2: Find a target smaller than 44px and identify the fix. Practice 3: Check spacing between adjacent targets. Practice 4: Test icon buttons for touch accessibility. Practice 5: Verify inline links have adequate tap area.

Challenge: Create a touch target audit tool that scans a mobile page, measures all interactive elements, checks sizes against the 44x44px recommendation, checks spacing between adjacent targets, and generates a report with failed elements and fix suggestions.

FAQ

Mini Project

Create a mobile touch target testing page with 10 different interactive elements (buttons, links, icon buttons, form inputs, tabs). Test each on a real mobile device and document which pass and fail the 44x44px recommendation. Propose fixes for failing elements.

What's Next

Gesture Accessibility covers making gestures accessible on mobile.