¿Qué son las WCAG?
WCAG, o Pautas de Accesibilidad al Contenido en la Web, es una norma internacional desarrollada por el W3C (Consorcio de la World Wide Web). Su objetivo es garantizar que los sitios web y los contenidos digitales sean accesibles para todos los usuarios, incluidas las personas con discapacidad.
La versión actual, WCAG 2.1, se basa en versiones anteriores e incluye recomendaciones adicionales para dispositivos móviles y usuarios con deficiencias cognitivas o de baja visión.
Los cuatro principios de las WCAG
Las WCAG se basan en cuatro principios fundamentales, a menudo recordados mediante el acrónimo POUR:
Perceptible
La información debe presentarse de forma que los usuarios puedan percibirla, independientemente de sus capacidades sensoriales. Esto incluye proporcionar texto alternativo para las imágenes y garantizar que el contenido sea accesible con lectores de pantalla.
Ejemplos:
- Proporciona alternativas de texto para cualquier contenido que no sea texto;
- Proporcionar una forma alternativa de CAPTCHA que emita el código CAPTCHA como audio;
- Proporcionar subtítulos y transcripciones que puedan ser leídos por un lector de pantalla, lector de braille para audio y vídeo;
- Proporcionar descripciones de audio adicionales cuando el audio del vídeo sea insuficiente para describir lo que ocurre en la pantalla;
- Utilizar etiquetas de encabezamiento para establecer la jerarquía del contenido;
- Crea contenido responsivo: los usuarios no deben estar encerrados en una vista específica, deben poder girar su dispositivo entre horizontal y vertical;
- Ten suficiente contraste entre el color del texto y los fondos;
- Utiliza tanto el color como los iconos para mostrar mensajes de error y de éxito;
- El audio de fondo debe ser 20 decibelios más bajo que las voces habladas para no interferir en el diálogo;
Operable
Los componentes de la interfaz de usuario y la navegación deben ser utilizables. Por ejemplo, toda la funcionalidad debe ser accesible mediante un teclado, y el contenido debe evitar diseños que puedan provocar convulsiones.
Ejemplos:
- Haz que toda la funcionalidad sea accesible desde un teclado;
- Los usuarios pueden abrir y cerrar modales y ventanas emergentes sin utilizar el ratón o el panel táctil;
- Todos los visitantes del sitio web deben disponer de tiempo suficiente para leer y utilizar el contenido de la página;
- Dar un mensaje de advertencia antes de que se vaya a cerrar la sesión de un usuario por inactividad;
- Dar la opción de añadir más tiempo al realizar acciones sensibles al tiempo;
- Añadir iconos de pausa/parada a un carrusel que se reproduce automáticamente;
- No diseñes el contenido de forma que se sepa que puede provocar convulsiones, evita animaciones que parpadeen más de 3 veces por segundo;
- Proporciona formas de ayudar a los usuarios a navegar, encontrar contenidos y determinar cuándo están;
- Todas las páginas deben tener un título relativo al contenido de la página;
- Utiliza la navegación de migas de pan cuando haya varios niveles de páginas anidadas;
- Evita enlaces ambiguos como “haz clic aquí” o “más información”;
Comprensible
El contenido y el comportamiento de la interfaz deben ser claros y predecibles. Esto significa utilizar un lenguaje sencillo y garantizar que los usuarios puedan entender y utilizar fácilmente el sitio web.
Ejemplos:
- Haz que el contenido del texto sea legible y comprensible;
- Evita la jerga técnica;
- Establece el atributo lang en la etiqueta html ( <html lang=”en”>);
- Los elementos globales como la cabecera, la navegación y el pie de página son iguales en todas las páginas;
- Los enlaces de nagivación son los mismos en todas las páginas y siempre en el mismo orden;
- Utiliza un lenguaje coherente al etiquetar las cosas;
- Proporciona etiquetas para todas las entradas y ejemplos (marcadores de posición) si los datos deben formatearse de una determinada manera;
- Cuando un formulario se rellene incorrectamente, proporciona instrucciones sobre cómo solucionar el error;
- Da mensajes de éxito/error cuando se envíe un formulario;
- Ofrece a los usuarios una segunda oportunidad para confirmar o cancelar una acción, especialmente cuando esa acción sea irreversible;
Robusto
El contenido debe ser interpretado de forma fiable por una amplia gama de dispositivos y tecnologías de asistencia, tanto ahora como en el futuro.
Ejemplos:
- Maximizar la compatibilidad con los agentes de usuario actuales y futuros, incluidas las tecnologías de asistencia;
- Escribe HTML semántico y válido;
- Utiliza ARIA para ampliar tu HTML cuando sea necesario;
- Incorpora pruebas de accesibilidad a tu proceso de creación;
13 directrices y 78 criterios de éxito
Cada uno de los cuatro principios incluye varias pautas: 13 en total. Estas pautas se apoyan en criterios de éxito: requisitos específicos y comprobables que ayudan a determinar si un sitio web cumple las normas de accesibilidad.
WCAG 2.1 incluye 78 criterios de éxito, organizados en tres niveles de conformidad:
Nivel A – Requisitos básicos, deben ajustarse
Nivel AA – Recomendado para la mayoría de los sitios web
Nivel AAA – Nivel más alto, difícil de cumplir en todo el contenido
Para la mayoría de los sitios web, aspirar al cumplimiento del nivel AA de las WCAG 2.1 es un objetivo sólido y realista.
Por qué son importantes las WCAG
Las WCAG proporcionan un marco estructurado y reconocido internacionalmente para crear contenidos digitales accesibles. Basado en cuatro principios -Perceptible, Operable, Comprensible y Robusto-, incluye 13 directrices y 78 criterios de éxito que ayudan a garantizar que tu sitio sea utilizable por todos.
Seguir las WCAG ayuda a
- Hacer que los sitios web sean utilizables para personas con diversas discapacidades (visuales, motoras, cognitivas, etc.)
- Mejorar la experiencia general del usuario
- Cumplir las leyes de accesibilidad de muchos países
- Mejorar el SEO y preparar tu contenido para las nuevas tecnologías