accessibility

Visión general de accessibility skill

Qué hace accessibility skill

accessibility skill te ayuda a diseñar, implementar y auditar interfaces accesibles frente a WCAG 2.2 Nivel AA. Su objetivo es convertir la intención del producto en decisiones semánticas concretas: elementos nativos, roles ARIA, etiquetas, pistas, comportamiento del foco y atributos de accesibilidad específicos de la plataforma para Web, iOS y Android.

Quién debería instalar accessibility skill

accessibility skill es ideal para ingenieros frontend, equipos de design system, auditores UX y diseñadores de producto que necesitan orientación lista para implementar, no una lista genérica de verificación de accesibilidad. Es especialmente útil cuando trabajas en accesibilidad para UX Audit y necesitas pasar de “este flujo parece arriesgado” a correcciones concretas.

Qué trabajo te ayuda a resolver

La tarea real no es solo “hacer que cumpla”. Se trata de mapear correctamente un componente o flujo al árbol de accesibilidad para que las personas que usan tecnología de asistencia reciban el rol, el nombre, el estado, el orden y el modelo de interacción correctos. El skill pone el foco en el mapeo semántico, la gestión del foco, el etiquetado y los principios POUR, en lugar de resúmenes amplios de política.

Por qué elegirlo frente a un prompt normal

Un prompt normal suele devolver consejos de accesibilidad demasiado vagos. Este skill es más útil cuando necesitas razonamiento estructurado, por ejemplo: identificar primero el rol del componente, preferir semántica nativa y después definir etiquetas, estados, comportamiento del teclado y tratamiento del foco. Eso vuelve el uso de accessibility skill mucho más accionable para revisiones de implementación y auditorías.

Cómo usar accessibility skill

Instalar el contexto y qué leer primero

Instala el skill a través de tu flujo de skills y después abre primero skills/accessibility/SKILL.md. Este skill no incluye scripts adicionales ni archivos de referencia, así que casi toda la guía útil está en ese único documento. Lee estas secciones en este orden:

1. When to Use
2. Core Concepts
3. How It Works
4. la parte sobre identificar el rol del componente

Es una instalación ligera de accessibility: con poca fricción de configuración, pero debes esperar aportar tú mismo el contexto del producto que falte.

Qué entradas necesita accessibility skill

accessibility skill funciona mejor si le proporcionas:

• plataforma: Web, iOS o Android
• componente o flujo: botón, modal, formulario, pestañas, menú, carrusel, etc.
• objetivo del usuario: qué intenta hacer
• implementación actual: HTML, JSX, SwiftUI/UIKit, Jetpack Compose/View XML, o capturas con notas de comportamiento
• restricciones: límites del design system, marcado heredado, widgets de terceros
• objetivo de auditoría: WCAG 2.2 AA, soporte de teclado, comportamiento del lector de pantalla, orden del foco, tamaño objetivo o problemas de nombre/estado

Entrada débil: “Haz esto accesible.”
Entrada fuerte: “Audita este modal en React para WCAG 2.2 AA. Revisa rol semántico, nombre accesible, focus trap, comportamiento con Escape, foco inicial, retorno del foco y anuncio en lector de pantalla. Sugiere JSX corregido.”

Cómo convertir un objetivo difuso en un buen prompt

Usa una estructura de prompt como esta para sacar más partido a accessibility skill:

• Identifica el rol de la UI y si un elemento nativo debería reemplazar al actual.
• Describe el árbol de accesibilidad esperado.
• Enumera la información obligatoria de etiqueta, rol, estado, valor y pista.
• Define el comportamiento del teclado y del foco.
• Señala riesgos frente a WCAG 2.2 AA.
• Devuelve código corregido más un breve resumen de auditoría.

Ejemplo:
“Usa accessibility skill para revisar este desplegable personalizado en Web. Primero decide si debería ser un select nativo, un botón + listbox, u otro patrón. Después proporciona el ARIA esperado, las interacciones de teclado, el movimiento del foco, los requisitos de foco visible, las dudas sobre tamaño objetivo y el código revisado.”

Flujo de trabajo sugerido para auditorías e implementación

Para accessibility para UX Audit, empieza por el nivel de flujo y luego baja a los componentes:

1. nombra la tarea y el riesgo de fallo
2. identifica el rol real de cada elemento interactivo
3. comprueba primero alternativas semánticas nativas
4. verifica etiquetas, nombres, valores y estados
5. revisa el orden del teclado y la visibilidad del foco
6. prueba conceptualmente los anuncios del lector de pantalla
7. solicita código o especificaciones corregidas

Si vas a implementar en lugar de auditar, pídele al skill criterios de aceptación que puedas entregar a ingeniería y QA, no solo recomendaciones en prosa.

Preguntas frecuentes sobre accessibility skill

¿accessibility skill es bueno para principiantes?

Sí, si ya sabes construir interfaces básicas. El skill explica con claridad las ideas centrales de accesibilidad, pero no es un curso completo para principiantes sobre WCAG. Funciona mejor como apoyo guiado de implementación que como único recurso de aprendizaje.

¿Basta para decidir si instalar accessibility skill?

En general, sí. El skill tiene un alcance claro, un flujo de trabajo concreto y un enfoque técnico práctico. La principal limitación es la profundidad del empaquetado: no hay ejemplos complementarios, scripts de prueba ni archivos de referencia específicos por plataforma. Si buscas activos reutilizables y extensos, se siente ligero; si buscas orientación rápida, es fácil de adoptar.

¿En qué se diferencia de un prompt genérico de accesibilidad?

La diferencia está en el encuadre. Este accessibility guide pone el foco en identificar el rol, el mapeo semántico, el árbol de accesibilidad, las etiquetas y la gestión del foco. Los prompts genéricos suelen saltar directamente a los atributos ARIA, lo que puede llevar a sobreingeniería o a patrones incorrectos.

¿Cuándo no debería usar este skill?

No dependas solo de accessibility skill para validación legal, pruebas complejas de compatibilidad con tecnologías de asistencia o casos límite muy especializados de plataformas nativas. Su punto fuerte es el razonamiento de diseño y código, no sustituir las pruebas manuales con dispositivos reales, lectores de pantalla y flujos solo con teclado.

Cómo mejorar accessibility skill

Aporta más contexto de UI, no solo fragmentos de código

El mayor factor de mejora es el contexto. Incluye la tarea del usuario, si el control cambia estado o navega, qué se ve visualmente y qué falla ahora. Las recomendaciones de accesibilidad dependen del comportamiento, no solo del marcado. Un div puede representar varios patrones; el skill rinde mejor cuando defines la interacción prevista.

Pide selección de patrón antes de pedir ARIA

Un fallo habitual es imponer ARIA sobre el componente equivocado. Mejora la salida de accessibility skill preguntando: “¿Qué patrón es realmente este?” Por ejemplo, pide una decisión entre botón nativo, enlace, disclosure, tab, dialog o listbox antes de corregirlo. Eso suele evitar widgets personalizados innecesarios.

Pide una salida en secciones listas para implementar

Para un uso más sólido de accessibility skill, solicita una respuesta estructurada:

• problema detectado
• impacto para el usuario
• preocupación WCAG 2.2
• patrón semántico recomendado
• cambio exacto de código
• pasos de prueba

Ese formato funciona mejor para entregar a ingeniería, QA o responsables del design system que una única respuesta en forma de ensayo.

Itera con evidencia real de fallos

Después del primer pase, mejora la salida de accessibility skill aportando detalles concretos: texto de anuncio del lector de pantalla, atascos de teclado, foco visible ausente o medidas de los objetivos táctiles. El skill aporta mucho más cuando lo usas como un ciclo de iteración para hallazgos de UX Audit y no como una comprobación de cumplimiento de una sola vez.