Form labels and ARIA attributes

Severity: Recommended

Forms without proper labels are unusable for screen reader users. ARIA extends HTML semantics where needed.

Check automatically:

# Check for jsx-a11y ESLint rules (covers label, aria)
grep -riE "label-has-associated-control|aria-props|aria-role" .eslintrc* eslint.config* 2>/dev/null

# Look for form/input patterns with labels
grep -riE "<label|htmlFor|aria-label|aria-labelledby|aria-describedby" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -15

# Look for ARIA landmark roles
grep -riE 'role="(main|navigation|banner|contentinfo|search|complementary)"' src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -5

# Check for common ARIA patterns (live regions, etc)
grep -riE "aria-live|aria-atomic|aria-expanded|aria-hidden|aria-current" src/ --include="*.tsx" --include="*.jsx" 2>/dev/null | head -10

Ask user:

• "Are form inputs associated with labels?" (htmlFor/id or wrapping label)
• "How are error messages announced?" (aria-describedby, aria-live)
• "Is ARIA used appropriately?" (prefer semantic HTML first)

Pass criteria:

• All form inputs have associated labels (visible or aria-label)
• Error messages connected to inputs (aria-describedby)
• ARIA used correctly (not overused or misused)
• jsx-a11y ESLint rules enabled

Fail criteria:

• Inputs without labels (placeholder doesn't count)
• ARIA misuse (wrong roles, aria-label on non-interactive elements)
• No connection between errors and inputs
• Form submission errors not announced

Note: ARIA is a supplement, not a replacement. Prefer semantic HTML (<button> not <div role="button">).

Cross-reference with: A11Y-004 (keyboard navigation relies on proper roles)

Evidence to capture:

• Label association patterns
• ARIA usage patterns
• jsx-a11y rules configured
• Error announcement method

---