Accesibilidad web: qué son las WCAG y cómo revisar tu propia web

1. ¿Qué es la accesibilidad web?

Una web accesible es la que se puede usar sin importar cómo vea, oiga, se mueva o procese la información cada persona. Una persona ciega la recorre con un lector de pantalla, alguien con temblor en las manos solo con el teclado, una persona mayor amplía el texto al 200 % y alguien a pleno sol intenta leer un texto gris sobre fondo blanco.

No es un grupo reducido. Las limitaciones de vista, oído o destreza manual afectan a una parte importante de la sociedad y, con la edad, a casi todo el mundo. A eso se suman las temporales: un brazo roto, el móvil en una mano en el autobús, un sitio ruidoso sin auriculares.

2. Las WCAG 2.1 AA explicadas: cuatro principios

En la práctica, una «web accesible» significa cumplir las pautas WCAG (Web Content Accessibility Guidelines) en el nivel AA, un estándar internacional elaborado por el W3C, el organismo que define los estándares de la web. Suenan técnicas, pero se resumen en cuatro principios:

• —Perceptible: el contenido se puede percibir por distintos sentidos: las imágenes con información tienen descripción de texto, los vídeos subtítulos y el texto suficiente contraste con el fondo.
• —Operable: todo funciona con el teclado, se ve qué elemento está activo y nada desaparece antes de que el usuario pueda leerlo.
• —Comprensible: los formularios tienen etiquetas y mensajes de error claros, y la navegación se comporta de forma predecible en todas las páginas.
• —Robusto: el código es correcto y está descrito de forma que los lectores de pantalla entienden qué es un botón, un encabezado o una lista.

3. Cómo comprobar la accesibilidad de tu web en 15 minutos

Una auditoría completa es trabajo de especialistas, pero los problemas más grandes los puedes detectar tú:

1. 1.Deja el ratón y recorre la web con la tecla Tab. ¿Ves dónde estás? ¿Llegas al menú, al formulario y al botón de envío? ¿Puedes cerrar el aviso de cookies?
2. 2.Pasa Lighthouse en Chrome (DevTools → Lighthouse → Accesibilidad) o la extensión gratuita WAVE. Muestran descripciones de imágenes que faltan, etiquetas de formulario y contraste insuficiente.
3. 3.Amplía la página al 200 % (Ctrl y más). El texto no debería solaparse ni salirse de la pantalla.
4. 4.Rellena el formulario de contacto con un error. ¿El mensaje dice qué falla y dónde, o solo pone el campo en rojo?
5. 5.Activa un lector de pantalla (VoiceOver en iPhone o TalkBack en Android) y escucha tu portada durante un minuto.

Las herramientas automáticas solo detectan parte de los problemas: no pueden juzgar si una descripción tiene sentido ni si el orden del contenido es lógico. Pero son un buen punto de partida y gratuito.

4. Los errores de accesibilidad más comunes en webs de empresa

En las webs de pequeñas empresas se repiten los mismos problemas:

• —Poco contraste: texto gris claro sobre blanco, o texto sobre una foto sin oscurecer. Las WCAG exigen un contraste mínimo de 4,5:1 para el texto normal.
• —Imágenes sin texto alternativo: fotos de productos, una tarifa subida como imagen, iconos sin etiqueta. El lector de pantalla lee entonces el nombre del archivo, o nada.
• —Formularios sin etiquetas: un campo descrito solo con un texto gris dentro que desaparece al escribir. El lector no sabe para qué es el campo y, al poco, el usuario tampoco.
• —Foco oculto: el contorno del elemento activo desactivado porque «queda feo». Para quien navega con teclado es como un cursor que ha desaparecido.
• —Enlaces «haz clic aquí»: los lectores de pantalla pueden mostrar solo la lista de enlaces: diez veces «más» no dice nada.
• —Animaciones que no se pueden desactivar: el movimiento que no se puede parar molesta a personas con trastornos vestibulares o de atención. La web debería respetar el ajuste del sistema de reducir movimiento.

5. Accesibilidad, SEO y conversión

La accesibilidad y el SEO tienen mucho en común. El rastreador de Google «lee» una página de forma parecida a un lector de pantalla: necesita una estructura de encabezados correcta, descripciones de imágenes, textos de enlace con sentido y el contenido en HTML, no en imágenes.

Con la conversión pasa lo mismo. Un contraste legible, campos de formulario grandes y mensajes de error claros ayudan a cualquiera que navegue desde el móvil sobre la marcha, es decir, a la mayoría de tus clientes.

6. Preguntas frecuentes sobre accesibilidad web

¿Una web accesible tiene que verse peor?

No. Un contraste suficiente, un foco visible y formularios legibles son cuestión de diseño, no de renunciar a la estética. Las webs mejor diseñadas suelen ser accesibles precisamente porque alguien lo pensó desde el principio.

¿Basta con un widget o superposición de accesibilidad?

No. Los botones que agrandan el texto o cambian el contraste no arreglan los problemas del código: etiquetas que faltan, un orden de contenido incorrecto o un teclado que no funciona. La accesibilidad se construye dentro de la web, no se añade encima.

¿Cuánto cuesta adaptar una web a las WCAG?

Depende del punto de partida. En una web nueva, la accesibilidad incorporada desde el principio cuesta poco más que prescindir de ella. En una web antigua y pesada, los arreglos pueden salir más caros que rehacerla.

7. Por dónde empezar

Haz la prueba con el teclado y con Lighthouse del punto tres en tu portada y en tu formulario de contacto. Son los dos lugares donde una barrera te cuesta un cliente con más frecuencia.

Junto con la velocidad y el SEO técnico, la accesibilidad viene de serie en todas las webs que construyo. Envíame la dirección de tu web y en 48 horas recibirás un presupuesto gratuito, junto con lo que más la bloquea.