Accessibility Compliance

Revisión WCAG 2.2 AA de páginas web: texto alternativo, cálculo de contraste, patrones de gráficos y formularios

Por jamditis · jamditis/claude-skills-journalism

Probado · Funciona ★ 8.8/10

Accessibility Compliance — Revisión WCAG 2.2 AA de páginas web: texto alternativo, cálculo de contraste, patrones de gráficos y formularios

Qué hace

Convierte una solicitud de accesibilidad en un pase WCAG 2.2 AA sobre el marcado: una lista de verificación POUR, un árbol de decisión de texto alternativo WHO/WHAT/WHERE, un patrón de gráfico accesible con una tabla de datos vinculada, campos de formulario con aria-describedby y role="alert", manejo de prefers-reduced-motion, y una función de relación de contraste ejecutable. Se activa cuando se le pide que audite un sitio o plantilla para el cumplimiento de WCAG, escriba texto alternativo para imágenes, haga una visualización de datos o un formulario utilizable por lectores de pantalla, o verifique el contraste de color. Incluye listas de verificación de subtítulos y audiodescripciones, paletas Paul Tol seguras para daltónicos, una receta de auditoría axe-core más Playwright, y los plazos legales actuales de EE. UU. y la UE.

Informe de la prueba

Clonado en un HOME temporal (export HOME=$(mktemp -d)) y copiado el directorio de la habilidad; SKILL.md aterrizó en ~/.claude/skills/accessibility-compliance/SKILL.md, el frontmatter tiene name+description, y el cuerpo no referencia archivos del repositorio (las tres "Related skills" existen en el árbol; SKILL.md, dev-toolkit/README.md y plugin.json devolvieron HTTP 200). Tarea: revisar un fragmento HTML de artículo de noticias de 30 líneas (texto alternativo incorrecto, gráfico como PNG, campo de correo electrónico sin etiqueta, div-como-botón de 20x20px, video de reproducción automática, a:focus{outline:none}, tres colores de bajo contraste) y producir una versión corregida. La línea base (2.6KB, /private/tmp/claude-501/-Users-afin-Desktop-Skill-Agregator/94648f54-e301-46fc-afd8-b98858a51ecf/scratchpad/a11y_baseline.md) obtuvo semántica, etiquetas y un botón real, pero escribió "contrast looks too light, should be checked" y "only 20x20px, hard to hit"; la ejecución de la habilidad (8.8KB, a11y_skill.md) citó WCAG 2.2 SC 2.5.8 con el umbral CSS-px de 24x24, y realmente ejecuté validate_contrast() de la habilidad para obtener 2.79:1 / 3.14:1 / 3.12:1 FAIL y 6.29:1 / 6.54:1 PASS para los reemplazos. La versión de la habilidad también añadió la tabla de datos <details> más aria-labelledby/describedby para el gráfico (la línea base solo escribió un alt de una línea), un bloque prefers-reduced-motion y una puerta JS que la línea base omitió por completo, elementos <track> de subtítulos/descripción, y :focus-visible en lugar del contundente :focus de la línea base. Escaneo de seguridad limpio: sin curl|sh, sin base64, sin secretos, dependencia npm fijada a una versión exacta que confirmé que existe y es la última actual en el registro npm, y el archivo te dice explícitamente que cargues axe desde el node_modules local en lugar de un CDN. La documentación perdió un punto: la descripción está enmarcada periodísticamente y se autodenomina "essential", y data-journalism en "Related skills" se envía en un plugin diferente a este.

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

Instalación

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.

Comandos y prompts de ejemplo

/accessibility-complianceRevisión WCAG 2.2 AA de páginas web: texto alternativo, cálculo de contraste, patrones de gráficos y formularios

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →