Agent skill

Accessibility

by yonatangross in 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.

MITAuto-check passedFrontend & Design

Install Accessibility

skills CLI
$ npx skills add yonatangross/orchestkit --skill accessibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install yonatangross/orchestkit accessibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
accessibility
GitHub stars
289
Token cost
~2.2k tokens
SKILL.md length
757 words
Files
22 (incl. scripts, references)
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring.

  • Implementing screen reader support
  • SKILL.md covers Quick Reference, Quick Start, WCAG Compliance and POUR Exit Criteria, plus 9 more sections
  • Keyboard navigation
  • Accessible component libraries

What it does

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.

When your agent uses it

  • Implementing screen reader support
  • Keyboard navigation
  • Accessible component libraries
  • Cognitive accessibility

Example prompts

  • “/accessibility”

Requirements

  • Compatibility (from SKILL.md): Claude Code 2.1.277+.
  • Pre-approved tools (allowed-tools): Read, Glob, Grep, WebFetch, WebSearch

What it can do on your machine

Read from SKILL.md and the folder at commit 0ef71d2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Glob
    • Grep
    • WebFetch
    • WebSearch

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • w3.org
    • react-spectrum.adobe.com
    • webaim.org

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Claude Code 2.1.277+.

    From compatibility in the SKILL.md frontmatter.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~93
When it runs · the whole SKILL.md, loaded when a task matches
~2.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~3.5k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from yonatangross/orchestkit at commit 0ef71d2, republished under its MIT licence (© yonatangross). 757 words, ~2,247 tokens.

Download SKILL.mdSave it as .claude/skills/accessibility/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
accessibility
description
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.
allowed-tools
Read, Glob, Grep, WebFetch, WebSearch
compatibility
Claude Code 2.1.277+.
license
MIT
user-invocable
false
disable-model-invocation
true
metadata.owner-agent
accessibility-specialist
metadata.category
document-asset-creation
metadata.version
2.1.0
metadata.author
OrchestKit
metadata.complexity
medium
metadata.tags
accessibility, a11y, wcag, focus-management, react-aria, keyboard-navigation, screen-reader, aria

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

CategoryRulesImpactWhen to Use
WCAG Compliance3CRITICALColor contrast, semantic HTML, automated testing
POUR Exit Criteria1CRITICALFalsifiable pass/fail thresholds for each WCAG 2.2 AA criterion
Static Anti-Patterns1HIGHGrep-able patterns detectable without a browser
Focus Management1HIGHKeyboard navigation; trap/restoration mechanics live upstream
React Aria2HIGHAccessible components and form hooks; overlay APIs live upstream
Modern Web Accessibility2CRITICAL/HIGHNative HTML first, user preferences; cognitive ceilings in references/ork-delta.md

Total: 10 rules across 6 categories

Quick Start

tsx
// 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>
tsx
// 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.

RuleFileKey Pattern
Color Contrastrules/wcag-color-contrast.md4.5:1 text, 3:1 UI components, focus indicators
Semantic HTMLrules/wcag-semantic-html.mdLandmarks, headings, ARIA labels, form structure
Testingrules/wcag-testing.mdaxe-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.

RuleFileKey Pattern
POUR Exit Criteriarules/pour-exit-criteria.mdFalsifiable 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.

RuleFileKey Pattern
A11y Anti-Patterns (Static)rules/a11y-antipatterns-static.mdFocus removal, missing labels, autoplay, icon-only buttons, div-click handlers

Focus Management

Keyboard focus management patterns for accessible interactive widgets.

RuleFileKey Pattern
Keyboard Navigationrules/focus-keyboard-nav.mdRoving 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.

React Aria

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

RuleFileKey Pattern
Componentsrules/aria-components.mduseButton, useDialog, useMenu, FocusScope
Formsrules/aria-forms.mduseComboBox, 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.

Modern Web Accessibility

2026 best practices: native HTML first, cognitive inclusion, and honoring user preferences.

RuleFileKey Pattern
Native HTML Firstrules/wcag-native-html-first.md<dialog>, <details>, native over custom ARIA
User Preferencesrules/wcag-user-preferences.mdprefers-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.

Key Decisions

DecisionRecommendation
Conformance levelWCAG 2.2 AA (legal standard: ADA, Section 508)
Contrast ratio4.5:1 normal text, 3:1 large text and UI components
Target size24px min (WCAG 2.5.8), 44px for touch
Focus indicator3px solid outline, 3:1 contrast
Component libraryReact Aria hooks for control, react-aria-components for speed
State managementreact-stately hooks (designed for a11y)
Focus managementFocusScope for modals, roving tabindex for widgets
Testingjest-axe (unit) + Playwright axe-core (E2E)
Show full SKILL.md (280 more words)Show less

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 references/ork-delta.md.

TopicFirst-party source
WCAG 2.2 success-criterion walkthroughs and audit checklistsWCAG 2.2 quick reference and WCAG 2.2 spec
ARIA widget patterns and keyboard interaction modelsWAI-ARIA Authoring Practices Guide
React Aria hook APIs (useButton, useMenu, useComboBox, useModalOverlay, useTooltip, usePopover), component checklists, worked examplesReact Aria docs
Focus trap, focus restoration, roving tabindex, and skip-link algorithmsReact 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

ResourceDescription
scripts/Templates: accessible form, focus trap, React Aria components
references/ork-delta.mdOrk-specific floors, scars, and house decisions (cognitive ceilings, overlay recipe, canonical focus-trap selector)
references/ux-thresholds-quick.mdUI/UX thresholds quick reference: contrast, touch targets, cognitive load, typography, forms
examples/wcag-examples.mdComplete accessible form, modal, and navigation examples
  • ork:testing-e2e - E2E 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

© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 21 other files (scripts, references) in src/skills/accessibility of yonatangross/orchestkit.

  • SKILL.md
  • examples/wcag-examples.md
  • metadata.json
  • references/ork-delta.md
  • references/ux-thresholds-quick.md
  • rules/_sections.md
  • rules/_template.md
  • rules/a11y-antipatterns-static.md
  • rules/aria-components.md
  • rules/aria-forms.md
  • rules/focus-keyboard-nav.md
  • rules/pour-exit-criteria.md
  • rules/wcag-color-contrast.md
  • rules/wcag-native-html-first.md
  • rules/wcag-semantic-html.md
  • rules/wcag-testing.md
  • rules/wcag-user-preferences.md
  • scripts
  • … and 4 more

Open the folder on GitHubat commit 0ef71d2

Compare with similar skills

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.

Accessibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Accessibility this skillyonatangross/orchestkit289—~2.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17811 repos~610Automated safety check: PassApache-2.0
UI/UX Design System AdvisorGalaxy-Dawn/claude-scholar5.7k1 repos~1.1kAutomated safety check: PassMIT
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Accessibility CompliancevmDeshpande/ai-agent-automation1783 repos~601Automated safety check: PassApache-2.0
React Ariaintentui/laravel1621 repos~3.9kAutomated safety check: PassApache-2.0

Similar skills

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 11 repos~610 tokens
    Frontend & DesignAuto-check passed
  • UI/UX Design System Advisor

    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.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed
  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 9 days ago
    Frontend & DesignAuto-check: notes
  • Accessibility Compliance

    vmDeshpande/ai-agent-automation

    Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support.

    178 GitHub starsUsed in 3 repos~601 tokens
    Frontend & DesignAuto-check passed
  • React Aria

    intentui/laravel

    Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.

    162 GitHub starsUsed in 1 repo~3.9k tokens
    Frontend & DesignAuto-check passed
  • Instui Docs

    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.

    482 GitHub stars~498 tokensUpdated today
    Frontend & DesignAuto-check passed

More from yonatangross/orchestkit

All 108 skills in this repo
  • API Design

    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.

    289 GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Architecture Decision Record

    yonatangross/orchestkit

    ADR templates in the Nygard format with context, decision, consequences, and alternatives.

    289 GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Audit Full

    yonatangross/orchestkit

    Single-pass codebase analysis leveraging a 1M-token context window for comprehensive security scanning, architecture review, and dependency auditing.

    289 GitHub stars~3.5k tokensUpdated today
    Auto-check: notes
  • Code Review Playbook

    yonatangross/orchestkit

    Structured review processes, conventional comments, language-specific checklists, and feedback templates.

    289 GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Create PR

    yonatangross/orchestkit

    Creates GitHub pull requests with pre-flight validation, conventional title formatting, and structured summary generation.

    289 GitHub stars~4.5k tokensUpdated today
    Auto-check: notes
  • Explore

    yonatangross/orchestkit

    Multi-angle codebase exploration spawning 3-5 parallel agents for code structure, data flow, architecture patterns, and health assessment.

    289 GitHub stars~3.9k tokensUpdated today
    Auto-check: notes

Works with

Questions about Accessibility

What does Accessibility do?

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.

When should I use Accessibility?

Accessibility fits situations like: implementing screen reader support; keyboard navigation; accessible component libraries; cognitive accessibility.

How do I install Accessibility in Claude Code?

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.

How do I install Accessibility in Codex?

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.

Can I use Accessibility in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Accessibility need to run?

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+..

Does Accessibility access the network?

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.

Is Accessibility safe to install?

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.

What licence does Accessibility use?

Accessibility is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Accessibility use?

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.

What are the alternatives to Accessibility?

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.

Who maintains Accessibility?

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.