Pautas de accesibilidad para el contenido en la web WCAG

Las Pautas de Accesibilidad para el Contenido en la Web (Web Content Accessibility Guidelines, WCAG) son un conjunto de directrices desarrolladas por el World Wide Web Consortium (W3C) que establecen estándares para mejorar la accesibilidad de los sitios web. Estas pautas tienen como objetivo hacer que el contenido web sea más accesible para todas las personas.

El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares que aseguran el crecimiento futuro de la web y vela por conseguir webs disponibles para todo el mundo y desde cualquier dispositivo. Desde W3C se establecen ciertas recomendaciones, normas, estándares y pautas para contribuir en el desarrollo de un estándar sobre accesibilidad web. Estas recomendaciones o pautas son lo que llamamos WCAG (Web Content Accessibility Guidelines o Pautas de Accesibilidad para el contenido Web).

W3C cuenta con un grupo de trabajo llamado WAI (Web Accessibility Initiative) que, en coordinación con otras organizaciones, persigue la accesibilidad de la Web a través de diferentes áreas de trabajo: tecnología, directrices, herramientas, formación y difusión, investigación y desarrollo.

2. Pautas de accesibilidad para el contenido en la web (WCAG) 

Las Pautas de Accesibilidad para el Contenido Web (WCAG) cubren un amplio rango de recomendaciones para crear contenido Web más accesible. Seguir estas pautas permite crear un contenido más accesible para un mayor número de personas con barreras visuales, auditivas, motrices, etc.. Además, seguir estas pautas puede, a menudo, ayudar a que el contenido web sea más usable. Veamos las distintas versiones WCAG.

2.1. WCAG 1.0

Fue la primera versión lanzada en 1999 y estableció las pautas iniciales para mejorar la accesibilidad web. En la primera versión de las guías WCAG (WCAG 1.0) se identificaron catorce pautas de diseño:

1. Proporcionar alternativas equivalentes para contenido visual y auditivo.
2. No basarse solo en el color.
3. Usar marcadores y hojas de estilo y hacerlo de forma correcta.
4. Especificar el lenguaje utilizado.
5. Crear tablas que se transformen correctamente.
6. Asegurarse de que las páginas que usen nuevas tecnologías se transformen
   correctamente.
7. Asegurar al usuario el control de los contenidos que cambian con el tiempo.
8. Asegurar la accesibilidad directa de las interfaces incrustadas.
9. Diseñar para la independencia del dispositivo.
10. Usar soluciones provisionales.
11. Usar las tecnologías y pautas de la W3C.
12. Proporcionar información de contexto y orientación.
13. Proporcionar mecanismos claros de navegación.
14. Asegurar documentos claros y simples.

2.2. WCAG 2.0 y WCAG 2.1

Posteriormente, en el año 2008, estas catorce pautas fueron revisadas en la versión 2.0 de las Guías de Accesibilidad de los Contenidos para la Web (WCAG 2.0)que a su vez fue reemplazada por la versión  WCAG 2.1 en junio de 2018.

En esta última revisión, las catorce pautas se redujeron a cuatro pautas:

• Perceptible: Se refiere a la capacidad de presentar la información y el contenido de manera que sea perceptible para todos los usuarios, incluyendo aquellos con discapacidades visuales o auditivas.
• Operable: Busca garantizar que todas las funcionalidades y componentes del sitio web sean accesibles y utilizables por todas las personas, independientemente de sus habilidades físicas.
• Comprensible: Se centra en la claridad y comprensión del contenido, asegurando que la información y las operaciones sean fáciles de entender para todos los usuarios.
• Robusto: Implica que el contenido web debe ser compatible con diferentes tecnologías y dispositivos, asegurando que sea accesible en una amplia variedad de entornos y plataformas.

Las pautas de las WCAG 2.0 se pueden consultar en w3.org/TR/WCAG20/ y las WCAG 2.1 en w3.org/TR/WCAG21/. También puedes ver un resumen en español de las distintas versiones en la página web sobre accesibilidad de la Universidad de Alicante.

La versión WCAG 2.2 se encuentra actualmente en curso y se prevé que la próxima versión sea la WCAG 3.0.

Como se puede ver en los enlaces, hay muchas reglas y pautas; a continuación vamos a estudiar solo las más relevantes, extraídas de w3.org.

2.2.1. Perceptible

Se deben ofrecer alternativas textuales para todo contenido no textual, de manera que pueda convertirse a otros formatos que las personas necesiten, como texto ampliado, braille, voz, símbolos o un lenguaje más simple.

Ejemplos:

• Texto alternativo para imágenes o gráficos.
• Subtítulos o transcripciones para vídeos y audios.
• Descripciones de elementos interactivos como botones o iconos.
• Versiones simplificadas de tablas o esquemas complejos.
• Contenido presentado de forma clara y con contraste suficiente entre primer plano y fondo.

2.2.2. Operable

El contenido debe ser fácil de usar y navegar para todas las personas, independientemente del dispositivo que utilicen.

Ejemplos:

• Todo el contenido y la funcionalidad deben poder manejarse mediante el teclado.
• Dar tiempo suficiente para leer y usar el contenido.
• Evitar diseños que puedan provocar ataques, espasmos o convulsiones (por ejemplo, luces parpadeantes rápidas).
• Facilitar la navegación, encontrar información y saber en qué parte de la página se encuentra el usuario, como menús claros o indicadores de ubicación.

2.2.3. Comprensible

El contenido debe ser fácil de leer y de entender.

Ejemplos:

• Textos claros, legibles y con lenguaje sencillo.
• Páginas que funcionen de manera predecible, sin comportamientos inesperados.
• Herramientas para ayudar a los usuarios a evitar errores o corregirlos, como mensajes claros en formularios o confirmaciones de acción.

2.2.4. Robusto

El contenido debe ser compatible con las tecnologías actuales y futuras, incluyendo ayudas técnicas.

Ejemplos:

• Código que funcione correctamente en distintos navegadores y dispositivos.
• Compatibilidad con lectores de pantalla, ampliadores de texto y otras herramientas de accesibilidad.

Comprueba tu apendizaje

2.3. Técnicas para satisfacer los requisitos definidos en las WCAG 

Las técnicas para satisfacer los requisitos definidos en las WCAG también están recogidas en la web w3.org. Hay más de 400 técnicas para satisfacer todos los requisitos definidos en las WCAG, a continuación se mencionan las más destacadas:

2.3.1. Técnicas fundamentales

• Incluir alternativas de texto al contenido multimedia.
• Permitir pausar el contenido multimedia.
• Incluir alternativas legibles cuando la lectura dependa del contraste de colores.
• Ordenación coherente del contenido.
• Incluir glosarios, mapa del sitio, tabla de contenidos.
• Incluir títulos descriptivos.
• Añadir enlaces para ir al principio de la página.
• Identificar la localización del usuario dentro de la web (breadcrumbs).
• Evitar parpadeos.
• Alinear los textos de manera similar.
• Ofrecer feedback de confirmación o negación al realizar una operación, etc.

2.3.2. Técnicas HTML

• Utilizar elemento title para dar un título coherente a la página.
• Incluir la etiqueta meta description.
• Incluir el botón de submit en los formularios.
• Definir el idioma correspondiente con el atributo lang.
• Incluir el atributo alt en las imágenes.
• Utilizar la etiqueta caption en las tablas.
• Maquetación sin tablas.
• Utilizar los encabezados h1-h6.
• Crear un orden de tabulación coherente en formularios y enlaces.
• Utilizar etiquetas estructurales o elementos semánticos.

2.3.3. Técnicas CSS

• Facilitar mecanismos para que se pueda modificar la hoja de estilos CSS: colores, fuentes, etc.
• Separar la estructura de los estilos y no utilizar estilos en línea.
• Utilizar tamaño de letra con medidas relativas.
• Incluir el foco en los elementos mediante la pseudo-clase :focus.
• Utilizar CSS para presentar el texto, controlar el espaciado, etc.

2.3.4. Javascript

• Aumentar los tiempos de acción.
• Soporte para utilizar tanto ratón como teclado.
• Validación de datos con alertas.
• Usar el DOM para manipular la página.
• Utilizar scripts para modificar el aspecto de la página, como el fondo.
• Utilizar scripts para hacer scroll por la página y que se pueda controlar.

2.3.5. Técnicas para servidor

• Aplicar redirecciones en lado del servidor (.htaccess)  y no en el cliente.

2.3.6. Técnicas WAI-ARIA

Las técnicas WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) proporcionan semántica, de tal forma que se pueden transmitir comportamientos de la interfaz de usuario e información estructural a las tecnologías de apoyo (por ejemplo, lectores de pantalla). La especificación de ARIA establece componentes que definen roles, estados y propiedades de los elementos de la interfaz de usuario.

Algunas de las técnicas que se especifican consisten en utilizar los atributos que definen los componentes:

• aria-label: etiquetar objetos.
• aria-describedly: controles de la interfaz de usuario.
• aria-required: campos requeridos.
• aria-role: indicar el rol de un control y agrupar los controles de grupos.
• state y property para mostrar los estados de los componentes.
• aria landmarks para establecer las regiones de una página.

2.3.7. Otras técnicas

Además, puedes ver más técnicas relacionadas con el uso de otros elementos (documentos PDF u otros) en la web oficial.

2.4. Tabla de puntos de verificación

Partiendo de las Pautas de Accesibilidad para el Contenido en la Web, los diseñadores, desarrolladores o evaluadores que verifican y miden el nivel de accesibilidad en un sitio web, utilizan una tabla de puntos de verificación de accesibilidad para garantizar que el contenido sea accesible para todas las personas.

Cada punto de verificación corresponde a un aspecto de la accesibilidad, como proporcionar texto alternativo para imágenes, asegurar que el contenido sea navegable mediante el teclado, evitar parpadeos que puedan causar convulsiones, entre otros.

Cada desarrollador puede crear su propia tabla de puntos de verificación. En el siguiente enlace se muestra un ejemplo de tabla de puntos de verificación (en inglés). Esta tabla contiene una columna con los puntos a verificar y 3 columnas más (Sí, No, N/A) para indicar si se cumple la verificación. w3.org/TR/WAI-WEBCONTENT/full-checklist

2.5. Niveles de prioridad  

La WCAG ofrece varios niveles de prioridades a la hora de aplicar las pautas de accesibilidad. De esta forma podemos saber cuáles son las acciones más importantes que debemos realizar. Son tres niveles de prioridades:

• Prioridad 1: Nivel básico y mínimo exigible. Este requisito esencial debe cumplirse, ya que, de no hacerlo, un grupo significativo de personas no podrá acceder correctamente a la información.
• Prioridad 2: Satisfacer este nivel eliminará importantes barreras de acceso a la información web.
• Prioridad 3: Nivel completo que mejorará la accesibilidad a la información web para usuarios que tengan dificultades para utilizar la interfaz.

2.6. Niveles de conformidad

Si se cumplen los niveles de prioridades se establecen varios niveles de conformidad que sirven de sello de accesibilidad.

• Nivel A: Prioridad 1.
• Nivel AA: Prioridades 1 y 2.
• Nivel AAA: Prioridades 1, 2 y 3.

Existen unos logos de conformidad que se pueden usar para indicar que una web cumple con cada uno de los niveles de prioridades establecidos. En la siguiente URL se pueden encontrar esos logos y cómo se utilizan: w3.org/WAI/standards-guidelines/wcag/conformance-logos/#logos

Ejercicio propuesto

Actividad 2.1

Comprueba si la combinación de colores de la web que has ido creando a lo largo del curso es accesible. Utiliza la herramienta Contrast Checker (también se puede usar la extensión WCAG Color contrast checker), la herramienta de experte o Wave y adjunta una captura de pantalla del resultado obtenido. A continuación realiza las modificaciones oportunas.

Actividad 2.2

Utiliza la herramienta Textise para visualizar en modo texto la web que has ido creando a lo largo del curso y comprueba si los textos alternativos son correctos. Realiza los cambios oportunos.

Actividad 2.3

Utiliza la herramienta Taw para analizar la accesibilidad de la página web que has creado a lo largo del curso (inicio, servicios, formulario y blog). Explica los errores encontrados (indica su categoría: perceptible, operable, comprensible y robusto), su posible solución y adjunta capturas de pantalla, si fuese necesario.

Actividad 2.4

Analiza la accesibilidad de tu sitio web mediante la herramienta accessibilitychecker.org. Explica los errores encontrados, su posible solución y adjunta capturas de pantalla, si fuese necesario. 

Actividad 2.5

Como hemos visto, Bootstrap nos ayuda a que nuestros sitios web sean accesibles incluyendo en los ejemplos de código los elementos y atributos HTML recomendados para conseguir aplicaciones accesibles. Analiza la página web que creaste en la práctica de Bootstrap y encuentra los atributos WAI-ARIA utilizados. Fíjate, por ejemplo, en los atributos role y aria-hidden. Explica por qué se han utilizado esos atributos.

Actividad 2.6

Corrige los errores de accesibilidad encontrados en los puntos anteriores. Añade el símbolo o logotipo correspondiente de accesibilidad según el nivel de conformidad alcanzado.