Agent skill

WCAG 2.1 AA Accessibility Review

by getcrew44 in getcrew44/crew44

Audits a design or page against WCAG 2.1 AA for contrast, keyboard use, focus, labels, touch targets and screen reader behavior, with a severity-ranked report.

MITAuto-check passedFrontend & Design

Install WCAG 2.1 AA Accessibility Review

skills CLI
$ npx skills add getcrew44/crew44 --skill accessibility-review -a claude-code

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

GitHub CLI
$ gh skill install getcrew44/crew44 accessibility-review --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/getcrew44/crew44.git skills-src && mkdir -p .claude/skills && cp -r skills-src/daemon/internal/presets/defaultcrew/skills/designer/accessibility-review .claude/skills/accessibility-review && 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-review
GitHub stars
356
Token cost
~741 tokens
SKILL.md length
379 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

Audits a design or page against WCAG 2.1 AA for contrast, keyboard use, focus, labels, touch targets and screen reader behavior, with a severity-ranked report.

  • Works in 8 steps: Insufficient color contrast — especially… → Form fields with placeholder-as-label… → Click targets under 44×44. → …
  • Auditing a page or design mockup for WCAG 2.1 AA before handoff
  • SKILL.md covers WCAG 2.1 AA quick reference, Common issues to look for first, Testing approach and Output, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

This skill audits a design or a page against WCAG 2.1 AA, aiming to catch accessibility blockers before they reach engineering. It carries a quick reference of success criteria under the four WCAG principles of perceivable, operable, understandable and one covering compatibility with assistive technology: text alternatives, semantic structure, contrast of at least 4.5 to 1 for body text and 3 to 1 for large text and UI components, keyboard access, logical focus order, visible focus indicators, touch targets of at least 44 by 44 CSS pixels, clear error messages, visible labels, and names and roles exposed to assistive technology.

It lists the issues to check first: low contrast, placeholder-as-label fields, small click targets, removed focus outlines, badly trapped focus in modals, color as the only signal, icon-only buttons without names and auto-playing media. The test approach runs an automated contrast and structure scan, a keyboard-only walkthrough, a screen reader pass with VoiceOver or NVDA and a check at 200% zoom.

The report gives a summary with counts by severity, findings grouped by WCAG principle with element, issue, criterion, severity and fix, a contrast table, a keyboard walkthrough note and the top three priority fixes, each saying who it blocks and what it unblocks.

When your agent uses it

  • Auditing a page or design mockup for WCAG 2.1 AA before handoff
  • Checking color contrast of text and UI components
  • Walking a screen by keyboard to find unreachable controls
  • Reviewing forms for labels, error messages and screen reader names

Example prompts

  • “Audit our signup page for WCAG 2.1 AA and group the findings by principle.”
  • “Check the contrast of the body text and buttons in this design and give me a table.”
  • “Do a keyboard-only walkthrough of the checkout flow and list anything I can't reach or escape.”
  • “Which three accessibility fixes should we prioritize on the dashboard?”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. Insufficient color contrast — especially gray-on-white body text and brand-color CTAs.
  2. Form fields with placeholder-as-label (placeholder disappears on focus).
  3. Click targets under 44×44.
  4. Focus indicators removed in CSS without a replacement.
  5. Modals that trap focus incorrectly (or don't trap at all).
  6. Color used as the only signal (red text alone for errors, green-only success).
  7. Icon-only buttons with no accessible name.
  8. Auto-playing media with no pause control.

What it can do on your machine

Read from SKILL.md and the folder at commit cfcf1e7. 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

WCAG 2.1 AA Accessibility Review loads about 741 tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 379 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~36
When it runs · the whole SKILL.md, loaded when a task matches
~741

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 getcrew44/crew44 at commit cfcf1e7, republished under its MIT licence (© getcrew44). 379 words, ~741 tokens.

Download SKILL.mdSave it as .claude/skills/accessibility-review/SKILL.md (or your agent's skills folder).
name
accessibility-review
description
Use to audit a design or page for WCAG 2.1 AA — contrast, keyboard, focus, labels, touch targets, screen reader behavior.

Accessibility Review

Catch the issues that block users before they reach engineering. Most accessibility failures are predictable from the design alone.

WCAG 2.1 AA quick reference

Perceivable

  • 1.1.1 — Non-text content has alt text.
  • 1.3.1 — Structure and meaning conveyed semantically, not visually.
  • 1.4.3 — Contrast ≥ 4.5:1 for body text, ≥ 3:1 for large text (18px+).
  • 1.4.11 — Non-text contrast ≥ 3:1 for UI components and meaningful graphics.

Operable

  • 2.1.1 — All functionality available by keyboard.
  • 2.4.3 — Logical focus order matches the visible reading order.
  • 2.4.7 — Focus indicator is visible and not hidden by outline: none.
  • 2.5.5 — Touch target ≥ 44×44 CSS pixels.

Understandable

  • 3.2.1 — Predictable on focus; no unexpected context changes.
  • 3.3.1 — Errors are identified clearly and tied to the failing field.
  • 3.3.2 — Inputs have visible labels or instructions, not just placeholders.

Robust

  • 4.1.2 — Every interactive control has a name, role, and value exposed to assistive tech.

Common issues to look for first

  1. Insufficient color contrast — especially gray-on-white body text and brand-color CTAs.
  2. Form fields with placeholder-as-label (placeholder disappears on focus).
  3. Click targets under 44×44.
  4. Focus indicators removed in CSS without a replacement.
  5. Modals that trap focus incorrectly (or don't trap at all).
  6. Color used as the only signal (red text alone for errors, green-only success).
  7. Icon-only buttons with no accessible name.
  8. Auto-playing media with no pause control.
Show full SKILL.md (160 more words)Show less

Testing approach

  • Automated contrast and structure scan first (catches the easy wins).
  • Walk the screen by keyboard only. Tab, Shift+Tab, Enter, Space, Escape, arrow keys.
  • Screen reader pass (VoiceOver or NVDA). Listen to how each element announces.
  • Zoom to 200%. Does the layout break? Does anything become unreachable?

Output

  • Summary — total issues, count by severity (critical / major / minor).
  • Findings — grouped by WCAG principle (Perceivable / Operable / Understandable / Robust). Each finding: element, issue, WCAG criterion, severity, recommended fix.
  • Color contrast check — table of body text, secondary text, UI elements, with foreground/background/ratio/pass.
  • Keyboard walkthrough — note any element that cannot be reached, activated, or escaped via keyboard.
  • Priority fixes — top three, each named with who it blocks and what it unblocks.

Anti-patterns

  • Treating accessibility as a final polish pass instead of a design constraint.
  • Citing the WCAG number without explaining the user impact.
  • Generic "improve contrast" — name the specific element, the current ratio, the required ratio.
  • Ignoring screen reader experience because the visual passes.

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

Files

Just SKILL.md in daemon/internal/presets/defaultcrew/skills/designer/accessibility-review of getcrew44/crew44.

Open the folder on GitHubat commit cfcf1e7

Compare with similar skills

WCAG 2.1 AA Accessibility Review 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.

WCAG 2.1 AA Accessibility Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
WCAG 2.1 AA Accessibility Review this skillgetcrew44/crew44356—~741Automated safety check: PassMIT
Web Interface Guidelines Reviewtech-leads-club/agent-skills7k—~509Automated safety check: PassCustom licence
UI Reviewespennilsen/pi122—~1.4kAutomated safety check: PassMIT
Design Reviewpproenca/dot-skills215—~3.4kAutomated safety check: PassMIT
UI Design ReviewMadAppGang/claude-code285—~2kAutomated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone

Similar skills

  • Web Interface Guidelines Review

    tech-leads-club/agent-skills

    Reviews UI code against a written set of web interface rules covering accessibility, forms, animation and typography, and reports terse file:line findings.

    7k GitHub stars~509 tokensUpdated today
    Frontend & DesignAuto-check passed
  • UI Review

    espennilsen/pi

    Review UI designs and implementations for accessibility, consistency, usability, and visual quality.

    122 GitHub stars~1.4k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed
  • Design Review

    pproenca/dot-skills

    Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table.

    215 GitHub stars~3.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed
  • UI Design Review

    MadAppGang/claude-code

    Prompting patterns and review templates for UI design analysis with Gemini multimodal capabilities.

    285 GitHub stars~2k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed
  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed
  • 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.

    9.5k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from getcrew44/crew44

All 9 skills in this repo
  • Drafts a clear, empathetic end-of-life announcement for a product, feature or plan, covering rationale, customer impact, transition support, timeline and next steps.

    356 GitHub stars~3.1k tokensUpdated 4 mo ago
    Auto-check passed
  • Session Skill Mining

    getcrew44/crew44

    Reviews past Codex or Claude Code sessions from a time range you choose and proposes skills to codify and memories to pin, as a summary plus structured JSON.

    356 GitHub stars~5.3k tokensUpdated 4 mo ago
    Auto-check passed
  • Design Critique

    getcrew44/crew44

    Walks an agent through five review passes on a screen, flow or mockup, then returns ranked findings with a severity and a suggested fix for each one.

    356 GitHub stars~691 tokensUpdated 4 mo ago
    Auto-check passed
  • Design Handoff Spec

    getcrew44/crew44

    Produces an implementation-ready spec from a finished design, covering layout, tokens, states, responsive behavior, edge cases, motion and accessibility, so engineers do not have to guess.

    356 GitHub stars~680 tokensUpdated 4 mo ago
    Auto-check passed
  • Interaction Review

    getcrew44/crew44

    A skill your agent uses to evaluate or design a user interaction flow — states, edge cases, microinteractions, motion, and feedback patterns.

    356 GitHub stars~586 tokensUpdated 4 mo ago
    Auto-check passed
  • UX Copy

    getcrew44/crew44

    A skill your agent uses to write or review microcopy — CTAs, error messages, empty states, confirmation dialogs, tooltips, onboarding text.

    356 GitHub stars~783 tokensUpdated 4 mo ago
    Auto-check passed

Questions about WCAG 2.1 AA Accessibility Review

What does WCAG 2.1 AA Accessibility Review do?

Audits a design or page against WCAG 2.1 AA for contrast, keyboard use, focus, labels, touch targets and screen reader behavior, with a severity-ranked report. 1 AA, aiming to catch accessibility blockers before they reach engineering.5 to 1 for body text and 3 to 1 for large text and UI components, keyboard access, logical focus order, visible focus indicators, touch targets of at least 44 by 44 CSS pixels, clear error messages, visible labels, and names and roles exposed to assistive technology.

When should I use WCAG 2.1 AA Accessibility Review?

WCAG 2.1 AA Accessibility Review fits situations like: auditing a page or design mockup for WCAG 2.1 AA before handoff; checking color contrast of text and UI components; walking a screen by keyboard to find unreachable controls; reviewing forms for labels, error messages and screen reader names.

How do I install WCAG 2.1 AA Accessibility Review in Claude Code?

Run `npx skills add getcrew44/crew44 --skill accessibility-review -a claude-code`. Or copy the skill folder (daemon/internal/presets/defaultcrew/skills/designer/accessibility-review in getcrew44/crew44) into .claude/skills/accessibility-review in your project. Claude Code loads it when a task matches its description.

How do I install WCAG 2.1 AA Accessibility Review in Codex?

Run `npx skills add getcrew44/crew44 --skill accessibility-review -a codex`. Or copy the skill folder (daemon/internal/presets/defaultcrew/skills/designer/accessibility-review in getcrew44/crew44) into .agents/skills/accessibility-review in your project. Codex loads it when a task matches its description.

Can I use WCAG 2.1 AA Accessibility Review 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 getcrew44/crew44 --skill accessibility-review -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-review, .gemini/skills/accessibility-review, .github/skills/accessibility-review and .opencode/skills/accessibility-review in your project.

What does WCAG 2.1 AA Accessibility Review need to run?

SKILL.md names no scripts, command-line tools or credentials: WCAG 2.1 AA Accessibility Review is instructions for the agent only.

Does WCAG 2.1 AA Accessibility Review 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 WCAG 2.1 AA Accessibility Review 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 WCAG 2.1 AA Accessibility Review use?

WCAG 2.1 AA Accessibility Review is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does WCAG 2.1 AA Accessibility Review use?

About 741 tokens (SKILL.md is roughly 3k 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 WCAG 2.1 AA Accessibility Review?

Skills that share tags, products or a category with WCAG 2.1 AA Accessibility Review: Web Interface Guidelines Review (tech-leads-club/agent-skills, 7k stars), UI Review (espennilsen/pi, 122 stars), Design Review (pproenca/dot-skills, 215 stars) and UI Design Review (MadAppGang/claude-code, 285 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains WCAG 2.1 AA Accessibility Review?

getcrew44 (a GitHub organization) maintains it in getcrew44/crew44, which has 356 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on June 11, 2026.

Source: getcrew44/crew44 on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.