Esta página demuestra implementaciones prácticas de las pautas de accesibilidad web. Navega utilizando Tab para probar el orden de foco.
1. Contraste de Color (AA vs AAA)
El texto normal requiere un ratio de 4.5:1 para AA. El texto grande requiere 3:1.
Fallo (Ratio 2.1:1)
Este texto gris claro es muy difícil de leer para personas con baja visión.
AA Pass (Ratio 4.5:1)
Este gris oscuro cumple con el estándar mínimo para texto de tamaño normal.
AAA Pass (Ratio 7:1)
Texto casi negro sobre blanco. Máxima legibilidad garantizada.
2. Semántica y Foco Visible
❌ Práctica Incorrecta
Divs actuando como botones sin foco ni rol.
Intenta navegar a esto con TAB. No podrás.
✅ Práctica Correcta
Botón nativo `
Presiona TAB para ver el anillo de foco azul grueso.
3. Formularios y Etiquetas ARIA
El uso correcto de `label`, `aria-describedby` y `aria-invalid`.
4. Respeto al Movimiento
Este elemento se anima constantemente, a menos que el usuario tenga activada la opción
prefers-reduced-motion en su sistema operativo.
Tip: En CSS usa la media query @media (prefers-reduced-motion: reduce).
5. Navegación Compleja (Modal Trap)
Un patrón común que falla es el Modal. Cuando se abre, el foco debe quedar "atrapado" dentro. Si presionas TAB repetidamente, no deberías salir del modal hasta cerrarlo. Además, la tecla Esc debe cerrarlo.
6. Imágenes, Gráficos y Uso de Color
A. Texto Alternativo (1.1.1)
alt=""
Decorativa
alt="Gráfico de ventas..."
Informativa
B. No depender solo del color (1.4.1)
Para estados de error o éxito, usa iconos y texto, no solo colores rojo/verde.
7. Estructura, Idioma y Tablas
A. Jerarquía de Encabezados (1.3.1)
No saltes niveles (ej: de H1 a H3).
B. Propósito del Enlace (2.4.4)
C. Idioma de las partes (3.1.2)
El lector de pantalla debe saber cambiar de acento: "The book is on the table".
D. Tablas de Datos (1.3.1)
| Día | Horario |
|---|---|
| Lunes | 9:00 - 18:00 |
8. ARIA Live Regions (Status Messages)
Las actualizaciones dinámicas (como toasts) deben ser anunciadas sin mover el foco del usuario.
9. Interacción de Puntero y Etiquetas
A. Cancelación del Puntero (2.5.2)
La acción debe ejecutarse en el evento 'up' (soltar), no 'down', permitiendo cancelar si se arrastra fuera.
B. Etiqueta en el Nombre (2.5.3)
El texto visible del botón debe coincidir con su nombre accesible (aria-label).
C. Contenido en Hover/Focus (1.4.13)
Los tooltips deben ser descartables (Esc), persistentes si el mouse se mueve sobre ellos, y accesibles por teclado.
10. Entradas e Identificación
11. Adaptabilidad y Espaciado
A. Contraste de Componentes UI (1.4.11)
Los bordes de inputs, iconos y gráficos deben tener un ratio de 3:1.
B. Espaciado de Texto (1.4.12)
El contenido no debe romperse si el usuario aumenta el espaciado.
Este es un párrafo de prueba. Al activar el botón, aplicaremos las propiedades CSS requeridas por WCAG (line-height 1.5, letter-spacing 0.12em, etc.) para verificar que el texto no se corte ni se solape.
C. Reflujo (1.4.10)
Esta página usa Tailwind (flex/grid) para asegurar que a 320px de ancho (zoom 400%) no haya scroll horizontal.
12. Otros Elementos de Cumplimiento (Checklist)
- Orientation (1.3.4): La página no bloquea la rotación del dispositivo.
- No Timing (2.2.1): No hay límites de tiempo para leer el contenido.
- Three Flashes (2.3.1): Nada parpadea más de 3 veces por segundo.
- Page Titled (2.4.2): El
<title>es único y descriptivo. - Character Key Shortcuts (2.1.4): No hay atajos de una sola tecla activados.