Los Cuatro Principios de WCAG

La accesibilidad web es un componente fundamental del desarrollo de software inclusivo. Para garantizar que todas las personas, incluidas las personas con discapacidad, puedan acceder y usar los sitios web de manera efectiva, se han desarrollado estándares como las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés).

Estas pautas están organizadas en torno a cuatro principios fundamentales: Perceptible, Operable, Comprensible y Robusto.

Perceptible: Hacer el contenido visible y comprensible para todos

El principio de perceptibilidad establece que la información y los componentes de la interfaz de usuario deben ser presentados de manera que todos los usuarios puedan percibirlos, independientemente de sus capacidades sensoriales.

Muchas personas con discapacidad dependen de tecnologías de asistencia, como lectores de pantalla, para acceder a la web. Sin alternativas textuales o contenido adaptable, podrían perder información crítica.

¿Qué implica este principio?

El contenido visual debe ser accesible para personas con discapacidad visual parcial o total.
El contenido auditivo debe ser accesible para personas con discapacidad auditiva.
La información no debe depender exclusivamente de un solo sentido (por ejemplo, solo de la vista o del oído).

Pautas clave para este principio

Las WCAG establecen varias pautas para cumplir este principio:

Alternativas textuales: Todo contenido no textual, como imágenes, botones y gráficos, debe tener descripciones en texto que transmitan la misma información o funcionalidad.
Contenido adaptable: La presentación del contenido no debe depender exclusivamente de un diseño fijo y debe poder adaptarse a diferentes configuraciones.
Distinguibilidad: Los usuarios deben poder ver y oír el contenido claramente, evitando combinaciones de colores con un bajo nivel de contraste y asegurando que el texto sea legible.

Operable: Garantizar que los usuarios puedan interactuar con la interfaz

El principio de operabilidad se centra en que los usuarios puedan navegar, interactuar y utilizar todas las funciones de un sitio web sin barreras.

Las personas con discapacidad motora pueden ser incapaces de usar un ratón, por lo que necesitan opciones alternativas de navegación. Además, un diseño operable mejora la experiencia para todas las personas, incluyendo aquellas con limitaciones temporales o dispositivos distintos (como móviles o tabletas).

¿Qué implica este principio?

Los usuarios deben poder navegar por el contenido mediante distintos métodos de entrada (teclado, voz, dispositivos de asistencia, etc.).
La interfaz debe evitar elementos que provoquen convulsiones o reacciones adversas.
Se debe proporcionar suficiente tiempo para completar tareas sin restricciones de tiempo o de capacidades físicas o sensoriales.

Pautas clave para este principio

Las WCAG incluyen las siguientes pautas:

Accesible desde el teclado: Todos los elementos interactivos deben ser operables sin necesidad de un ratón.
Tiempo suficiente: Se debe permitir a los usuarios extender o eliminar los límites de tiempo para completar tareas.
Evitar contenido que cause convulsiones: No debe haber destellos ni parpadeos excesivos.
Navegabilidad mejorada: Se deben proporcionar mecanismos de navegación clara y estructura lógica en la página.

Comprensible: Asegurar que el contenido sea claro y predecible

El principio de comprensibilidad establece que la información y el manejo de la interfaz deben ser fáciles de entender para todos los usuarios.

Las personas con discapacidad cognitiva o dificultades de aprendizaje pueden tener problemas para comprender textos complejos o instrucciones ambiguas. Además, una interfaz clara y predecible beneficia a todas las personas, reduciendo la fricción en la experiencia de navegación.

¿Qué implica este principio?

El lenguaje debe ser claro y conciso.
La navegación y el diseño de la interfaz deben seguir patrones predecibles.
Se deben proporcionar ayudas cuando sea necesario (como sugerencias en formularios).

Pautas clave para este principio

Las WCAG proponen:

Lenguaje legible y comprensible: Se recomienda usar un lenguaje claro, evitar jerga técnica y proporcionar definiciones cuando sea necesario.
Previsibilidad: Los elementos interactivos deben comportarse de manera consistente en todas las páginas.
Asistencia para la entrada de datos: Se deben incluir etiquetas claras, instrucciones y mensajes de error comprensibles.

Robusto: Asegurar la compatibilidad con diferentes tecnologías y futuros desarrollos

El principio de robustez se refiere a la necesidad de que el contenido web sea compatible con una amplia variedad de tecnologías actuales y futuras.

Las herramientas de asistencia dependen de estándares bien definidos para acceder al contenido web. Si un sitio web usa código incorrecto o elementos no estándar, puede volverse inaccesible para algunas personas que utilicen estas herramientas de asistencia. Además, la robustez permite que el contenido siga siendo accesible a medida que las tecnologías evolucionan.

¿Qué implica este principio?

El contenido debe poder interpretarse correctamente en distintos navegadores, dispositivos y tecnologías de asistencia.
El código debe seguir estándares accesibles y ser semánticamente correcto.

Pautas clave para este principio

Las WCAG incluyen:

Compatibilidad con tecnologías de asistencia: Se deben utilizar estándares accesibles y etiquetas semánticas adecuadas (como el uso correcto de HTML y ARIA).
Uso correcto del marcado: El código debe estar bien estructurado para evitar errores de interpretación.

La importancia de los encabezados para la accesibilidad web y móvil

Cuando navegamos por una interfaz web o una aplicación móvil, probablemente no somos conscientes de la importancia que tienen los encabezados. Para la mayoría de los usuarios estas marcas semánticas sólo se aprecian por un cambio de tamaño del texto o por un resaltado de su aspecto visual pero para personas con discapacidad visual o cognitiva resultan imprescindibles para comprender mejor la interfaz que están navegando.

¿Qué son los encabezados?

Los encabezados son elementos que organizan y estructuran el contenido de una página o pantalla. En HTML, estos se definen mediante marcas semánticas o etiquetas como <h1>, <h2>, <h3>, y así sucesivamente hasta <h6>. En interfaces móviles, los encabezados suelen representarse como texto destacado o títulos que dividen secciones de contenido y utilizan atributos de la API de accesibilidad para que esos bloques de texto sean identificados como encabezados semánticos.

Para los usuarios sin discapacidad visual, los encabezados facilitan una comprensión visual rápida del contenido y su jerarquía. en cambio, para los usuarios que dependen de tecnologías de asistencia como lectores de pantalla, los encabezados son mucho más que un simple formato: son un mapa estructural que permite moverse rápidamente por la página o la app.

Por ejemplo, una persona ciega que usa un lector de pantalla puede saltar entre los encabezados para encontrar secciones específicas sin tener que escuchar todo el contenido desde el principio. Esto es especialmente útil en páginas con mucho texto o pantallas móviles con varias secciones de información.
Para las personas con discapacidad cognitiva esta estructura de encabezados les permite asimilar y comprender cómo se ha estructurado la información y los elementos de navegación en la interfaz.

Encabezados en WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) incluyen un criterio específico que aborda la correcta implementación de los encabezados. Este criterio está relacionado con el principio de Perceptible y se resume así:

Criterio 2.4.10 – Encabezados de sección (Section Headings)

Este criterio establece que, si el contenido está dividido en secciones, cada una debe contar con un encabezado descriptivo que refleje su propósito o tema. Esto no solo mejora la navegación, sino también la comprensión del contenido. Puedes leer más detalles sobre el criterio 2.4.10 en la página oficial del W3C.

Para cumplir con este criterio debemos asegurarnos de:
• Usar encabezados de forma jerárquica y lógica (por ejemplo, <h1> para el título principal, <h2> para subtítulos, etc.).
• Los encabezados deben ser descriptivos. Un encabezado como “Servicios” es claro, pero uno como “Más información” es ambiguo.
• Evitar saltos innecesarios en los niveles de encabezado (por ejemplo, pasar de un <h1> directamente a un <h3> sin un <h2> intermedio).

Buenas prácticas

A la hora de estructurar los contenidos de una interfaz web o de una pantalla de una aplicación es aconsejable seguir los siguientes puntos:
1. Respetar una estructura jerárquica

El encabezado principal de la página o pantalla debe ser un <h1>. A partir de ahí, usa <h2> para las subsecciones principales, <h3> para las subsecciones de estas, y así sucesivamente. Esto crea un flujo lógico que las tecnologías de asistencia pueden interpretar fácilmente.

Ejemplo en HTML:

<h1>Recetas saludables</h1>
<h2>Desayunos</h2>
<h3>Zumos y batidos saludables</h3>
<h3>Tostadas con aguacate</h3>
<h2>Cenas</h2>
<h3>Ensaladas ligeras</h3>
<h3>Sopas nutritivas</h3>

2. Prohibido usar encabezados para aplicar un estilo visual a un texto

Es común usar etiquetas de encabezado simplemente porque hacen el texto más grande o más llamativo. Esto es un error, ya que confunde a los usuarios de lectores de pantalla. Si es necesario aplicar un estilo concreto a un texto grande sin que sea un encabezado, es aconsejable usar estilos CSS en lugar de etiquetas como <h1>.

3. Los encabezados deben ser claros y concisos

Un buen encabezado es breve y refleja con precisión el contenido de su sección. Por ejemplo, “Configuración avanzada” es mejor que “Detalles sobre las configuraciones avanzadas”.

Cómo comprobar la accesibilidad de los encabezados

Muchas herramientas automatizadas para la detección de barreras de accesibilidad identifican la mayoría de problemas relacionados con el criterio WCAG 2.4.10. Tanto Wave como Lighthouse o Axe pueden detectar si falta algún encabezado o si se han utilizado de manera incorrecta.
En cualquier caso es muy recomendable realizar una verificación manual utilizando un lector de pantallas como NVDA, VoiceOver, TalkBack o JAWS. Todos estos lectores de pantalla incorporan funciones para navegar por encabezados o mostrar una lista con los encabezados detectados.

Accesibilidad en los títulos de página

Los desarrolladores web y las herramientas de desarrollo van incorporando poco a poco elementos que van reduciendo la complejidad y la severidad de las barreras de accesibilidad presentes en las páginas de nueva creación. Pero estos esfuerzos se centran principalmente en las alternativas a imágenes, contrastes de color y, a veces, la estructura semántica de las páginas. En muchos casos siguen apareciendo barreras de accesibilidad relacionadas con la comprensión del sitio que se está navegando o de los mecanismos de navegación y orientación en un sitio web. En la mayoría de ocasiones este problema se debe al desconocimiento de las necesidades de estos mecanismos de orientación y navegación.

Título de página

El título de una página web es un mecanismo de orientación al que no se le presta actualmente mucha importancia. Incluso en muchos casos el desarrollador desconoce cómo cambiar el valor del título de la página sobre todo si desarrolla webs del tipo Single Page Application en la que toda la experiencia de navegación aparentemente se desarrolla sin saltar a otras páginas web.

El título de una página web es un mecanismo de navegación muy útil para personas con discapacidad que no pueden comprender una página de un vistazo.

Esta necesidad de accesibilidad se recoge en el criterio de éxito 2.4.2 de WCAG 2.0. Puedes leer la documentación oficial de la WAI para el criterio de éxito 2.4.2 understanding page titled.

Este criterio de éxito es de nivel A por lo que es de obligado cumplimiento en todas las legislaciones nacionales de Europa y Estados Unidos así como en las legislaciones de otros países ya que en todos ellos el nivel de mínimo cumplimiento legal es el de AA.

Título de página apropiado

Se considera como válido y accesible un título de página que identifique claramente el propósito y el contenido de la página que se está consultando.

En muchos casos el título de las páginas consiste en el uso del nombre de la empresa o producto que se está consultando. 

Imaginemos por ejemplo la experiencia de navegación por un sitio web especializado en la venta de productos de jardinería. Lo habitual es encontrar que el título de todas las páginas es algo como El jardinero en casa. Y utiliza este valor para titular todas las páginas del sitio web. Esto hace que el título de la página no ayude como mecanismo de orientación.

Sigamos imaginando y en nuestro sitio de jardinería encontramos que hay secciones de quienes somos, contactar, tienda, noticias y galería de fotos. Con esta complejidad en la estructura de secciones y contenidos es cada vez más necesario un título de página que refleje la sección que estamos consultando sin olvidar el nombre del sitio web. Un título de página más apropiado para estos contenidos podría ser: El jardinero en casa – quienes somos.

Pero si seguimos profundizando en la experiencia de navegación y nos movemos dentro de la tienda consultando productos el título de página que muestra el nombre del sitio y la sección no es suficiente. Además debemos añadir al título de página el nombre del contenido concreto que estamos consultando en esa página. Un título de página más apropiado sería: El jardinero en casa – Tienda – Tijeras de podar modelo Acme.

Con esta información una persona puede comprender dónde está y qué contenido principal se va a encontrar en la página.

Declaración del título de página

La declaración del título de página se realiza dentro del fichero HTML en la cabecera de la página (elemento <head></head>) y se utiliza el tag <title>.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />

    <title>El título de la página</title>

  </head>

  <body></body>

</html>

Esta declaración dentro del código HTML es apropiada cuando utilizamos tecnologías en las que tenemos total control del código HTML que se envía a los navegadores web de los usuarios.

En el caso de utilizar tecnologías como las utilizadas en las Single Page Applications como React o Angular debemos hacer uso de Javascript para actualizar el valor del título de la página.

La propiedad title del objeto document nos proporciona esta posibilidad de actualizar el título de nuestra página. Por ejemplo la siguiente línea en javascript actualizará el título de la página:

function setTitlePageWithProduct(productName) {

  document.title = "El jardinero en casa - Tienda - " + productName

}

Esta función se podría utilizar cada vez que se vaya a renderizar el componente que muestra la información del producto de la tienda.

Con toda esta información ya no hay excusas para que los desarrolladores no proporcionen buenos y accesibles títulos en sus páginas web.