Web A11y - Haz tu web accesible
¿Qué es la accesibilidad?
La accesibilidad es la cualidad que permite que una persona, independientemente de sus capacidades físicas, sensoriales, cognitivas o técnicas, pueda utilizar un objeto, visitar un lugar o acceder a un servicio en condiciones de igualdad, autonomía y comodidad.
En este post hablaremos de la accesibilidad web, comúnmente abreviada como a11y.
¿Por qué necesitamos accesibilidad en la web?
1. Razones sociales y éticas
Según la Organización Mundial de la Salud (OMS), aproximadamente un 16% de la población mundial (~1300 millones de personas) experimenta algún tipo de discapacidad importante.
En un mundo donde gran parte de nuestra vida profesional, personal y social transcurre en internet, la accesibilidad web ha pasado de ser una opción a una necesidad fundamental.
2. Un beneficio para TODOS (diseño universal)
La accesibilidad beneficia a todos los usuarios. Se basa en una idea clave del diseño universal:
Al diseñar para los casos más extremos, se mejora la experiencia para todos.
Esto no solo aplica a personas con discapacidades permanentes, sino también a cualquiera que se encuentre en situaciones temporales y contextuales:
- Personas mayores, cuyas capacidades (visión, audición, motricidad) pueden haber disminuido con la edad.
- Usuarios con una conexión a internet lenta, que se benefician de alternativas textuales en lugar de recursos gráficos pesados.
- Cualquier persona en un contexto adverso:
- Intentando ver un vídeo en un lugar público (puede leer los subtítulos).
- Usando el móvil en la playa bajo la luz del sol (se beneficia de un buen contraste de color).
- Usuarios con una discapacidad temporal, como alguien que se ha roto un brazo o que ha perdido sus gafas.
3. Razones legales y normativas
La falta de accesibilidad en un sitio web puede ser considerada una forma de discriminación, lo que puede acarrear sanciones legales. Existen leyes que obligan a que ciertos productos y servicios digitales sean accesibles:
4. Ventajas comerciales y de SEO
Implementar la accesibilidad es, además, una decisión de negocio inteligente:
- Ampliación del mercado: Una web accesible abre tu negocio a un segmento mucho mayor de la población.
- Mejora del SEO: Muchas prácticas de accesibilidad (como el uso de texto alternativo, una buena estructura de encabezados o un rendimiento optimizado) son también factores clave que mejoran las Core Web Vitals y el posicionamiento general en motores de búsqueda.
Entendiendo la accesibilidad web
Tecnologías de apoyo (ATs)
En el mundo del software, existen diferentes tecnologías de apoyo para diferentes tipos de discapacidad. Los siguientes ejemplos son los más conocidos, aunque no son los únicos:
- Lectores de pantalla: Programas que transforman texto en audio, lo que es útil para personas con visión reducida. También podemos destacar los lectores OCR para poder extraer el texto de imágenes y poder leerlo.
- Subtítulos automáticos: Programas que transforman el audio de vídeos o llamadas en texto para personas con discapacidad auditiva.
- Reconocimiento de voz: Útil para personas con movilidad reducida en las manos. Permiten controlar el ordenador o introducir textos mediante la voz.
La más común de estas tecnologías son los lectores de pantalla, que dependen fuertemente de encabezados, enlaces y etiquetas de formulario para la navegación.
El árbol de accesibilidad.
El árbol de accesibilidad es un componente clave en cómo los navegadores interactúan con estas tecnologías de apoyo.
Este árbol es una versión más simple del DOM y se compone de objetos con información clave que necesitan las tecnologías de apoyo. Por ejemplo, si en nuestro DOM tenemos etiquetas como <div> o <span>, en nuestro árbol de accesibilidad únicamente tendríamos aquellas con un significado semántico o que sean interactivas.
La información de cada objeto de nuestro árbol contiene la siguiente estructura:
- Rol: El propósito del elemento, por ejemplo:
button(botón),navigation(navegación),heading(encabezado),link(enlace), etc. - Nombre: Es la respuesta a la pregunta "¿qué es esto?". Si es una imagen, pondremos un texto alternativo o, por ejemplo, si es un botón con el icono de una papelera que nos borra un usuario de nuestra base de datos, pondríamos "Borrar usuario".
- Estado: Es la condición en la que se encuentra ese elemento. Por ejemplo, un botón puede tener un estado
disabledy no ser clicable, o uncheckboxpuede tener el estadochecked, que nos indica que está seleccionado. - Valor: Es el valor que tiene nuestro elemento. Por ejemplo, en un formulario en el que tenemos un elemento
<input/>para introducir tu nombre, el valor puede serÓscar.
A continuación, dejo una foto con la diferencia de un árbol DOM y un árbol de accesibilidad. Podemos comprobar que el primero es más complejo, ya que muestra cómo se conforma todo el layout, mientras que en el segundo solo aparecen los elementos que deben ser leídos por lectores de pantalla.
Auditando la accesibilidad
Para testear la accesibilidad podemos utilizar diversas herramientas:
- Tecnologías de apoyo
- Comprobadores de contraste (WebAIM Contrast Checker)
- Herramientas automatizadas como Lighthouse
Mediante Lighthouse podemos ver qué puntos pueden ser mejorados en cuanto a accesibilidad, por ejemplo, contrastes de color, falta de textos alternativos, elementos que pueden no ser leídos debido a su tamaño, etc. Sin embargo, algunos de los tests requieren que se realicen de forma manual, como probar la navegación por los menús usando el teclado. Para ello, debemos utilizar tecnologías de apoyo como lectores de pantalla o asistentes de inteligencia artificial.
Directrices de accesibilidad
Las WCAG (Web Content Accessibility Guidelines) son un conjunto de directrices establecidas por el World Wide Web Consortium (W3C) para hacer el contenido más accesible para las personas con discapacidad.
Actualmente, el estándar WCAG 2.2 cuenta con 13 pautas, que están organizadas bajo 4 principios: perceptible, operable, comprensible y robusto.
Para cada pauta existen criterios de conformidad que se clasifican en 3 niveles.
Niveles WCAG
Existen tres niveles para clasificar la accesibilidad: A, AA y AAA. El nivel A sería lo más básico y AAA sería lo más accesible.
Nivel A
Es el nivel más básico de accesibilidad web. Este nivel significa cumplir con los criterios mínimos para garantizar que sea usable por personas con discapacidad.
Los aspectos que se evalúan pueden ser que exista texto alternativo para las imágenes, que los elementos de navegación como menús sean usables mediante teclados, no depender del color para transmitir información o tener vídeos con subtítulos.
Aunque este nivel sea un buen comienzo para empezar a incluir accesibilidad en nuestra web, no es suficiente para que sea inclusivo para todo el mundo.
Nivel AA
Este nivel es el estándar recomendado. Elimina barreras, y algunos de los aspectos que se mejoran con respecto al anterior nivel son el contraste (entre el texto y el fondo, el contraste mínimo debe ser de 4.5:1), la posibilidad de hacer zoom al texto un 200% sin que la funcionalidad se vea afectada, subtítulos para contenido multimedia en directo y que la navegación siempre sea predecible.
Nivel AAA
El nivel AAA es el más accesible (aunque no siempre es práctico). Ideal para instituciones gubernamentales o contenido educativo, implementa las siguientes características: el uso del lenguaje debe ser más directo, simple y fácil de procesar; que sea compatible con tecnologías de apoyo como lectores de braille; intérprete de lenguaje de signos en contenido multimedia pregrabado; descripciones de audio extendidas para vídeos; contraste mínimo de 7:1 entre texto y fondo, etc.
Contraste del texto
El contraste del color entre el fondo y el texto debe ser lo suficientemente alto como para garantizar la legibilidad.
| Contenido | Nivel AA | Nivel AAA |
|---|---|---|
| Cuerpo de texto | 4.5 : 1 | 7 : 1 |
| Texto a gran escala (120-150% mayor que el cuerpo de texto) | 3 : 1 | 4.5 : 1 |
| Componentes activos de la UI como iconos y gráficos | 3 : 1 | N/A |
En la página web de (WebAIM Contrast Checker) podemos probar el ratio y nivel de accesibilidad que obtendríamos al introducir un color de fondo y de texto.
En el primer ejemplo, he probado con el color navy de Gyrus para el texto y el color primary (amarillo) de Gyrus para el fondo (obtenemos un ratio de 9.04 : 1, es decir, obtenemos nivel AAA en este aspecto).
En el siguiente ejemplo, he usado de fondo primary amarillo del logo de Gyrus y de color de texto blanco. El ratio sería 1.54 : 1, por lo que no pasamos ningún test de accesibilidad.
HTML semántico
Esto es la base de todo. Si la estructura está bien formada, las tecnologías de apoyo podrán interpretar una web de forma correcta.
En vez de utilizar etiquetas <div> para todo, se recomienda utilizar etiquetas semánticas para dar mayor significado (esto es útil también para la experiencia de desarrollo). Las etiquetas que puedes utilizar en lugar de div pueden ser <nav>, <article>, <footer>, <section>, etc.
<!-- No hagas esto -->
<div class="navbar">GyrusDS</div>
<!-- Haz esto -->
<nav>GyrusDS</nav>
También debemos usar encabezados para crear un esquema jerárquico, úsalos en orden y sin saltarte niveles, si tienes un <h1> y un <h3>, está mal, debido a que falta un <h2> entre ellos.
Para listas debes utilizar las etiquetas <ul>, <ol> o <dl> para agrupar elementos que estén relacionados dando al usuario el contexto necesario.
Texto alternativo
El texto alternativo es una descripción textual que se añade a una imagen mediante el atributo alt a la etiqueta <img/>
Es usado por lectores de pantalla para describir imágenes, la descripción debe ser clara y concisa.
La implementación sería algo así:
<img src="gato.jpg" alt="Un gato jugando con una pelota roja" />
Es posible que la imagen no deba ser leída por un lector de pantallas, ya que puede ser un elemento decorativo como un fondo, patrones, etc..., en este caso debemos usar la etiqueta alt pero vacía
<img src="fondo.png" alt="" />
No es lo mismo no tener alt que tener un alt vacío, no tener alt puede ser una falla de accesibilidad.
El texto alternativo no siempre es usado para personas con discapacidad, si la imagen falla y no carga puede ser útil para que el usuario de nuestra web pueda tener contexto de lo que era esa imagen. También es útil si la conexión a internet es lenta.
Formularios
Este es un punto en donde más fallos de accesibilidad se cometen.
- Etiquetas (labels): Cada campo de entrada de texto
<input>,<textarea>,<select>, etc... debe tener una etiqueta<label>asociada mediante el atributoforque apunta aliddel elemento, esto le dice al lector de pantalla para qué es ese campo y además aumenta el área clicable.
<form>
<!-- resto del código -->
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" />
<!-- resto del código -->
</form>
-
Agrupación de campos: Cuando tienes un grupo de opciones que estén relacionadas (como varios radio buttons para una sola pregunta), deben agruparse dentro de un
<fieldset>. La etiqueta<legend>actúa como el título para todo ese grupo. -
Manejos de error: Los errores de validación deben ser claros, específicos y estar asociados programáticamente al campo incorrecto (podemos usar
aria-describedby) para que el lector de pantalla los anuncie cuando el usuario llegue a ese campo.
Interactividad y navegación
Un usuario se debe mover por tu web usando únicamente el teclado, usando la tecla tab para desplazarse y Espacio o Enter para activar un elemento (un checkbox por ejemplo).
Además debe existir un foco visible (focus ring), cuando navegas con teclado por ejemplo a un botón debe haber una especie de anillo o borde (que muchas veces es eliminado por desarrolladores mediante outline: none) para saber qué elemento está siendo seleccionado.
Con el atributo tabindex podemos controlar el foco, si el valor es 0: tabindex="0", el elemento será enfocable en su orden lógico
<div tabindex="0" role="button">clickame</div>
Si el valor es -1, el elemento solo será enfocable con JavaScript
<button id="open-modal-btn">Abrir Modal</button>
<div
id="mi-modal"
role="dialog"
tabindex="-1"
aria-labelledby="modal-title"
aria-modal="true"
hidden
>
<h2 id="modal-title">Título del Modal</h2>
<p>Contenido del modal...</p>
<button id="close-modal-btn">Cerrar</button>
</div>
const openBtn = document.querySelector('#open-modal-btn');
const closeBtn = document.querySelector('#close-modal-btn');
const modal = document.querySelector('#mi-modal');
openBtn.addEventListener('click', () => {
modal.hidden = false;
modal.focus();
});
closeBtn.addEventListener('click', () => {
modal.hidden = true;
openBtn.focus();
});
Sin embargo, si el valor de tabindex es positivo, el elemento entra en tabulación en el orden que hayamos puesto, esto no se debe hacer ya que es una mala práctica que rompe la accesibilidad.
Contenido dinámico y ARIA
Para aplicaciones web modernas el HTML no es suficiente. Aquí es donde entra en juego ARIA (Accesible Rich Internet Applications). Son un conjunto de atributos que puedes añadir a tu HTML para mejorar la accesibilidad de componentes complejos (modales, carruseles, pestañas, etc.) que no tienen una etiqueta HTML nativa.
No uses ARIA si existe una etiqueta semántica HTML para ello.
Roles, estados y propiedades:
-
Roles: Describen el propósito de un componente, por ejemplo:
role="dialog"(para un modal),role="tablist"(para un grupo de pestañas). -
Estados: Describen la condición actual de un elemento:
aria-expanded="true"(un menú está desplegado),aria-selected="false"(una pestaña no está seleccionada). -
Propiedades: Aportan significado extra, por ejemplo
aria-label(para dar un nombre accesible a un botón que solo tiene un icono),aria-describedby(para asociar una descripción a un elemento).
Contenido multimedia
- Subtítulos y descripciones: Los vídeos deben tener subtítulos para personas con discapacidad auditiva.
- Audio descriptivo: Una narración adicional que describa el video puede ser útil para aquellas personas con algún problema de visión.
Espero que esta guía te haya servido para entender mejor el universo de la accesibilidad y te sientas más preparado para implementarla. No te vuelvas loco intentando aplicarlo todo de golpe. La clave, como en todo en el desarrollo, es empezar paso a paso.