a11y.touch target size

a11y.touch-target-size

Rule ID: a11y.touch-target-size Severity: WARN Category: a11y Target Standards: WCAG 2.2 Success Criterion 2.5.8 (Target Size - Minimum), Apple Human Interface Guidelines (Touch Controls: 44x44pt minimum), Google Material Design (Touch Targets: 48x48dp baseline)

---

1. Overview & Core Invariant

Enforces minimum 44x44px physical touch target size on interactive controls (Apple HIG / WCAG 2.5.8)

Core Invariant:

"Interactive controls (, , , ) must provide an effective physical touch target area of at least 44x44px on mobile devices."

---

2. Technical Grounding & Engine Realities

Touch screens rely on human fingertip interaction, which has an average contact area of 10-14mm (approx. 44-48 CSS pixels).

When interactive elements (like icon buttons or close triggers) are sized with explicit small dimensions such as h-6 w-6 (24px) without hit-box padding compensation or minimum size constraints:

1. High Error Rate: Users frequently miss the intended button or trigger adjacent elements.
2. Motor Accessibility Failures: Users with tremors or motor impairments cannot reliably activate the control.
3. Frustrating Mobile UX: Tap feedback does not register, causing repeated tapping and accidental rage clicks.

Charites calculates the effective box model dimensions and flags elements falling below 44px.

---

3. Vulnerability & Risk Taxonomy

Risk Vector	Severity	Impact
WCAG 2.5.8 Non-Compliance	HIGH	Users with motor disabilities cannot reliably tap interactive elements on mobile devices.
Rage Clicks & Accidental Actions	MEDIUM	Users accidentally tap sibling destructive actions due to cramped bounding boxes.

---

4. Non-Compliant Code Patterns (Bad Examples)

TSX (Small 24px icon button without hit-box compensation):

<button className="h-6 w-6"><TrashIcon className="h-4 w-4" /></button>

ASTRO (Close button with 32px height and width):

<button class="h-8 w-8 p-1"><CloseIcon /></button>

---

5. Compliant Implementation Patterns (Good Examples)

TSX (44px (2.75rem) target with centered inner icon):

<button className="h-11 w-11 flex items-center justify-center"><TrashIcon className="h-5 w-5" /></button>

ASTRO (Explicit minimum dimensions to guarantee 44px (2.75rem) tap zone):

<button class="h-8 w-8 min-h-11 min-w-11 flex items-center justify-center"><CloseIcon /></button>

---

6. How to Suppress (Ignore Directives)

If this pattern is required for an intentional exception, suppress the diagnostic using the canonical Charites Rule ID:

<!-- charites:ignore a11y.touch-target-size intentional exception -->

// charites:ignore a11y.touch-target-size intentional exception

---

7. Configuration Reference (charites.yaml)

rules:
  a11y.touch-target-size:
    severity: warn # error | warn | info | off

---

8. Architectural Domain & Verification Reference

• Domain Architecture & Analysis Pipeline: See the a11y Category Guide.
• 1-SSOT Golden Tri-Corpus Test Matrix: See the Verification Harness on the Master Home page.
• Rule Catalog Index: See Master Wiki Home.