Accessibility Compliance
WCAG 2.2 AA revize webových stránek: alt text, výpočet kontrastu, vzory grafů a formulářů
Otestováno · Funguje
Co umí
Přemění požadavek na přístupnost na WCAG 2.2 AA průchod přes značkování: kontrolní seznam POUR, rozhodovací strom alt-textu WHO/WHAT/WHERE, přístupný vzor grafu s propojenou datovou tabulkou, formulářová pole s aria-describedby a role="alert", zpracování prefers-reduced-motion a spustitelnou funkci pro poměr kontrastu. Spouští se, když požádáte o audit webu nebo šablony pro shodu s WCAG, napíšete alt text pro obrázky, zpřístupníte datovou vizualizaci nebo formulář pro čtečky obrazovky, nebo zkontrolujete barevný kontrast. Zahrnuje kontrolní seznamy pro titulky a zvukové popisy, palety Paul Tol bezpečné pro barvoslepost, připnutý axe-core plus recept na audit Playwright a aktuální právní termíny v USA a EU.
Testovací report
Klonováno do dočasného HOME (export HOME=$(mktemp -d)) a zkopírován adresář dovednosti; SKILL.md se umístil na ~/.claude/skills/accessibility-compliance/SKILL.md, frontmatter má name+description, a tělo neodkazuje na žádné soubory repozitáře (všechny tři "Related skills" existují ve stromu; SKILL.md, dev-toolkit/README.md a plugin.json všechny vrátily HTTP 200). Úkol: zkontrolovat 30řádkový HTML fragment novinového článku (špatný alt text, graf jako PNG, neoznačené pole pro e-mail, div jako tlačítko 20x20px, autoplay video, a:focus{outline:none}, tři barvy s nízkým kontrastem) a vytvořit opravenou verzi. Baseline (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) získal sémantiku, štítky a skutečné tlačítko, ale napsal "contrast looks too light, should be checked" a "only 20x20px, hard to hit"; spuštění dovednosti (8.8KB, a11y_skill.md) citovalo WCAG 2.2 SC 2.5.8 s prahovou hodnotou 24x24 CSS-px, a já jsem skutečně spustil validate_contrast() dovednosti, abych získal 2.79:1 / 3.14:1 / 3.12:1 FAIL a 6.29:1 / 6.54:1 PASS pro náhrady. Verze dovednosti také přidala datovou tabulku <details> plus aria-labelledby/describedby pro graf (baseline jen napsal jednořádkový alt), blok prefers-reduced-motion a JS bránu, kterou baseline zcela minul, prvky <track> pro titulky/popis a :focus-visible namísto tupého :focus baseline. Bezpečnostní sken čistý: žádné curl|sh, žádné base64, žádné tajemství, npm závislost připnutá na přesnou verzi, kterou jsem potvrdil, že existuje a je aktuálně nejnovější v registru npm, a soubor explicitně říká, že máte načíst axe z lokálních node_modules spíše než z CDN. Dokumentace ztratila jeden bod: popis je novinářsky formulovaný a nazývá se "essential", a data-journalism v "Related skills" je dodáván v jiném pluginu než tento.
Testováno: 2026-07-31 · Claude Code 2.x (agent harness)
Instalace
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.
Příkazy a ukázkové prompty
/accessibility-complianceWCAG 2.2 AA revize webových stránek: alt text, výpočet kontrastu, vzory grafů a formulářů
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
Audit this news site for WCAG complianceWrite alt text for these news imagesBuild an accessible data visualization for readers