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.

Veamos resumen de las pautas WCAG más relevantes extraídas de w3.org.

2.2.1. Perceptible

• Alternativas textuales para todo contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple.
• Alternativas para el contenido multimedia.
• Contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.
• Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo.

2.2.2. Operable

• Acceso a toda la funcionalidad mediante el teclado.
• Tiempo suficiente para leer y usar el contenido.
• No diseñar contenido de un modo que pueda provocar ataques, espasmos o convulsiones.
• Medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

2.2.3. Comprensible

• Contenidos textuales legibles y comprensibles.
• Páginas web que aparezcan y operen de manera predecible.
• Ayudar a los usuarios a evitar y corregir los errores.

2.2.4. Robusto

• Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.

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 PDF, Flash, Silverlight, etc. 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 clave 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 mínimo exigible y requisito esencial que se debe satisfacer. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información. 
• Prioridad 2: Satisfacer este punto de verificación eliminará importantes barreras de acceso a la información Web.
• Prioridad 3: Satisfacer este punto de verificación mejorará la accesibilidad a la información web a 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

Ejercicios

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.