A11y Audit

WCAG 2.2 AA/AAA audit med målte kontrastforhold og kriterie-refererede rettelser

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

Testet · Virker ★ 8.4/10

A11y Audit — WCAG 2.2 AA/AAA audit med målte kontrastforhold og kriterie-refererede rettelser

Hvad det gør

Auditerer en UI eller komponent mod WCAG 2.2 AA/AAA og WAI-ARIA mønstre, returnerer en fundtabel nøglet til specifikke succeskriterier med P0/P1/P2 alvorlighedsgrad og konkrete rettelser. Udløses, når brugeren beder om en tilgængelighedskontrol, kontrastverifikation eller tastatur-/skærmlæsergennemgang. Den læser en POUR-organiseret tjekliste og ARIA-reference og måler farvekontrast med et medfølgende script i stedet for at vurdere forholdene visuelt.

Testrapport

Hentede SKILL.md og stikprøvekontrollerede 6 refererede stier via rå hentning — alle HTTP 200; wcag-checklist.md og aria-patterns.md er væsentlige reelle referencer (POUR-organiseret kriterietabel, ARIA APG tastaturkort). Kørte scripts/contrast.py (ren python3, ingen afhængigheder): #767676/#fff = 4.54:1 PASS, #999/#fff = 2.85:1 FAIL, exitkoder korrekte. Til outputtesten skrev jeg et 6-elementers card.html og auditerede det på to måder: en baseline visuel audit vs. færdighedens indhold, som kræver kørsel af contrast.py per par. Målte forhold vendte to visuelle bedømmelser — det blå link #5b8def ser fint ud, men måler 3.23:1 (FAIL 1.4.3), og det røde badge #d32f2f ser svagt ud, men måler 4.98:1 (PASS); #8a8a8a overskrift = 3.45:1 og #a0a0a0 tekst = 2.61:1 begge FAIL. Ingen sikkerhedsbrister (ingen curl|sh, base64, eval). Friktion: færdighedsmappen indeholder kun SKILL.md og afhænger af repo-root søskendefiler/scripts, så en standalone kopi af færdighedsmappen bryder dens trin — fuld pakkeinstallation nødvendig.

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

Installation

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

Kommandoer og eksempelprompter

  • /a11y-auditWCAG 2.2 AA/AAA audit med målte kontrastforhold og kriterie-refererede rettelser

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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