Touch target size and spacing rules

Touch targets must meet a 24px minimum or provide a 24px clear circle without overlapping other targets

Intro:

Interactive controls must be large enough to activate reliably on touch devices. Each target needs to be at least 24 by 24 CSS pixels, or it must fit a 24px-diameter circle centered on it that does not intersect any other target. This affects buttons, links, icons, and controls on mobile and small screens, especially for users with limited dexterity or tremors.

Why It Matters

Small or crowded targets cause accidental taps and force repeated attempts. Users with motor impairments or low vision are most impacted, but everyone benefits from reliable hit areas. Adequate size and spacing reduce errors, speed up tasks, and improve usability under stress (one-handed use, movement, glare).

Common Causes

• Icon-only buttons sized to the icon (e.g., 12–16px) without added hit area
• Tight layouts that pack controls with little or no gap
• Negative margins or overlapping elements shrinking the unobscured clickable region
• Click handlers on tiny inline elements instead of a larger container
• Absolute-positioned overlays (tooltips, badges) covering part of a target

How to Fix

1. Set a minimum hit area:
   • Ensure each control is at least 24x24 CSS pixels. Use padding to enlarge the clickable region without enlarging the visual icon.
   • Recommendation: aim for 28–32px when space allows to provide a buffer beyond the minimum.
2. Provide sufficient separation for undersized visuals:
   • If the visible target is smaller than 24px, verify a 24px-diameter circle centered on the target does not intersect any other target’s area or any other 24px circle centered on an undersized target.
3. Avoid obstructions:
   • Make sure the clickable region is unobscured. Badges, overlaps, or sticky elements must not cover the target.
4. Implement with robust CSS:
   • Use min-width/min-height: 24px on buttons/links, or padding to reach 24px.
   • Use consistent spacing (gap or margin) between adjacent targets so their 24px circles don’t touch; 12px gap between centers smaller than 24px is a practical starting point, but verify with the circle test.
5. Respect exceptions wisely:
   • Some inline text links, essential presentations, or user-agent-controlled targets may be exempt in WCAG 2.2. Even then, prefer larger targets when feasible.

How to Test

Keyboard check:

• Tab through all interactive elements. Confirm each target receives a visible focus indicator around the full clickable region (not just the icon). Ensure no overlap traps focus.

Screen reader check:

• With VoiceOver/TalkBack/NVDA, navigate to each control. Confirm it announces a clear name and role, and activation does not require pixel-perfect tapping.

Mobile/touch check:

• On a phone, try tapping each target deliberately and quickly. You should not trigger adjacent controls.
• Use browser DevTools to measure the clickable bounding box in CSS pixels; confirm 24x24 minimum.
• For undersized visuals, draw/visualize a 24px-diameter circle centered on the target (DevTools rulers/overlays or a temporary CSS outline) and ensure it does not intersect neighboring targets or their circles.

Checklist:

• Each target ≥ 24x24 CSS px, or passes the 24px circle spacing method.
• No part of a target is covered by other UI.
• Tapping does not accidentally trigger adjacent targets.
• All controls are operable and clearly labeled for assistive tech.

Good Example

<style>
  .toolbar { display: inline-flex; gap: 12px; }
  .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    padding: 4px; /* increases hit area beyond a small icon */
    border-radius: 4px;
    border: 1px solid #888;

background: #fff;

}

.btn-icon svg { width: 12px; height: 12px; }

</style>

<div class="toolbar">

<button class="btn-icon" aria-label="Add item">

<svg aria-hidden="true" viewBox="0 0 16 16"><!-- plus icon --></svg>

</button>

<button class="btn-icon">Submit</button>

</div>

Bad Example

<style>
  .row { display: inline-flex; gap: 4px; }
  .icon-btn { width: 16px; height: 16px; padding: 0; border: none; }
  /* Overlap shrinks the unobscured area */
  .badge { position: relative; left: -6px; }
</style>
<div class="row">
  <button class="icon-btn" aria-label="Add">
    <span>+</span>
  </button>
  <button class="icon-btn badge" aria-label="Next">
    <span>›</span>
  </button>
</div>

Quick Checklist

• Targets are at least 24x24 CSS pixels, measured on the clickable area
• Undersized targets pass the 24px centered-circle spacing test
• No overlapping UI or negative margins reduce the hit area
• Consistent gaps between adjacent targets prevent accidental taps
• Icon buttons include padding to enlarge the hit area
• Focus indicators outline the full interactive region
• Clear, programmatic names for assistive technologies are present