Accessibility

Contents

• When to Use
• Core Principles (POUR)
• WCAG 2.2 Quick Reference
• ARIA Essentials
• Keyboard Navigation
• Color Contrast
• Common Patterns
• Testing
• Best Practices
• References

When to Use

• Implementing WCAG 2.2 Level AA or AAA compliance
• Building screen reader accessible interfaces
• Adding keyboard navigation to interactive components
• Conducting accessibility audits and fixing violations
• Supporting reduced motion and high contrast preferences
• Building mobile accessibility features (VoiceOver, TalkBack)

Core Principles (POUR)

WCAG 2.2 Quick Reference

For full per-principle checklists, see references.

ARIA Essentials

• Roles: Define element purpose (button, dialog, navigation)
• States: Indicate condition (aria-expanded, aria-selected, aria-disabled)
• Properties: Describe relationships (aria-labelledby, aria-describedby)
• Live regions: Announce dynamic changes (aria-live="polite")

Rule of thumb: Use native HTML first. Only add ARIA when no semantic equivalent exists.

Keyboard Navigation

• Tab order must follow visual order
• All interactive elements must be focusable
• Focus indicators must be visible (never outline: none without replacement)
• Modals must trap focus and restore it on close
• Skip links for bypassing repetitive content
• Touch targets: minimum 44x44px (AAA) or 24x24px (AA in 2.2)

Color Contrast

Common Patterns

Accessible Button

<button
  disabled={disabled || isLoading}
  aria-busy={isLoading}
  aria-disabled={disabled || isLoading}
  className="focus-visible:ring-2 focus-visible:ring-offset-2 min-h-[44px] min-w-[44px]"
>
  {isLoading ? <><span className="sr-only">Loading</span><Spinner aria-hidden /></> : children}
</button>

Skip Navigation

<a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:z-50">
  Skip to main content
</a>

Live Region

<div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
  {message}
</div>

Accessible Form Field

<label htmlFor="email">
  Email <span className="sr-only">(required)</span>
</label>
<input
  id="email" type="email" required
  aria-required="true"
  aria-invalid={!!error}
  aria-describedby={error ? "email-error" : "email-hint"}
/>

Testing

Automated Tools

npx @axe-core/cli https://example.com
npx pa11y https://example.com
npx lighthouse https://example.com --only-categories=accessibility

Note: Automated testing catches only ~30-50% of issues. Manual testing required.

Screen Reader Testing

For screen reader commands and testing checklists, see references/screen-reader-testing.md.

Best Practices

1. Use semantic HTML first — prefer native elements over ARIA
2. Keyboard first — design interactions to work without a mouse
3. Don't disable focus styles — style them, don't remove them
4. Provide text alternatives — all non-text content needs descriptions
5. Support zoom — content should work at 200% zoom
6. Announce changes — use live regions for dynamic content
7. Respect preferences — honor prefers-reduced-motion and prefers-contrast
8. Test with real assistive tech — not just automated tools

References

Audit & Compliance

• wcag-audit-patterns.md — Audit methodology, violation checklist, remediation patterns
• perceivable-checklist.md — WCAG Principle 1 checklist
• operable-checklist.md — WCAG Principle 2 checklist
• understandable-checklist.md — WCAG Principle 3 checklist
• robust-checklist.md — WCAG Principle 4 checklist
• remediation-patterns.md — Fix patterns for common issues
• automated-testing.md — axe-core integration examples

ARIA & Screen Readers

• screen-reader-testing.md — VoiceOver, NVDA, JAWS commands and testing checklists
• screen-reader-commands.md — Full command reference
• aria-patterns.md — Modal, live region, and tab patterns

Mobile & Guidelines

• mobile-accessibility.md — Mobile accessibility guidance for iOS, Android, and React Native
• wcag-guidelines.md — WCAG 2.2 routing guide into the per-principle checklists

Additional Resources

• Testing Checklists