Touch Targets: Making Interactive Elements Easy to Activate

Introduction

Touch targets are the interactive areas users can tap, click, or touch to activate controls like buttons, links, and form inputs. WCAG 2.5.5 (Target Size Enhanced) and 2.5.8 (Target Size Minimum) establish minimum size requirements to ensure users can accurately activate controls without accidentally triggering adjacent elements.

For users with motor impairments, tremors, or limited fine motor control, small touch targets create significant barriers. Even users without disabilities benefit from larger targets—especially on mobile devices, in bright sunlight, or while multitasking.

What Are Touch Targets?

The Basic Concept

A touch target is the clickable/tappable area of an interactive element:

<!-- The button's touch target is its visible area plus padding -->
<button class="action-btn">
  Submit Form
</button>

<style>
.action-btn {
  /* Visual size */
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}
</style>

The touch target includes:

• The visible element (button, link, icon)
• Any padding that expands the clickable area
• The total area that responds to pointer events

Who Benefits

User Type	Challenge	Solution
Motor impairments	Difficulty with precise movements	Larger targets reduce precision needed
Tremors (Parkinson’s)	Involuntary hand movements	More space prevents mis-taps
Arthritis	Limited finger dexterity	Bigger areas easier to hit
Low vision	Difficulty seeing small controls	Larger targets easier to locate
Elderly users	Reduced motor control	Generous sizing improves accuracy
Mobile users	Touch input challenges	Adequate targets for finger tapping

WCAG Requirements

2.5.8 Target Size (Minimum) - Level AA

New in WCAG 2.2, this criterion requires:

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:

• Spacing: Undersized targets have enough spacing so a 24×24 circle could be placed on each target without overlap
• Equivalent: Another target for the same function is 24×24 or larger
• Inline: The target is in a sentence or block of text
• User Agent Control: The target size is determined by the browser
• Essential: The specific presentation is legally required or essential

2.5.5 Target Size (Enhanced) - Level AAA

For enhanced accessibility:

The size of the target for pointer inputs is at least 44 by 44 CSS pixels, except for the same exceptions as 2.5.8.

Why These Sizes?

Size	Level	Rationale
24×24 px	AA	Minimum for basic accessibility
44×44 px	AAA	Based on Apple/iOS recommendations
48×48 dp	Google	Material Design recommendation

Common Touch Target Problems

1. Targets Too Small

<!-- BAD: Icon button with no padding -->
<button class="icon-btn">
  <svg width="16" height="16"><!-- icon --></svg>
</button>

<style>
.icon-btn {
  padding: 0;
  /* Total size: 16×16 - too small! */
}
</style>

2. Targets Too Close Together

<!-- BAD: Buttons without adequate spacing -->
<div class="button-group">
  <button>Save</button>
  <button>Cancel</button>
  <button>Delete</button>
</div>

<style>
.button-group button {
  margin: 2px; /* Not enough spacing! */
}
</style>

3. Clickable Area Smaller Than Visual

<!-- BAD: Large visual but small clickable area -->
<div class="card" onclick="handleClick()">
  <img src="thumbnail.jpg" alt="Product">
  <a href="/product" class="tiny-link">View Details</a>
</div>

<style>
.tiny-link {
  font-size: 10px;
  /* Link is tiny despite large card */
}
</style>

4. Hidden Touch Areas

/* BAD: Padding doesn't count if overflow is hidden */
.container {
  overflow: hidden;
}

.container button {
  padding: 20px;
  margin: -10px; /* Padding cut off! */
}

Proper Touch Target Sizing

Minimum Sizing (Level AA)

/* Meets 24×24 minimum requirement */
.interactive-element {
  min-width: 24px;
  min-height: 24px;
}

/* Better: Add padding to small elements */
.icon-button {
  padding: 8px;
  /* If icon is 16×16, total becomes 32×32 */
}

Enhanced Sizing (Level AAA)

/* Meets 44×44 enhanced requirement */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Using Spacing Exception

/* Small targets with adequate spacing */
.nav-link {
  padding: 4px 8px;
  margin: 12px; /* Creates 24px gap between targets */
}

Measuring Touch Targets

What Counts as Target Size

1. Clickable area - The area that responds to clicks/taps
2. Visual bounds - What users see and aim for
3. Hit testing area - Browser’s pointer detection zone

CSS Pixels vs Physical Pixels

Touch target requirements use CSS pixels, not device pixels:

/* 44 CSS pixels = 44px in your stylesheet */
/* On 2x Retina display = 88 physical pixels */
/* On 3x display = 132 physical pixels */

.button {
  min-width: 44px;  /* CSS pixels */
  min-height: 44px; /* CSS pixels */
}

Testing Touch Targets

Quick Manual Test

1. Use browser DevTools to measure element dimensions
2. Check computed styles for width/height
3. Verify clickable area matches visual area
4. Test spacing between adjacent targets

What to Verify

• [ ] All interactive elements are at least 24×24 CSS pixels
• [ ] Touch targets have adequate spacing (no overlapping hit areas)
• [ ] Icon buttons have sufficient padding
• [ ] Link text has adequate clickable area
• [ ] Form inputs meet size requirements

Tools for Testing

• Browser DevTools - Measure element dimensions
• axe DevTools - Reports target size issues
• WAVE - Visual highlight of small targets
• Mobile device testing - Real-world touch testing

Design Recommendations

Beyond Minimum Requirements

Context	Recommended Size
Primary actions	48×48 px or larger
Navigation items	44×44 px minimum
Form inputs	44×44 px touch area
Secondary actions	36×36 px minimum
Dense interfaces	24×24 px with spacing

Spacing Guidelines

/* Ensure 24px minimum spacing */
.button-group {
  gap: 24px;
}

/* Or use margin */
.action-button {
  margin: 12px; /* 12px × 2 = 24px between buttons */
}

Best Practices Summary

Do	Don’t
Use min-width/min-height for sizing	Rely only on content to size targets
Add padding to small icons	Use tiny clickable areas
Provide spacing between targets	Cluster interactive elements
Test on actual touch devices	Only test with mouse
Consider all input methods	Design only for desktop

Related Articles

• Touch Targets Implementation Guide - Detailed patterns
• Form Accessibility Guide - Form input sizing
• WCAG Compliance Hub - All accessibility evaluators

---

References

1. W3C - WCAG 2.2 SC 2.5.5 Target Size (Enhanced)
2. W3C - WCAG 2.2 SC 2.5.8 Target Size (Minimum)
3. Apple - Human Interface Guidelines: Accessibility
4. Google - Material Design: Accessibility Basics