1. Una web que puedan usar todos
Una de cada seis personas en el mundo tiene alguna discapacidad, y en España son más de cuatro millones. Hay personas ciegas que navegan con un lector de pantalla que les lee la página en voz alta; personas con baja visión que amplían el texto al 200 %; personas que no pueden usar un ratón y navegan con el teclado o con un pulsador; personas sordas que necesitan subtítulos; y personas con dificultades cognitivas a las que un texto confuso deja fuera. Y a todas ellas se suman situaciones temporales: un brazo roto, el sol sobre la pantalla del móvil o una conexión lenta.
La accesibilidad web consiste en diseñar y programar para que nadie quede fuera. No es un añadido de última hora: si se tiene en cuenta desde el principio cuesta poco, y casi todo lo que la mejora (buen contraste, textos claros, estructura ordenada) mejora también la experiencia de todos y el posicionamiento en buscadores.
También es una obligación legal
2. Las pautas WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG), del W3C, son la referencia mundial. La versión actual es la 2.2. Se organizan en cuatro principios, que se recuerdan con el acrónimo POUR, y cada criterio tiene un nivel: A (lo mínimo), AA (el exigido por ley y el objetivo razonable de cualquier web) y AAA (el máximo, para contextos especiales).
Los cuatro principios de WCAG
| Criterio | Nivel | Qué pide |
|---|---|---|
| 1.1.1 Contenido no textual | A | Alternativa textual para imágenes y controles no textuales |
| 1.3.1 Información y relaciones | A | La estructura (encabezados, listas, etiquetas de formularios) está en el código, no solo en el aspecto |
| 1.4.3 Contraste mínimo | AA | 4,5:1 para texto normal y 3:1 para texto grande |
| 1.4.10 Reajuste (reflow) | AA | Se puede usar a 320px de ancho sin desplazamiento horizontal |
| 2.1.1 Teclado | A | Toda la funcionalidad se puede usar con el teclado |
| 2.4.7 Foco visible | AA | Siempre se ve qué elemento tiene el foco |
| 3.3.1 Identificación de errores | A | Los errores se describen con texto, no solo con color |
| 4.1.2 Nombre, función y valor | A | Cada control tiene un nombre accesible y un rol correcto |
3. HTML semántico: la base de todo
El mayor avance en accesibilidad no requiere técnicas especiales, sino usar cada etiqueta HTML para lo que es. Un <button> ya se puede enfocar con el tabulador, se activa con Enter y Espacio y el lector de pantalla lo anuncia como botón; un <div> con un onclick no hace nada de eso. Los encabezados en orden permiten saltar de sección en sección; las regiones (<header>, <nav>, <main>, <footer>) permiten ir directamente al contenido; y un <label> bien asociado hace que el lector anuncie qué hay que escribir en cada campo.
ARIA: cuando HTML no llega
WAI-ARIA es un conjunto de atributos que añaden información para las tecnologías de apoyo: roles (role="alert", role="tab"), estados (aria-expanded, aria-selected) y relaciones (aria-describedby, aria-controls). La primera regla de ARIA es no usarlo si existe un elemento HTML que ya hace lo que necesitas, porque un ARIA mal puesto es peor que ninguno.
1<!-- Botón que despliega un menú -->
2<button aria-expanded="false" aria-controls="menu-cuenta">Mi cuenta</button>
3<ul id="menu-cuenta" hidden> … </ul>
4
5<!-- Un mensaje que el lector de pantalla anuncia en cuanto aparece -->
6<p role="status">Producto añadido al carrito</p>
7
8<!-- Enlace para saltar directamente al contenido (visible al recibir el foco) -->
9<a class="saltar" href="#contenido">Saltar al contenido</a>4. Teclado, foco y color
- Todo con el teclado: recorre tu página solo con Tab, Mayús + Tab, Enter, Espacio y las flechas. Si algo no se alcanza o no se puede activar, no es accesible.
- El foco siempre visible: nunca pongas
outline: nonesin un estilo de foco alternativo. Usa:focus-visiblepara mostrarlo al navegar con teclado sin molestar con el ratón. - Orden lógico: el orden del tabulador sigue el del HTML; no lo alteres con
tabindexpositivos. - No confíes solo en el color: un campo con error no puede distinguirse únicamente por un borde rojo, porque las personas daltónicas (un 8 % de los hombres) pueden no verlo. Añade un icono y un texto.
- Contraste: 4,5:1 para el texto normal y 3:1 para el texto grande y los componentes de la interfaz.
5. Cómo se verifica la accesibilidad
Las herramientas automáticas detectan en torno a un tercio de los problemas, así que se combinan con revisiones manuales y, si es posible, con pruebas con usuarios reales.
- Herramientas automáticas: Lighthouse (en las DevTools), axe DevTools o WAVE señalan contrastes, textos alternativos, etiquetas o ARIA incorrecto.
- Revisión con teclado: recorrer la página sin ratón.
- Zoom al 200 % y ancho de 320px: comprobar que nada se corta ni se solapa.
- Lector de pantalla: NVDA (gratuito, Windows), VoiceOver (Mac e iPhone) o TalkBack (Android).
- Declaración de accesibilidad: las webs públicas deben publicar su nivel de cumplimiento y un canal para comunicar problemas.
6. Retos
El primer reto calcula el contraste real de los colores con la fórmula de WCAG; los otros dos revisan el HTML como lo haría una auditoría de accesibilidad.
Los tres componentes tienen un contraste insuficiente. Cambia solo los colores para que el texto de .aviso, .enlace y .boton tenga un contraste de al menos 4,5:1 con su fondo (el mínimo de WCAG AA para texto normal), manteniendo el tono de cada uno (gris, azul y ámbar).
Este formulario solo se puede usar con ratón y vista. Corrígelo: cada campo con su <label> asociado (for e id); nombre y email obligatorios con required; la pista del email («Te enviaremos la confirmación») enlazada al campo con aria-describedby; las opciones de horario en un <fieldset> con su <legend>; el mensaje de error dentro de un contenedor con role="alert"; y un <button type="submit"> real en lugar del <div> que hace de botón.
Corrige la página: la foto del producto necesita un texto alternativo que la describa y la línea decorativa un alt vacío; los encabezados deben ir en orden (h1 y después h2, sin saltar niveles); el enlace «Pulsa aquí» debe describir su destino por sí mismo; el botón de cerrar, que solo tiene un icono, necesita un nombre accesible; y la página debe declarar su idioma en un elemento <main lang="es">.