How do I install the A11Y Audit skill?

Run npx skillmds@latest add build-with-dhiraj/a11y-audit in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is A11Y Audit safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with A11Y Audit?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is A11Y Audit free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published A11Y Audit?

build-with-dhiraj (@build-with-dhiraj) published this skill. Their other Agent Skills are listed on their SkillMD profile.

A11Y Audit by build-with-dhiraj — Agent Skill

Name: A11Y Audit
Author: build-with-dhiraj

A11Y Audit

Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.

File contents

Skill: Accessibility Audit

Evaluate against WCAG 2.2 and the project's ARIA patterns.

Steps

Read accessibility/wcag-checklist.md (POUR-organized, P0/P1/P2) and accessibility/aria-patterns.md.
Check the mandatory P0 set per component: keyboard navigable, focus visible (≥3:1), screen-reader name/role/state, contrast (4.5:1 text / 3:1 UI), target size ≥24×24, no color-only signaling.
Verify WCAG 2.2 additions: Focus Not Obscured (2.4.11), Target Size (2.5.8), Accessible Authentication (3.3.8).
Contrast — measure, don't eyeball. For rendered HTML, RUN the real-render gates and report their actual output (KIT-PROTOCOL.md → Verification Protocol): node scripts/measure_render.mjs <file> [--dark] (every text element) AND node scripts/verify_states.mjs <file> [--dark] (every interactive element in default/hover/focus — catches hover-state failures). For loose color pairs, python3 scripts/contrast.py "<fg>" "<bg>". Never state a ratio you did not measure.
Check reduced-motion handling (taste/motion-choreography.md).

Output

A findings table: WCAG criterion (e.g. 1.4.3) · severity (P0/P1/P2) · what fails · specific fix. Confirm passes explicitly. Accessibility may never be traded for aesthetics.

Frequently asked questions