Accesibilidad

¿Qué hace Accesibilidad?

Haz que la interfaz sea utilizable sin mouse, sin visión perfecta y sin paciencia para la ambigüedad.

Cuándo usar

Úsalo cuando el usuario:

• quiera una revisión de accesibilidad;
• esté construyendo formularios, navegación, modales o componentes interactivos;
• necesite orientación sobre WCAG;
• quiera soporte para teclado o lector de pantalla;
• pregunte sobre contraste o estados de enfoque.

1. Definir el ámbito

• ¿Qué páginas o componentes?
• ¿Qué grupos de usuarios y tecnologías de asistencia importan?
• ¿Qué estándar aplica: WCAG 2.2 AA, política interna, requisito legal?
• ¿Qué queda fuera del alcance?

2. Verificar lo básico

Semántica

• Utiliza elementos nativos: button, a, input, label, nav, main.
• No uses un div como botón.
• Usa encabezados en orden.
• Proporciona nombres accesibles a puntos de referencia y secciones.

Teclado

• Cada elemento interactivo es accesible con Tab.
• El orden de enfoque coincide con el orden visual.
• El enfoque es visible.
• No hay trampas de teclado.
• Escape cierra los modales.
• Las teclas de flecha funcionan en menús, pestañas y rejillas donde se espera.

Formularios

• Cada entrada tiene una etiqueta.
• Los errores se anuncian y se vinculan al campo.
• Los campos obligatorios están marcados en texto, no solo con color.
• Se usa autocompletar cuando corresponda.
• Las instrucciones vienen antes del campo.

Imágenes y medios

• Las imágenes significativas tienen texto alternativo.
• Las imágenes decorativas tienen texto alternativo vacío.
• El video tiene subtítulos.
• El audio tiene una transcripción.
• Ninguna información se transmite solo mediante color.

Contraste y texto

• El contraste del texto cumple con WCAG AA.
• El texto se puede redimensionar al 200% sin pérdida.
• La longitud de línea y el espaciado son legibles.
• El contenido se reajusta a 320 píxeles.

Contenido dinámico

• Los estados de carga se anuncian.
• Los mensajes y alertas utilizan regiones activas adecuadas.
• Los modales gestionan el enfoque.
• Los cambios de ruta del lado del cliente actualizan el título y el enfoque.

3. Probar

• Recorrido solo con teclado.
• Prueba rápida con lector de pantalla si está disponible.
• Zoom al 200%.
• Modo de alto contraste.
• Movimiento reducido.
• Verificaciones automatizadas, con la comprensión de que solo detectan parte del problema.

Formato de salida

## Ámbito

## Hallazgos

### <severidad>: <problema>

- **Ubicación:** `<ruta o componente>`
- **WCAG:** <criterio>
- **Impacto:** <quién está bloqueado y cómo>
- **Solución:** <cambio específico>
- **Verificación:** <cómo probar>

## Lo que funciona

## No probado

## Prioridad

1. ...

Reglas

• No afirmar cumplimiento total de WCAG con un escaneo automatizado.
• No usar aria-* para corregir mala semántica.
• No eliminar contornos de enfoque sin un reemplazo visible.
• No depender solo del color.
• No añadir una clase solo para lectores de pantalla como sustituto de una etiqueta.
• Si la revisión es parcial, indicar qué no se probó.

Verificaciones de calidad

• Se utilizan semánticas nativas.
• El acceso por teclado funciona.
• El enfoque es visible.
• Los formularios tienen etiquetas y errores.
• El contraste es suficiente.
• El contenido dinámico se anuncia.
• La revisión indica qué no se probó.