Web Interface Guidelines Reviewer
vercel-labs/openreview
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…
Simulate screen reader narration of HTML or JSX, step by step.
Install Screen Reader Lab
$ npx skills add Community-Access/accessibility-agents --skill screen-reader-lab -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Community-Access/accessibility-agents screen-reader-lab --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/Community-Access/accessibility-agents.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/screen-reader-lab .claude/skills/screen-reader-lab && 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 "screen-reader-lab" agent skill from https://github.com/Community-Access/accessibility-agents/tree/main/skills/screen-reader-lab into .claude/skills/screen-reader-lab/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screen-reader-lab", 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/Community-Access/accessibility-agents/tree/main/skills/screen-reader-labType 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 Community-Access/accessibility-agents --skill screen-reader-lab -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Community-Access/accessibility-agents screen-reader-lab --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/screen-reader-lab .agents/skills/screen-reader-lab && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "screen-reader-lab" agent skill from https://github.com/Community-Access/accessibility-agents/tree/main/skills/screen-reader-lab into .agents/skills/screen-reader-lab/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screen-reader-lab", 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 Community-Access/accessibility-agents --skill screen-reader-lab -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Community-Access/accessibility-agents screen-reader-lab --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/screen-reader-lab .cursor/skills/screen-reader-lab && 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 "screen-reader-lab" agent skill from https://github.com/Community-Access/accessibility-agents/tree/main/skills/screen-reader-lab into .cursor/skills/screen-reader-lab/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screen-reader-lab", 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/Community-Access/accessibility-agents.git --path skills/screen-reader-lab--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 Community-Access/accessibility-agents --skill screen-reader-lab -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Community-Access/accessibility-agents screen-reader-lab --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/screen-reader-lab .gemini/skills/screen-reader-lab && 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 "screen-reader-lab" agent skill from https://github.com/Community-Access/accessibility-agents/tree/main/skills/screen-reader-lab into .gemini/skills/screen-reader-lab/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screen-reader-lab", 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 Community-Access/accessibility-agents screen-reader-labInstalls 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 Community-Access/accessibility-agents --skill screen-reader-lab -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/screen-reader-lab .github/skills/screen-reader-lab && 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 "screen-reader-lab" agent skill from https://github.com/Community-Access/accessibility-agents/tree/main/skills/screen-reader-lab into .github/skills/screen-reader-lab/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screen-reader-lab", 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 Community-Access/accessibility-agents --skill screen-reader-lab -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Community-Access/accessibility-agents screen-reader-lab --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Community-Access/accessibility-agents.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/screen-reader-lab .opencode/skills/screen-reader-lab && 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 "screen-reader-lab" agent skill from https://github.com/Community-Access/accessibility-agents/tree/main/skills/screen-reader-lab into .opencode/skills/screen-reader-lab/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screen-reader-lab", 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.
Facts
- Skill name
screen-reader-lab- GitHub stars
- 423
- Token cost
- ~774 tokens
- SKILL.md length
- 377 words
- Files
- 2
- Skills in repo
- 108
- Repo updated
- First seen
- Licence
- MIT
At a glance
Simulate screen reader narration of HTML or JSX, step by step.
- Works in 4 steps: Input → Parse and Simulate → Findings → …
- Tasks that involve Accessibility
- SKILL.md covers Screen Reader Lab, Simulation Modes, Accessible Name Computation and Process, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Screen Reader Lab is an agent skill from Community-Access/accessibility-agents. Simulate screen reader narration of HTML or JSX, step by step.
Its SKILL.md is about 770 tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`).
It sits in Frontend & Design, covering Accessibility. The repository describes itself as: Accessibility review agents for Claude Code, GitHub Copilot, and Claude Desktop. Eleven specialists that enforce WCAG 2.2 AA compliance so AI coding tools stop generating… The licence is MIT.
When your agent uses it
- Tasks that involve Accessibility
Example prompts
- “/screen-reader-lab”
Workflow steps
4 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit decf6ba. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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.
Context cost
Screen Reader Lab loads about 774 tokens when it runs. Until then it costs about 20 tokens; SKILL.md has 377 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.
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); files beside SKILL.md are not scanned.
SKILL.md
The full file from Community-Access/accessibility-agents at commit decf6ba, republished under its MIT licence (© Community-Access). 377 words, ~774 tokens.
Download SKILL.mdSave it as
.claude/skills/screen-reader-lab/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- screen-reader-lab
- description
- Simulate screen reader narration of HTML or JSX, step by step.
- license
- MIT
- disable-model-invocation
- true
- metadata.tier
- specialist
- metadata.domain
- web
- metadata.output
- guidance
- metadata.effort
- medium
- metadata.title
- Screen Reader Lab
Screen Reader Lab
You are a screen reader simulation agent. You parse HTML/JSX and produce a step-by-step narration of what a screen reader would announce, helping developers understand the accessible experience without needing a screen reader installed.
Important disclaimer: This is an educational simulation based on the ARIA specification and accessible name computation algorithm. Real screen reader behavior varies between NVDA, JAWS, VoiceOver, and Narrator. Always recommend real screen reader testing for production validation.
Simulation Modes
Mode 1: Reading Order (Default)
Walk the DOM in reading order (top to bottom, following aria-owns, skipping aria-hidden="true" and display: none). For each element, announce:
- Role — semantic role from element type or
roleattribute - Accessible name — computed via the Accessible Name Computation algorithm
- State —
aria-expanded,aria-checked,aria-disabled,aria-pressed, etc. - Description —
aria-describedbycontent if present
Mode 2: Tab Navigation
Simulate pressing Tab repeatedly. Only visit focusable elements in DOM order (respecting tabindex).
Mode 3: Heading Navigation (H Key)
List all headings in document order with their levels. Flag: skipped levels, missing H1, multiple H1s.
Mode 4: Form Navigation (F Key)
List all form controls with their labels. Flag: inputs without labels, missing required indicators.
Accessible Name Computation
Follow the algorithm from accname-1.2:
aria-labelledby— concatenate text of referenced elementsaria-label— use directly- Native label association —
<label for="id">, wrapping<label> - Element content — text content for
<button>,<a>, headings titleattribute — fallbackplaceholder— last resort (not recommended)
If no name is computed, annotate: [No accessible name — screen reader will announce role only or skip entirely]
Show full SKILL.md (120 more words)Show less
Process
Phase 1 — Input
Ask the user what to simulate (file path, code snippet) and which mode.
Phase 2 — Parse and Simulate
Read the file, parse HTML/JSX, build the accessibility tree, walk in selected mode.
Phase 3 — Findings
Report elements with no accessible name, ARIA issues, tab order problems, heading hierarchy issues, form labeling gaps, and recommended fixes.
Phase 4 — Follow-Up
Offer to run a different mode, simulate a different component, or delegate to aria-specialist or testing-coach.
Output contract
Answer the question. Keep the answer to what was asked, cite the criterion or API by name, and stop. Do not append a checklist that was not requested.
Shared rules, dispatch contract and schemas: skills/a11y-core/SKILL.md.
Authoritative specifications for this skill: skills/a11y-core/references/sources.md.
© Community-Access, 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 1 other file in skills/screen-reader-lab of Community-Access/accessibility-agents.
- SKILL.md
- agents/openai.yaml
Open the folder on GitHubat commit decf6ba
Compare with similar skills
Screen Reader Lab 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 |
|---|---|---|---|---|---|---|
| Screen Reader Lab this skillCommunity-Access/accessibility-agents | 423 | — | ~774 | Automated safety check: Pass | MIT | |
| Web Interface Guidelines Reviewervercel-labs/openreview | 1.7k | 97 repos | ~308 | Automated safety check: Pass | None | |
| Accessibility Reviewmarkmead/hyperui | 12k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| Accessibility Fixeribelick/ui-skills | 9.5k | 4 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Wcag Audit PatternsvmDeshpande/ai-agent-automation | 178 | 11 repos | ~610 | Automated safety check: Pass | Apache-2.0 |
Similar skills
- Official
Accessibility Review
markmead/hyperui
Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
Accessibility Fixer
ibelick/ui-skills
Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.
Wcag Audit Patterns
vmDeshpande/ai-agent-automation
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.
Baseline UI
ibelick/ui-skills
Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.
More from Community-Access/accessibility-agents
All 108 skills in this repoA11y Core
Community-Access/accessibility-agents
Shared contract for the Accessibility Agents skills - dispatch, findings schema, report rules.
Kb Web Scanning
Community-Access/accessibility-agents
Reference data, not a reviewer. An agent skill from Community-Access/accessibility-agents.
Accessibility Lead
Community-Access/accessibility-agents
Web UI accessibility lead. An agent skill from Community-Access/accessibility-agents.
Alt Text Headings
Community-Access/accessibility-agents
Alt text, SVGs, figures, charts, heading order, page titles and landmarks.
Aria Specialist
Community-Access/accessibility-agents
ARIA roles, states and properties for custom widgets and dynamic content.
Cognitive Accessibility
Community-Access/accessibility-agents
Plain language, WCAG 2.2 cognitive criteria, COGA guidance and auth UX.
Related
Categories
Questions about Screen Reader Lab
What does Screen Reader Lab do?
Simulate screen reader narration of HTML or JSX, step by step. Screen Reader Lab is an agent skill from Community-Access/accessibility-agents. Simulate screen reader narration of HTML or JSX, step by step.
When should I use Screen Reader Lab?
Screen Reader Lab fits situations like: tasks that involve Accessibility.
How do I install Screen Reader Lab in Claude Code?
Run `npx skills add Community-Access/accessibility-agents --skill screen-reader-lab -a claude-code`. Or copy the skill folder (skills/screen-reader-lab in Community-Access/accessibility-agents) into .claude/skills/screen-reader-lab in your project. Claude Code loads it when a task matches its description.
How do I install Screen Reader Lab in Codex?
Run `npx skills add Community-Access/accessibility-agents --skill screen-reader-lab -a codex`. Or copy the skill folder (skills/screen-reader-lab in Community-Access/accessibility-agents) into .agents/skills/screen-reader-lab in your project. Codex loads it when a task matches its description.
Can I use Screen Reader Lab 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 Community-Access/accessibility-agents --skill screen-reader-lab -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/screen-reader-lab, .gemini/skills/screen-reader-lab, .github/skills/screen-reader-lab and .opencode/skills/screen-reader-lab in your project.
What does Screen Reader Lab need to run?
SKILL.md names no scripts, command-line tools or credentials: Screen Reader Lab is instructions for the agent only.
Does Screen Reader Lab access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Screen Reader Lab 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. Review the folder before installing.
What licence does Screen Reader Lab use?
Screen Reader Lab 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 Screen Reader Lab use?
About 774 tokens (SKILL.md is roughly 3.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Screen Reader Lab?
Skills that share tags, products or a category with Screen Reader Lab: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Screen Reader Lab?
Community-Access (a GitHub organization) maintains it in Community-Access/accessibility-agents, which has 423 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on September 23, 2026.
Source: Community-Access/accessibility-agents on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.