Accessibility Compliance

Przegląd stron internetowych pod kątem WCAG 2.2 AA: tekst alternatywny, obliczenia kontrastu, wzorce wykresów i formularzy

Autor: jamditis · jamditis/claude-skills-journalism

Testowano · Działa ★ 8.8/10

Accessibility Compliance — Przegląd stron internetowych pod kątem WCAG 2.2 AA: tekst alternatywny, obliczenia kontrastu, wzorce wykresów i formularzy

Co robi ten skill

Przekształca żądanie dostępności w przejście WCAG 2.2 AA przez znacznik: lista kontrolna POUR, drzewo decyzyjne tekstu alternatywnego WHO/WHAT/WHERE, dostępny wzorzec wykresu z połączoną tabelą danych, pola formularzy z aria-describedby i role="alert", obsługa prefers-reduced-motion oraz uruchamialna funkcja contrast-ratio. Uruchamia się, gdy poprosisz o audyt witryny lub szablonu pod kątem zgodności z WCAG, napisanie tekstu alternatywnego dla obrazów, uczynienie wizualizacji danych lub formularza użytecznym dla czytnika ekranu, lub sprawdzenie kontrastu kolorów. Zawiera listy kontrolne napisów i opisów audio, palety Paul Tol bezpieczne dla osób z daltonizmem, przypięty axe-core plus przepis na audyt Playwright oraz aktualne terminy prawne w USA i UE.

Raport z testu

Sklonowano do tymczasowego HOME (export HOME=$(mktemp -d)) i skopiowano katalog umiejętności; SKILL.md wylądował w ~/.claude/skills/accessibility-compliance/SKILL.md, frontmatter zawiera name+description, a treść nie odwołuje się do żadnych plików repozytorium (wszystkie trzy "Related skills" istnieją w drzewie; SKILL.md, dev-toolkit/README.md i plugin.json zwróciły HTTP 200). Zadanie: przegląd 30-liniowego fragmentu HTML artykułu informacyjnego (zły tekst alternatywny, wykres jako PNG, nieoznaczone pole e-mail, div jako przycisk 20x20px, automatyczne odtwarzanie wideo, a:focus{outline:none}, trzy kolory o niskim kontraście) i stworzenie poprawionej wersji. Linia bazowa (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) uzyskała semantykę, etykiety i prawdziwy przycisk, ale napisała "contrast looks too light, should be checked" i "only 20x20px, hard to hit"; uruchomienie umiejętności (8.8KB, a11y_skill.md) cytowało WCAG 2.2 SC 2.5.8 z progiem 24x24 CSS-px, a ja faktycznie wykonałem validate_contrast() umiejętności, aby uzyskać 2.79:1 / 3.14:1 / 3.12:1 FAIL i 6.29:1 / 6.54:1 PASS dla zamienników. Wersja umiejętności dodała również tabelę danych <details> plus aria-labelledby/describedby dla wykresu (linia bazowa po prostu napisała jednoliniowy alt), blok prefers-reduced-motion i bramkę JS, którą linia bazowa całkowicie pominęła, elementy <track> napisów/opisów oraz :focus-visible zamiast tępego :focus linii bazowej. Skan bezpieczeństwa czysty: brak curl|sh, brak base64, brak sekretów, zależność npm przypięta do dokładnej wersji, którą potwierdziłem, że istnieje i jest aktualnie najnowszą w rejestrze npm, a plik wyraźnie mówi, aby ładować axe z lokalnego node_modules, a nie z CDN. Dokumentacja straciła jeden punkt: opis jest sformułowany dziennikarsko i nazywa się "essential", a data-journalism w "Related skills" jest dostarczane w innej wtyczce niż ta.

Testowano: 2026-07-31 · Claude Code 2.x (agent harness)

Instalacja

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.

Komendy i przykładowe prompty

/accessibility-compliancePrzegląd stron internetowych pod kątem WCAG 2.2 AA: tekst alternatywny, obliczenia kontrastu, wzorce wykresów i formularzy

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

Audit this news site for WCAG compliance
Write alt text for these news images
Build an accessible data visualization for readers

Pełny raport →