Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring.
$ npx skills add yonatangross/orchestkit --skill accessibility -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install yonatangross/orchestkit accessibility --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/src/skills/accessibility .claude/skills/accessibility && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "accessibility" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibility into .claude/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibilityType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add yonatangross/orchestkit --skill accessibility -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install yonatangross/orchestkit accessibility --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/src/skills/accessibility .agents/skills/accessibility && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "accessibility" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibility into .agents/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add yonatangross/orchestkit --skill accessibility -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install yonatangross/orchestkit accessibility --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/src/skills/accessibility .cursor/skills/accessibility && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "accessibility" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibility into .cursor/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/yonatangross/orchestkit.git --path src/skills/accessibility--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add yonatangross/orchestkit --skill accessibility -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install yonatangross/orchestkit accessibility --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/src/skills/accessibility .gemini/skills/accessibility && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "accessibility" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibility into .gemini/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install yonatangross/orchestkit accessibilityInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add yonatangross/orchestkit --skill accessibility -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .github/skills && cp -r skills-src/src/skills/accessibility .github/skills/accessibility && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "accessibility" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibility into .github/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add yonatangross/orchestkit --skill accessibility -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install yonatangross/orchestkit accessibility --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/src/skills/accessibility .opencode/skills/accessibility && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "accessibility" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/accessibility into .opencode/skills/accessibility/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "accessibility", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
accessibilityAccessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring.
Accessibility is an agent skill from yonatangross/orchestkit. Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, accessible component libraries, reduced motion, or cognitive accessibility.
Its SKILL.md is about 2.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 24 other files, including scripts and reference files (for example `examples/wcag-examples.md`, `metadata.json` and `references/ork-delta.md`). Compatibility notes: Claude Code 2.1.277+.
It sits in Frontend & Design, covering Accessibility. It works with React. The repository describes itself as: The Complete AI Development Toolkit for Claude Code. 106 skills, 36 agents, 171 hooks. Install ork for stable (v9.x), or ork-alpha for the v10 line, which ships daily. The licence is MIT.
Read from SKILL.md and the folder at commit 0ef71d2. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadGlobGrepWebFetchWebSearchFrom allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/, which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
w3.orgreact-spectrum.adobe.comwebaim.orgFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Claude Code 2.1.277+.
From compatibility in the SKILL.md frontmatter.
Accessibility loads about 2.2k tokens when it runs, and up to ~3.5k if it reads all its reference files. Until then it costs about 93 tokens; SKILL.md has 757 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from yonatangross/orchestkit at commit 0ef71d2, republished under its MIT licence (© yonatangross). 757 words, ~2,247 tokens.
.claude/skills/accessibility/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.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.
| 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
// 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 2.2 AA implementation for inclusive, legally compliant web applications.
| Rule | File | Key Pattern |
|---|---|---|
| Color Contrast | rules/wcag-color-contrast.md | 4.5:1 text, 3:1 UI components, focus indicators |
| Semantic HTML | rules/wcag-semantic-html.md | Landmarks, headings, ARIA labels, form structure |
| Testing | rules/wcag-testing.md | axe-core, Playwright a11y, screen reader testing |
Concrete pass/fail thresholds for each WCAG 2.2 AA criterion — replaces vague "meets requirements" checks.
| Rule | File | Key Pattern |
|---|---|---|
| POUR Exit Criteria | rules/pour-exit-criteria.md | Falsifiable checklist: image alt, contrast ratios, focus indicators, touch targets, ARIA states |
Grep-able anti-patterns detectable via static analysis or code review — no browser needed.
| Rule | File | Key Pattern |
|---|---|---|
| A11y Anti-Patterns (Static) | rules/a11y-antipatterns-static.md | Focus removal, missing labels, autoplay, icon-only buttons, div-click handlers |
Keyboard focus management patterns for accessible interactive widgets.
| Rule | File | Key Pattern |
|---|---|---|
| Keyboard Navigation | 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 scripts/focus-trap-template.tsx; the house rules for both live in references/ork-delta.md.
Adobe React Aria hooks for building WCAG-compliant interactive UI.
| Rule | File | Key Pattern |
|---|---|---|
| Components | rules/aria-components.md | useButton, useDialog, useMenu, FocusScope |
| Forms | 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 references/ork-delta.md.
2026 best practices: native HTML first, cognitive inclusion, and honoring user preferences.
| Rule | File | Key Pattern |
|---|---|---|
| Native HTML First | rules/wcag-native-html-first.md | <dialog>, <details>, native over custom ARIA |
| User Preferences | 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 references/ork-delta.md.
| 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) |
<div> instead of semantic elements (<nav>, <main>, <article>)<label> or aria-labeloutline: none without replacement indicatortabindex > 0 (disrupts natural order)<div onClick> instead of <button> or useButtonuseEffect + ref.focus() instead of FocusScopeVendor 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 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 |
| Resource | Description |
|---|---|
scripts/ | Templates: accessible form, focus trap, React Aria components |
references/ork-delta.md | Ork-specific floors, scars, and house decisions (cognitive ceilings, overlay recipe, canonical focus-trap selector) |
references/ux-thresholds-quick.md | UI/UX thresholds quick reference: contrast, touch targets, cognitive load, typography, forms |
examples/wcag-examples.md | Complete accessible form, modal, and navigation examples |
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© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 21 other files (scripts, references) in src/skills/accessibility of yonatangross/orchestkit.
Open the folder on GitHubat commit 0ef71d2
Accessibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Accessibility this skillyonatangross/orchestkit | 289 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Wcag Audit PatternsvmDeshpande/ai-agent-automation | 178 | 11 repos | ~610 | Automated safety check: Pass | Apache-2.0 | |
| UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar | 5.7k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT | |
| Accessibility CompliancevmDeshpande/ai-agent-automation | 178 | 3 repos | ~601 | Automated safety check: Pass | Apache-2.0 | |
| React Ariaintentui/laravel | 162 | 1 repos | ~3.9k | Automated safety check: Pass | Apache-2.0 |
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
Galaxy-Dawn/claude-scholar
Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
vmDeshpande/ai-agent-automation
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support.
intentui/laravel
Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.
instructure/instructure-ui
Look up authoritative Instructure UI (InstUI, @instructure/ui-) documentation — component APIs, props, theme variables, usage examples, and guides — by querying instructure.design's plaintext docs.
yonatangross/orchestkit
API contract design for REST and GraphQL, covering resource shape, URL and header versioning with deprecation windows, RFC 9457 Problem Details error handling, and OpenAPI specs.
yonatangross/orchestkit
ADR templates in the Nygard format with context, decision, consequences, and alternatives.
yonatangross/orchestkit
Single-pass codebase analysis leveraging a 1M-token context window for comprehensive security scanning, architecture review, and dependency auditing.
yonatangross/orchestkit
Structured review processes, conventional comments, language-specific checklists, and feedback templates.
yonatangross/orchestkit
Creates GitHub pull requests with pre-flight validation, conventional title formatting, and structured summary generation.
yonatangross/orchestkit
Multi-angle codebase exploration spawning 3-5 parallel agents for code structure, data flow, architecture patterns, and health assessment.
Works with
Categories
Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring. Accessibility is an agent skill from yonatangross/orchestkit.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring.
Accessibility fits situations like: implementing screen reader support; keyboard navigation; accessible component libraries; cognitive accessibility.
Run `npx skills add yonatangross/orchestkit --skill accessibility -a claude-code`. Or copy the skill folder (src/skills/accessibility in yonatangross/orchestkit) into .claude/skills/accessibility in your project. Claude Code loads it when a task matches its description.
Run `npx skills add yonatangross/orchestkit --skill accessibility -a codex`. Or copy the skill folder (src/skills/accessibility in yonatangross/orchestkit) into .agents/skills/accessibility in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yonatangross/orchestkit --skill accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/accessibility, .gemini/skills/accessibility, .github/skills/accessibility and .opencode/skills/accessibility in your project.
SKILL.md names no scripts, command-line tools or credentials: Accessibility is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Glob, Grep, WebFetch, WebSearch. Compatibility (from SKILL.md): Claude Code 2.1.277+..
SKILL.md names 3 domains. As links in the text: w3.org, react-spectrum.adobe.com and webaim.org. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Accessibility is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.2k tokens (SKILL.md is roughly 9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Accessibility: Wcag Audit Patterns (vmDeshpande/ai-agent-automation, 178 stars), UI/UX Design System Advisor (Galaxy-Dawn/claude-scholar, 5.7k stars), Extract Design (Manavarya09/design-extract, 4.2k stars) and Accessibility Compliance (vmDeshpande/ai-agent-automation, 178 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
yonatangross (a GitHub user) maintains it in yonatangross/orchestkit, which has 289 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on October 7, 2026.
Source: yonatangross/orchestkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.