Accessibility

rules/

Quick Reference

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

rules/wcag-color-contrast.md

rules/wcag-semantic-html.md

rules/wcag-testing.md

Focus Management

rules/focus-trap.md

rules/focus-restoration.md

rules/focus-keyboard-nav.md

React Aria

rules/aria-components.md

rules/aria-forms.md

rules/aria-overlays.md

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

• testing-patterns

  - Comprehensive testing patterns including accessibility testing

• design-system-starter

  - Accessible component library patterns

• i18n-date-patterns

  - RTL layout and locale-aware formatting

• motion-animation-patterns

  - Reduced motion and animation accessibility