A11y Audit

WCAG 2.2 AA/AAA audit met gemeten contrastverhoudingen en criterium-gerefereerde fixes

Door plugin87 · plugin87/ux-ui-agent-skills

Getest · Werkt ★ 8.4/10

A11y Audit — WCAG 2.2 AA/AAA audit met gemeten contrastverhoudingen en criterium-gerefereerde fixes

Wat het doet

Audit een UI of component tegen WCAG 2.2 AA/AAA en WAI-ARIA-patronen, retourneert een bevindingentabel gekoppeld aan specifieke succescriteria met P0/P1/P2-ernst en concrete fixes. Wordt geactiveerd wanneer de gebruiker vraagt om een toegankelijkheidscontrole, contrastverificatie of toetsenbord-/schermlezerreview. Het leest een POUR-georganiseerde checklist en ARIA-referentie en meet kleurcontrast met een gebundeld script in plaats van verhoudingen met het oog te beoordelen.

Testrapport

SKILL.md opgehaald en 6 gerefereerde paden gecontroleerd via raw fetch — allemaal HTTP 200; wcag-checklist.md en aria-patterns.md zijn substantiële echte referenties (POUR-georganiseerde criteriatabel, ARIA APG toetsenbordkaarten). scripts/contrast.py uitgevoerd (pure python3, geen afhankelijkheden): #767676/#fff = 4.54:1 PASS, #999/#fff = 2.85:1 FAIL, exit codes correct. Voor de outputtest heb ik een 6-elementen card.html geschreven en deze op twee manieren geaudit: een baseline eyeball audit versus de skill-body, die het uitvoeren van contrast.py per paar verplicht stelt. Gemeten verhoudingen keerden twee eyeball-oordelen om — de blauwe link #5b8def ziet er goed uit maar meet 3.23:1 (FAIL 1.4.3) en de rode badge #d32f2f ziet er zwak uit maar meet 4.98:1 (PASS); #8a8a8a heading = 3.45:1 en #a0a0a0 text = 2.61:1 beide FAIL. Geen beveiligingsrisico's (geen curl|sh, base64, eval). Frictie: skill-map bundelt alleen SKILL.md en is afhankelijk van repo-root sibling-bestanden/scripts, dus een standalone skill-dir-kopie verbreekt de stappen — volledige pakketinstallatie nodig.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

git clone --depth 1 https://github.com/plugin87/ux-ui-agent-skills.git /tmp/a11y-audit-src
mkdir -p ~/.claude/skills
cp -R /tmp/a11y-audit-src/.claude/skills/a11y-audit ~/.claude/skills/a11y-audit
# IMPORTANT: the skill dir holds only SKILL.md. Its steps read repo-root sibling files
#   accessibility/wcag-checklist.md, accessibility/aria-patterns.md, taste/motion-choreography.md
#   and run scripts/contrast.py, scripts/measure_render.mjs, scripts/verify_states.mjs
# — all relative to the repo root, NOT bundled with the skill. For full function, install the
# whole package into your project: npx ux-ui-agent-skills  (installs accessibility/ + scripts/ too).
# scripts/contrast.py = pure python3, no deps. measure_render.mjs/verify_states.mjs need:
#   npm i -D playwright   (without it they SKIP with exit 0, they do not error).

Commando's en voorbeeldprompts

/a11y-auditWCAG 2.2 AA/AAA audit met gemeten contrastverhoudingen en criterium-gerefereerde fixes

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Audit this page for WCAG 2.2 AA compliance
Check the contrast ratios on this design
Review this component for screen-reader support

Volledig rapport (Engels) →