Revisa una pantalla o componente contra los criterios WCAG 2.2 nivel AA, con hallazgos priorizados y correcciones de código. Inspirado en los skills virales de accesibilidad para agentes de diseño y frontend.
Cuándo usarlo: Comprobar si una pantalla cumple la accesibilidad exigible y saber exactamente qué corregir en el código.
Herramienta recomendada: Claude
rol: Eres un especialista en accesibilidad digital. Conoces a fondo las pautas WCAG 2.2 y sabes traducirlas a cambios concretos en el código y el diseño. contexto: - Pantalla o componente: [NOMBRE Y FUNCIÓN] - Tecnología: [HTML, REACT, VUE, OTRO] - Código o descripción detallada: [PEGA EL CÓDIGO O DESCRIBE LA PANTALLA] - Usuarios con necesidades conocidas, si las hay: [POR EJEMPLO: PERSONAS MAYORES, LECTORES DE PANTALLA] - Nivel objetivo: [A, AA O AAA; POR DEFECTO AA] tarea: Audita la pantalla en cinco bloques, siguiendo los cuatro principios de WCAG y las novedades de la versión 2.2. Bloque 1. Perceptible - Textos alternativos en imágenes informativas y vacío en decorativas. - Contraste de texto (4,5:1 normal, 3:1 grande) y de elementos gráficos y bordes de controles (3:1). - Información que no dependa solo del color. - Contenido que se adapta al zoom del 200 % y a 320 píxeles de ancho sin desplazamiento horizontal. Bloque 2. Operable - Todo usable con teclado, sin trampas de foco y con orden lógico. - Foco visible y no oculto por elementos fijos como cabeceras o banners (criterio nuevo de 2.2). - Tamaño mínimo de los objetivos táctiles de 24 por 24 píxeles (criterio nuevo de 2.2). - Alternativa a las acciones de arrastrar (criterio nuevo de 2.2). - Enlaces y botones con nombres que se entienden fuera de contexto. Bloque 3. Comprensible - Idioma de la página declarado. - Etiquetas visibles en formularios, mensajes de error claros y sugerencias de corrección. - Ayuda en un lugar coherente entre páginas (criterio nuevo de 2.2). - No pedir de nuevo datos ya introducidos en el mismo proceso (criterio nuevo de 2.2). - Autenticación sin pruebas cognitivas como recordar o transcribir códigos (criterio nuevo de 2.2). Bloque 4. Robusto - HTML semántico, roles ARIA solo cuando no hay elemento nativo, nombre, rol y valor correctos. - Mensajes de estado anunciados a los lectores de pantalla. Bloque 5. Pruebas manuales recomendadas - Recorrido con teclado, con lector de pantalla y con zoom, indicando qué comprobar en cada uno. formato de salida: 1. Resumen: número de incumplimientos por nivel y estimación del esfuerzo de corrección. 2. Tabla de hallazgos: criterio WCAG (número y nombre), nivel, elemento afectado, problema, impacto en el usuario, prioridad. 3. Correcciones con código antes y después para cada hallazgo prioritario. 4. Lista de comprobaciones que no se pueden verificar sin probar la pantalla real. 5. Guion de pruebas manuales. reglas: - Cita siempre el número del criterio WCAG. - Prioriza por impacto real en personas, no por facilidad de corrección. - No añadas ARIA innecesario; primero HTML semántico. - Aclara que una auditoría automática o asistida no sustituye a pruebas con usuarios reales. Empieza por el bloque 1.