Accessibility

Comprehensive patterns for building accessible web applications: WCAG 2.2 AA compliance, keyboard focus management, and React Aria component patterns. Each category has individual rule files in rules/ loaded on-demand.

Quick Reference

Total: 9 rules across 3 categories

Quick Start

// Semantic HTML with ARIA
<main>
  <article>
    <header><h1>Page Title</h1></header>
    <section aria-labelledby="features-heading">
      <h2 id="features-heading">Features</h2>
    </section>
  </article>
</main>

// Focus trap with React Aria
import { FocusScope } from 'react-aria';

<FocusScope contain restoreFocus autoFocus>
  <div role="dialog" aria-modal="true">
    {children}
  </div>
</FocusScope>

WCAG Compliance

WCAG 2.2 AA implementation for inclusive, legally compliant web applications.

Focus Management

Keyboard focus management patterns for accessible interactive widgets.

React Aria

Adobe React Aria hooks for building WCAG-compliant interactive UI.

Key Decisions

Anti-Patterns (FORBIDDEN)

• Div soup: Using <div> instead of semantic elements (<nav>, <main>, <article>)
• Color-only information: Status indicated only by color without icon/text
• Missing labels: Form inputs without associated <label> or aria-label
• Keyboard traps: Focus that cannot escape without Escape key
• Removing focus outline: outline: none without replacement indicator
• Positive tabindex: Using tabindex > 0 (disrupts natural order)
• Div with onClick: Using <div onClick> instead of <button> or useButton
• Manual focus in modals: Using useEffect + ref.focus() instead of FocusScope
• Auto-playing media: Audio/video that plays without user action
• ARIA overuse: Using ARIA when semantic HTML suffices

Detailed Documentation

Related Skills

• ork:testing-patterns - Comprehensive testing patterns including accessibility testing
• design-system-starter - Accessible component library patterns
• ork:i18n-date-patterns - RTL layout and locale-aware formatting
• motion-animation-patterns - Reduced motion and animation accessibility