Guía de Criterios WCAG 2.2
Las Web Content Accessibility Guidelines (WCAG) 2.2 son el estándar técnico internacional desarrollado por el W3C para garantizar que la web sea accesible para todas las personas.
Los 4 Principios de Accesibilidad (POUR)
1. Perceptible
La información debe presentarse de forma que los usuarios puedan percibirla mediante la vista, el oído o el tacto.
2. Operable
Los componentes e interfaz deben ser manejables mediante teclado, lectores de pantalla o control por voz.
3. Comprensible
El contenido y la navegación deben ser claros, predecibles y fáciles de entender para todos.
4. Robusto
El código debe ser compatible con la evolución de navegadores y tecnologías de asistencia.
Desglose de Pautas por Principio
Explora las pautas clave que componen cada pilar de la WCAG 2.2 y cómo se traducen en la práctica del desarrollo web.
La información y los componentes de la interfaz de usuario deben presentarse a los usuarios de manera que puedan percibirlos. No puede ser invisible a todos sus sentidos.
- 1.1 Alternativas de texto: Proporcionar alternativas de texto para cualquier contenido no textual (imágenes, iconos, gráficos) para que pueda transformarse en otros formatos como lectura de voz o braille (ej. Criterio 1.1.1).
- 1.2 Medios basados en el tiempo: Proporcionar alternativas accesibles para medios temporales (subtítulos para videos, transcripciones para audios y audiodescripciones).
- 1.3 Adaptable: Crear contenido que se pueda presentar de diferentes formas (por ejemplo, con un diseño más simple) sin perder información ni estructura (ej. Criterio 1.3.1 con marcado semántico HTML5).
- 1.4 Distinguible: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación del primer plano y el fondo (relaciones de contraste mínimas de 4.5:1 y opciones de redimensionamiento de texto).
Los componentes de la interfaz de usuario y la navegación deben ser operables por cualquier persona, sin importar el dispositivo de entrada utilizado.
- 2.1 Accesible por teclado: Garantizar que toda la funcionalidad de la página esté disponible mediante el teclado (tecla Tab, Enter, Espacio) sin trampas de foco.
- 2.2 Tiempo suficiente: Ofrecer tiempo suficiente a los usuarios para leer y usar el contenido, evitando sesgos por temporizadores sin opción de pausa o extensión.
- 2.3 Convulsiones y reaccion físicas: No diseñar contenido de una manera que se sepa que causa convulsiones o reacciones físicas (evitar destellos de más de 3 veces por segundo).
- 2.4 Navegable: Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran (skip-links, títulos de página claros e indicadores de foco visibles).
- 2.5 Modalidades de entrada: Facilitar la operación de las funciones a través de diversas entradas más allá del teclado (gestos simples, objetivos táctiles de tamaño adecuado ej. 24x24px en WCAG 2.2).
La información y el funcionamiento de la interfaz de usuario deben ser comprensibles y predecibles para todos los usuarios.
-
3.1 Legible:
Hacer que el contenido textual sea legible y comprensible, asegurando la definición del idioma en el código (ej.
<html lang="es">) y palabras complejas. - 3.2 Predecible: Hacer que las páginas web aparezcan y funcionen de manera predecible, evitando cambios de contexto inesperados al recibir el foco o cambiar valores de formularios.
- 3.3 Asistencia para la entrada de datos: Ayudar a los usuarios a evitar y corregir errores en formularios mediante instrucciones claras, etiquetas vinculadas e identificación automática de errores.
El contenido debe ser lo suficientemente robusto como para que pueda ser interpretado de manera confiable por una gran variedad de agentes de usuario, incluidas las tecnologías de asistencia.
-
4.1 Compatible:
Maximizar la compatibilidad con los agentes de usuario actuales y futuros, garantizando un marcado de código válido y la implementación correcta de estados, funciones y nombres de ARIA (ej.
aria-live,aria-expanded).
Tip de WAC:
Este desglose mediante acordeones utiliza el componente nativo de Bootstrap con atributos aria-expanded y aria-controls, permitiendo abrir y cerrar cada sección utilizando únicamente la tecla Enter o Espacio en el teclado.
