accessibility-compliancepor Seth Hobson

Accessibility Compliance Skill.

Una skill para Claude Code y Codex para revisión de diseño: interfaces conformes a WCAG 2.2 con accesibilidad móvil y soporte para tecnologías de asistencia.

Revisión de Diseño y Accesibilidad
Código UI

Descargar OpenDesign Ver guía de uso

wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md

--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools

Encabezado y títulos de sección leídos del archivo fuente el 14/09/2026 · 2402 caracteres en total

01 Qué hace

Qué hace el skill accessibility-compliance en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Este skill implementa interfaces conformes con WCAG 2.2, con accesibilidad móvil y compatibilidad con tecnologías de asistencia. Guía a los agentes por HTML semántico, patrones ARIA, navegación por teclado, gestión del foco, compatibilidad con lectores de pantalla y anuncios de contenido dinámico. El skill abarca VoiceOver de iOS, TalkBack de Android y lectores de pantalla de escritorio (NVDA, JAWS).

Prioriza los elementos nativos frente a los ARIA personalizados, respeta las preferencias del usuario como prefers-reduced-motion y prefers-contrast, y se prueba con herramientas automatizadas (axe DevTools, WAVE, Lighthouse) y tecnologías de asistencia reales. El skill aborda las infracciones más comunes, como la falta de texto alternativo, el contraste insuficiente, las trampas de teclado y los campos de formulario sin etiqueta.

Qué produce

Interfaces conformes con WCAG 2.2, con patrones ARIA correctos, gestión del foco y compatibilidad con lectores de pantalla

Ver el ejemplo de prompt ↗

Cómo funciona

01
Diseñar interacciones con el teclado como prioridad
Asegúrese de que todos los componentes interactivos funcionen sin ratón, estableciendo la navegación por teclado antes de añadir eventos de puntero.

02 Encuentra tu caso de uso

Cuándo usar el Skill accessibility-compliance

Usa el skill accessibility-compliance en Claude Code o Codex cuando el trabajo sea revisión de diseño de este tipo. Alcance y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

Implementar la conformidad con WCAG 2.2 nivel AA o AAA en una aplicación o un sitio web
Crear interfaces accesibles para lectores de pantalla compatibles con VoiceOver, NVDA, JAWS o TalkBack
Añadir navegación por teclado y gestión del foco a los componentes interactivos
Realizar auditorías de accesibilidad y corregir las infracciones en interfaces existentes
Admitir las preferencias de movimiento reducido y alto contraste del usuario en la interfaz

03 Dentro del skill

Lo que el Skill accessibility-compliance aporta a la revisión de diseño

2 cosas que el SKILL.md instruye a Claude Code o Codex a hacer, en el orden de sección del propio archivo.

Mejores prácticas
Preferir elementos nativos sobre ARIA cuando sea posible; Incluir personas con discapacidad en las pruebas de usuario; Diseñar interacciones que funcionen sin ratón
Herramientas de prueba
axe DevTools, WAVE, Lighthouse; VoiceOver (macOS/iOS), NVDA/JAWS (Windows), TalkBack (Android); NoCoffee (visión), Silktide (varias discapacidades)

04 Ponlo a trabajar

Instalar accessibility-compliance en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir accessibility-compliance a Claude Code, Codex o su agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

Forma genérica del CLI skills para plugins/ui-design/skills/accessibility-compliance/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Pruebe manualmente con VoiceOver en macOS o iOS para verificar los anuncios y la navegación del lector de pantalla
Utilice simuladores de visión como NoCoffee y simuladores de discapacidad como Silktide para probar distintas deficiencias

En OpenDesign, importe accessibility-compliance desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Seth Hobson
Repository: github.com/wshobson/agents Rama main
Archivo de skill: plugins/ui-design/skills/accessibility-compliance/SKILL.md Suma de verificación de contenido registrada en verificación; commit 4236bb9
License: MIT De LICENSE.
Estrellas del repositorio: 39,635 Instantánea de GitHub tomada el 2026-09-14 para todo el repositorio wshobson/agents, que contiene 18 skills en este catálogo. No es una calificación ni un recuento de uso para accessibility-compliance.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Cuándo usar este skillConformidad con WCAG, lectores de pantalla, navegación por teclado, gestión del foco, formularios, accesibilidad móvil, auditorías
Patrones detallados y ejemplos resueltosRemite a references/details.md para la documentación de patrones cuando la guía de nivel superior no es suficiente
Buenas prácticasOcho reglas básicas: HTML semántico, pruebas con usuarios reales, el teclado primero, estilos de foco, alternativas de texto, zoom, regiones en vivo, preferencias
Problemas habitualesTexto alternativo ausente, contraste insuficiente, trampas de teclado, campos sin etiqueta, reproducción automática, controles personalizados defectuosos, enlaces de salto, orden del foco
Herramientas de pruebaHerramientas automatizadas (axe, WAVE, Lighthouse), lectores de pantalla en pruebas manuales (VoiceOver, NVDA, JAWS, TalkBack), simuladores (NoCoffee, Silktide)

La descripción propia del Skill

«Implementa interfaces conformes a WCAG 2.2 con accesibilidad móvil, patrones de diseño inclusivo y soporte para tecnologías de asistencia. Úsalo al auditar accesibilidad, implementar patrones ARIA, desarrollar para lectores de pantalla o asegurar experiencias de usuario inclusivas.»

Descripción del encabezado del SKILL.md. El archivo completo tiene aproximadamente 2,402 caracteres. Lea el archivo completo en GitHub.

Conformidad de accesibilidad

Ejecutar accessibility-compliance en una tarea real de revisión de diseño.

Descarga OpenDesign, importa accessibility-compliance desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills