Provide sufficient touch target size

Rule Details

Touch targets are the portions of the screen that respond to user input. WCAG 2.2 Target Size (Minimum) (opens in new tab), the older WCAG 2.5.5 target size guidance (opens in new tab), and platform guidance from Apple and Google all converge on the same idea: interactive areas must be physically generous enough to hit reliably.

Code Example

/* ✅ Good: padding ensures sufficient touch target */
.button {
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
}
 
/* ✅ Good: icon-only button with padding expanding hit area */
.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;  /* Visual icon size */
  height: 20px;
  padding: 12px; /* Expands touch area to 44×44px total */
  background: transparent;
  border: none;
  cursor: pointer;
}
 
/* ✅ Good: invisible pseudo-element extends hit area */
.small-icon-link {
  position: relative;
}
.small-icon-link::before {
  content: '';
  position: absolute;
  inset: -12px; /* Extends hit area 12px in all directions */
}
 
/* ❌ Fail: icon button with no touch area expansion */
.close-icon {
  width: 16px;
  height: 16px;
  /* 16px is too small — fails both 24px and 44px thresholds */
}

Why It Matters

This is a motor-access requirement, not just a mobile polish issue. Small icon buttons and tightly packed actions routinely fail users who cannot make a precise tap.

• Motor Impairments: Tremors, spasticity, and limited dexterity make precise tapping difficult or impossible on small targets.
• One-Handed Use: Users holding a device with one hand often tap with a thumb, which has lower precision than a fingertip.
• Stylus Users: Despite higher precision, users with styluses often have motor impairments that reduce accuracy.
• All Users: Larger targets reduce accidental activations for everyone, especially in motion or low-light conditions.

Size Requirements

Aim for 44×44px as a practical target — it satisfies AAA and both platform guidelines.

Card and list item links

This pattern still needs to satisfy WCAG 2.5.8 Target Size (Minimum) (opens in new tab), so the stretched clickable area should be intentional rather than visually implied.

For card-style or row-style UI where the whole block should be clickable (e.g. a checklist card, resource card, or audit row), use a stretched link so the link's accessible name is the card title and the entire area is the touch target:

• Container: position: relative with the card/row styles.
• Title link: the <a> or <Link> wraps only the title text inside the heading. It uses ::after (position: absolute; inset: 0) to stretch the clickable area to the card boundaries. Because the link is position: static (the default), the ::after is positioned relative to the card container.
• Secondary actions (e.g. menu, secondary link): give them position: relative; z-index: 10 so they stay clickable above the stretched ::after.

Do not wrap the entire card in a single <a>, and do not use a separate overlay <a> as a sibling. The link should wrap the title and stretch from there. See project doc docs/card-links.md for reference components.

Exceptions

• Evaluate the rendered experience before treating a static-code smell as a blocker; interaction timing, browser behavior, and assistive technology output often determine severity.
• Not every secondary accessibility issue deserves equal weight; prioritize the issue that most directly blocks perception, operation, or understanding.
• Avoid adding redundant markup or ARIA solely to satisfy a rule when a simpler semantic implementation would eliminate the issue entirely.

Verification

Automated Checks

• Inspect the browser accessibility tree or accessibility pane for the relevant element, role, or accessible name.
• Run an automated accessibility checker such as axe or Lighthouse where applicable.

Manual Checks

• Test the affected UI with keyboard-only navigation and confirm the rule holds in the rendered experience.
• Re-test one representative user flow with a screen reader if this rule affects a key interaction.