Las WCAG 2.1 (Web Content Accessibility Guidelines) establecen cómo hacer el contenido web accesible. Se estructuran en 4 principios fundamentales: POUR.
La información y los componentes deben poder ser percibidos por todos los usuarios.
Todo contenido no textual debe tener una alternativa en texto que transmita la misma información o función.
altaria-label👉 Ejemplo:
Una imagen de un botón debe describir su función, no su apariencia.
El contenido multimedia debe ofrecer alternativas accesibles, especialmente cuando se trata de medios tempodependientes, es decir, aquellos cuyo contenido se desarrolla a lo largo del tiempo.
🔹 Se consideran medios tempodependientes:
🔹 Requisitos:
👉 Ejemplo:
Un vídeo institucional debe incluir subtítulos sincronizados y audiodescripción si la información visual es relevante.
El contenido debe poder presentarse de diferentes formas sin perder significado.
header, nav, main)h1, h2, etc.)👉 Ejemplo:
Una tabla debe usarse solo para datos, no para diseño.
Los usuarios deben poder ver y oír el contenido claramente.
👉 Ejemplo:
Un error en un formulario no debe indicarse solo con color rojo, también con texto.
"Texto, Tiempo, Transformar, Tono" (4T)
La interfaz debe poder utilizarse por todos los usuarios.
Todo el contenido debe ser operable mediante teclado.
👉 Ejemplo:
Un menú desplegable debe poder abrirse sin ratón.
Los usuarios deben disponer de tiempo suficiente para interactuar.
👉 Ejemplo:
Un formulario no debe expirar sin avisar.
Evitar contenido que pueda provocar ataques.
👉 Ejemplo:
Banners con parpadeo rápido no son accesibles.
Facilitar la navegación y localización del contenido.
👉 Ejemplo:
Un enlace debe indicar claramente su destino.
El contenido debe poder utilizarse con diferentes formas de entrada.
👉 Ejemplo:
No obligar a hacer gestos complejos sin alternativa.
"Tecla, Tiempo, Triggers, Trayectoria, Toque" (5T)
La información y el uso de la interfaz deben ser comprensibles.
El contenido debe ser fácil de leer y entender.
lang)👉 Ejemplo:
Indicar el idioma del contenido ayuda a lectores de pantalla.
El comportamiento de la web debe ser consistente.
👉 Ejemplo:
Un botón no debe cambiar de función en distintas páginas.
Ayudar a los usuarios a evitar y corregir errores.
👉 Ejemplo:
Si un campo es obligatorio, debe indicarse claramente.
"Leer, Lógica, Login" (3L)
El contenido debe ser compatible con diferentes tecnologías.
El contenido debe funcionar correctamente con navegadores y tecnologías asistivas.
👉 Ejemplo:
Un botón debe ser interpretado correctamente por tecnologías asistivas.
"Código correcto = Compatible"
| Nivel | Descripción |
|---|---|
| A | Nivel mínimo de accesibilidad |
| AA | Nivel intermedio (estándar requerido) |
| AAA | Nivel máximo (más exigente) |
Las administraciones públicas deben cumplir:
👉 Nivel AA obligatorio
Esto implica:
"POUR = Puedo Operar Una Red"