Habilidades web-accessibility
📦

web-accessibility

Seguro

Crear Interfaces Web Accesibles

También disponible en: Joseph OBrien,Joseph OBrien

Las aplicaciones web a menudo excluyen a usuarios con discapacidades debido a una implementación deficiente de accesibilidad. Esta habilidad proporciona orientación de WCAG 2.1 para crear interfaces inclusivas, amigables con lectores de pantalla y navegables por teclado.

Soporta: Claude Codex Code(CC)
📊 70 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "web-accessibility". Crear un modal accesible en React

Resultado esperado:

  • Devuelve un componente Modal con role='dialog', aria-modal='true', aria-labelledby, trampa de foco, manejador ESC y clic-fuera-para-cerrar
  • Incluye lista de verificación de accesibilidad: HTML semántico, navegación por teclado, anuncios para lectores de pantalla

Usando "web-accessibility". Construir formulario de login accesible

Resultado esperado:

  • Formulario con asociaciones <label htmlFor>, aria-required, aria-invalid, aria-describedby para mensajes de error
  • Incluye role='alert' para anuncios de errores y gestión de foco adecuada en fallos de validación

Auditoría de seguridad

Seguro
v1 • 3/9/2026

All 113 static findings are FALSE POSITIVES. The skill is documentation about web accessibility (WCAG 2.1). The scanner detected backticks in markdown, legitimate reference URLs to accessibility resources, relative paths in docs, and false positives for 'key' (keyboard) and 'cryptographic' (MDN). No executable code, no shell commands, no malicious patterns exist.

2
Archivos escaneados
655
Líneas analizadas
0
hallazgos
1
Auditorías totales
No se encontraron problemas de seguridad
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
26
Comunidad
100
Seguridad
87
Cumplimiento de la especificación

Lo que puedes crear

Construir Componentes Accesibles Nuevos

Crear modales, dropdowns o formularios en React con gestión adecuada de foco, etiquetas ARIA y soporte de teclado desde el inicio.

Corregir Problemas de Accesibilidad Existentes

Identificar y solucionar problemas de accesibilidad en código legacy siguiendo listas de verificación WCAG e implementando HTML semántico apropiado.

Implementar Pruebas de Accesibilidad

Configurar pruebas automatizadas de accesibilidad con axe-core en Jest para detectar regresiones antes del despliegue.

Prueba estos prompts

Crear Modal Accesible 
Crea un componente modal accesible con estos requisitos:
- Framework: [React/Vue/Vanilla JS]
- Nivel WCAG: AA
- Características: Trampa de foco, ESC para cerrar, clic fuera para cerrar
- Incluir atributos ARIA adecuados y anuncios para lectores de pantalla
Construir Formulario Accesible 
Construye un formulario accesible con:
- Validación de campos requeridos
- Mensajes de error claros con aria-describedby
- Asociaciones de etiquetas adecuadas
- Anuncios de estado de éxito/error
- Gestión de foco en errores de validación
Agregar Navegación por Teclado 
Agrega soporte completo de navegación por teclado a [dropdown/tabs/menu] incluyendo:
- Navegación con teclas de flecha
- Soporte de teclas Home/End
- Activación con Enter/Space
- Escape para cerrar
- Indicadores de foco visibles
Revisión de Código de Accesibilidad 
Revisa el código de este componente en busca de problemas de accesibilidad:
[PEGAR CÓDIGO]
Verifica: HTML semántico, uso de ARIA, accesibilidad por teclado, contraste de color, etiquetas de formulario, gestión de foco

Mejores prácticas

  • Usar elementos HTML semánticos primero antes de agregar atributos ARIA - los elementos HTML nativos tienen accesibilidad incorporada
  • Mantener siempre indicadores de foco visibles - nunca usar outline: none sin proporcionar una alternativa
  • Probar con navegación real por teclado y lectores de pantalla durante el desarrollo, no solo con herramientas automatizadas

Evitar

  • Usar div con role='button' en lugar del elemento <button> nativo
  • Usar placeholder como única etiqueta para inputs de formulario
  • Eliminar estilos outline:focus sin proporcionar indicadores de foco visibles

Preguntas frecuentes

¿Qué es WCAG?
Las Pautas de Accesibilidad para el Contenido Web (WCAG) son un conjunto de recomendaciones para hacer que el contenido web sea accesible para personas con discapacidades. Define tres niveles: A, AA y AAA.
¿Qué es ARIA?
Aplicaciones de Internet Enriquecidas Accesibles (ARIA) es un conjunto de atributos que definen formas de hacer que el contenido web sea más accesible. Complementa la semántica nativa de HTML.
¿Qué es un lector de pantalla?
Los lectores de pantalla son aplicaciones de software que convierten el contenido visual en voz o Braille para usuarios ciegos o con discapacidad visual. Los más comunes incluyen NVDA, JAWS y VoiceOver.
¿Qué es la accesibilidad por teclado?
La accesibilidad por teclado significa que todas las funciones del sitio web se pueden realizar usando solo el teclado (Tab, Enter, Space, teclas de flecha, Escape). Esto ayuda a los usuarios que no pueden usar un mouse.
¿Qué es la trampa de foco?
La trampa de foco mantiene el foco del teclado dentro de un modal o diálogo hasta que se cierra. Esto evita que los usuarios naveguen con tab al contenido de fondo mientras el modal está abierto.
¿Cómo pruebo la accesibilidad?
Usa herramientas automatizadas como axe-core o Lighthouse para verificaciones básicas. Las pruebas manuales solo con teclado y lectores de pantalla son esenciales para una evaluación completa.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/supercent-io/skills-template/tree/main/.agent-skills/web-accessibility/

Ref.

main

Estructura de archivos

📄 SKILL.md

📄 SKILL.toon