Accessibility
Comprehensive patterns for building accessible web applications: WCAG 2.2 AA compliance, keyboard focus management, React Aria component patterns, native HTML-first philosophy, cognitive inclusion, and user preference honoring. Each category has individual rule files in rules/ loaded on-demand.
Quick Reference
| Category | Rules | Impact | When to Use |
|---|
| WCAG Compliance | 3 | CRITICAL | Color contrast, semantic HTML, automated testing |
| POUR Exit Criteria | 1 | CRITICAL | Falsifiable pass/fail thresholds for each WCAG 2.2 AA criterion |
| Static Anti-Patterns | 1 | HIGH | Grep-able patterns detectable without a browser |
| Focus Management | 1 | HIGH | Keyboard navigation; trap/restoration mechanics live upstream |
| React Aria | 2 | HIGH | Accessible components and form hooks; overlay APIs live upstream |
| Modern Web Accessibility | 2 | CRITICAL/HIGH | Native HTML first, user preferences; cognitive ceilings in references/ork-delta.md |
Total: 10 rules across 6 categories
Quick Start
<main>
<article>
<header><h1>Page Title</h1></header>
<section aria-labelledby="features-heading">
<h2 id="features-heading">Features</h2>
</section>
</article>
</main>
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.
| Rule | File | Key Pattern |
|---|
| Color Contrast | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/wcag-color-contrast.md | 4.5:1 text, 3:1 UI components, focus indicators |
| Semantic HTML | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/wcag-semantic-html.md | Landmarks, headings, ARIA labels, form structure |
| Testing | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/wcag-testing.md | axe-core, Playwright a11y, screen reader testing |
POUR Exit Criteria
Concrete pass/fail thresholds for each WCAG 2.2 AA criterion — replaces vague "meets requirements" checks.
| Rule | File | Key Pattern |
|---|
| POUR Exit Criteria | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/pour-exit-criteria.md | Falsifiable checklist: image alt, contrast ratios, focus indicators, touch targets, ARIA states |
Static Anti-Patterns
Grep-able anti-patterns detectable via static analysis or code review — no browser needed.
| Rule | File | Key Pattern |
|---|
| A11y Anti-Patterns (Static) | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/a11y-antipatterns-static.md | Focus removal, missing labels, autoplay, icon-only buttons, div-click handlers |
Focus Management
Keyboard focus management patterns for accessible interactive widgets.
| Rule | File | Key Pattern |
|---|
| Keyboard Navigation | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/focus-keyboard-nav.md | Roving tabindex, skip links, arrow keys |
Focus trap and restoration mechanics are upstream's job: use React Aria <FocusScope contain restoreFocus autoFocus> (see Upstream coverage). When React Aria is unavailable, copy ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/scripts/focus-trap-template.tsx; the house rules for both live in ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/references/ork-delta.md.
React Aria
Adobe React Aria hooks for building WCAG-compliant interactive UI.
| Rule | File | Key Pattern |
|---|
| Components | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/aria-components.md | useButton, useDialog, useMenu, FocusScope |
| Forms | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/aria-forms.md | useComboBox, useTextField, useListBox |
Overlay hook APIs (useModalOverlay, useTooltip, usePopover) are documented upstream (see Upstream coverage); the house overlay recipe (FocusScope plus shared motion presets) is in ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/references/ork-delta.md.
Modern Web Accessibility
2026 best practices: native HTML first, cognitive inclusion, and honoring user preferences.
| Rule | File | Key Pattern |
|---|
| Native HTML First | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/wcag-native-html-first.md | <dialog>, <details>, native over custom ARIA |
| User Preferences | ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/rules/wcag-user-preferences.md | prefers-reduced-motion, forced-colors, prefers-contrast, zoom |
Cognitive inclusion (ADHD/autism/dyslexia support) is covered upstream by W3C COGA (see Upstream coverage); the house cognitive-load ceilings (notification cap, nav-item cap, reading-level targets) are in ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/references/ork-delta.md.
Key Decisions
| Decision | Recommendation |
|---|
| Conformance level | WCAG 2.2 AA (legal standard: ADA, Section 508) |
| Contrast ratio | 4.5:1 normal text, 3:1 large text and UI components |
| Target size | 24px min (WCAG 2.5.8), 44px for touch |
| Focus indicator | 3px solid outline, 3:1 contrast |
| Component library | React Aria hooks for control, react-aria-components for speed |
| State management | react-stately hooks (designed for a11y) |
| Focus management | FocusScope for modals, roving tabindex for widgets |
| Testing | jest-axe (unit) + Playwright axe-core (E2E) |
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
Upstream coverage (do not restate)
Vendor tutorials, API references, and criterion walkthroughs removed in the 2026-07-31 wrap-plus-delta thinning. Consult the first-party source; only the ork delta (floors, scars, house decisions) lives in ${CLAUDE_PLUGIN_ROOT}/skills/accessibility/references/ork-delta.md.
| Topic | First-party source |
|---|
| WCAG 2.2 success-criterion walkthroughs and audit checklists | WCAG 2.2 quick reference and WCAG 2.2 spec |
| ARIA widget patterns and keyboard interaction models | WAI-ARIA Authoring Practices Guide |
| React Aria hook APIs (useButton, useMenu, useComboBox, useModalOverlay, useTooltip, usePopover), component checklists, worked examples | React Aria docs |
| Focus trap, focus restoration, roving tabindex, and skip-link algorithms | React Aria FocusScope and APG patterns |
| Cognitive accessibility guidance (COGA) | W3C Making Content Usable |
| Screen reader testing walkthroughs (NVDA, JAWS, VoiceOver, TalkBack) | WebAIM screen reader testing |
Detailed Documentation
| Resource | Description |
|---|
${CLAUDE_PLUGIN_ROOT}/skills/accessibility/scripts | Templates: accessible form, focus trap, React Aria components |
${CLAUDE_PLUGIN_ROOT}/skills/accessibility/references/ork-delta.md | Ork-specific floors, scars, and house decisions (cognitive ceilings, overlay recipe, canonical focus-trap selector) |
${CLAUDE_PLUGIN_ROOT}/skills/accessibility/references/ux-thresholds-quick.md | UI/UX thresholds quick reference: contrast, touch targets, cognitive load, typography, forms |
${CLAUDE_PLUGIN_ROOT}/skills/accessibility/examples/wcag-examples.md | Complete accessible form, modal, and navigation examples |
Related Skills
ork:testing-e2e - E2E testing patterns including accessibility testingdesign-system-starter - Accessible component library patternsork:i18n-date-patterns - RTL layout and locale-aware formattingmotion-animation-patterns - Reduced motion and animation accessibility
