Accessibility Compliance
WCAG 2.2 AA gennemgang af websider: alt-tekst, kontrastberegning, diagram- og formmønstre
Testet · Virker
Hvad det gør
Omdanner en tilgængelighedsanmodning til en WCAG 2.2 AA-gennemgang af markup: en POUR-tjekliste, et WHO/WHAT/WHERE alt-tekst beslutningstræ, et tilgængeligt diagrammønster med en linket datatabel, formularfelter med aria-describedby og role="alert", prefers-reduced-motion håndtering og en kørbar kontrastforholdsfunktion. Udløses, når du beder om at auditere et site eller en skabelon for WCAG-overholdelse, skrive alt-tekst til billeder, gøre en datavisualisering eller formular skærmlæser-brugbar, eller kontrollere farvekontrast. Inkluderer tjeklister for billedtekster og lydbeskrivelser, Paul Tol farveblind-sikre paletter, en fastgjort axe-core plus Playwright audit-opskrift, og nuværende amerikanske og EU-juridiske deadlines.
Testrapport
Klonede til en midlertidig HOME (export HOME=$(mktemp -d)) og kopierede færdighedsmappen; SKILL.md landede på ~/.claude/skills/accessibility-compliance/SKILL.md, frontmatter har name+description, og kroppen refererer ikke til repo-filer (de tre "Related skills" eksisterer alle i træet; SKILL.md, dev-toolkit/README.md og plugin.json returnerede alle HTTP 200). Opgave: gennemgå et 30-linjers nyhedsartikel HTML-fragment (dårlig alt-tekst, diagram som PNG, uetiketteret e-mailfelt, div som knap på 20x20px, autoplay video, a:focus{outline:none}, tre lavkontrastfarver) og producere en rettet version. Baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) fik semantik, etiketter og en rigtig knap, men skrev "contrast looks too light, should be checked" og "only 20x20px, hard to hit"; færdighedskørslen (8.8KB, a11y_skill.md) citerede WCAG 2.2 SC 2.5.8 med 24x24 CSS-px tærsklen, og jeg udførte faktisk færdighedens validate_contrast() for at få 2.79:1 / 3.14:1 / 3.12:1 FAIL og 6.29:1 / 6.54:1 PASS for erstatningerne. Færdighedsversionen tilføjede også <details> datatabellen plus aria-labelledby/describedby for diagrammet (baseline skrev kun en enkeltlinjes alt), en prefers-reduced-motion blok og JS-gate, som baselinen helt missede, caption/description <track> elementer, og :focus-visible i stedet for baselinens stumpe :focus. Sikkerhedsscanning ren: ingen curl|sh, ingen base64, ingen hemmeligheder, npm dep fastgjort til en nøjagtig version, som jeg bekræftede eksisterer og er den nuværende seneste på npm-registret, og filen fortæller dig eksplicit at indlæse axe fra den lokale node_modules i stedet for en CDN. Docs fratrukket et point: beskrivelsen er journalistisk-indrammet og kalder sig selv "essential", og data-journalism i "Related skills" leveres i et andet plugin end dette.
Testet: 2026-07-31 · Claude Code 2.x (agent harness)
Installation
git clone --depth 1 https://github.com/jamditis/claude-skills-journalism.git /tmp/accessibility-compliance-src mkdir -p ~/.claude/skills cp -R /tmp/accessibility-compliance-src/dev-toolkit/skills/accessibility-compliance ~/.claude/skills/accessibility-compliance # Single self-contained SKILL.md (20KB), no bundled scripts or reference files. # No dependencies needed for the review/markup guidance itself. # Optional, only for the automated-audit section of the skill: # npm install --save-dev --save-exact axe-core@4.12.1 && npm ci # pip install playwright && playwright install chromium # Plugin-marketplace alternative: the repo ships .claude-plugin/marketplace.json and the # skill lives in the "dev-toolkit" plugin, which also bundles 9 other dev skills.
Kommandoer og eksempelprompter
/accessibility-complianceWCAG 2.2 AA gennemgang af websider: alt-tekst, kontrastberegning, diagram- og formmønstre
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
Audit this news site for WCAG complianceWrite alt text for these news imagesBuild an accessible data visualization for readers