No hace falta ser programador para detectar muchos de los problemas de accesibilidad que tiene una web. Algunos se ven a simple vista; otros se descubren con un par de pruebas sencillas. En este artículo te damos un checklist en lenguaje llano para que tú mismo, sin perfil técnico, puedas hacerte una primera idea de si tu web va por buen camino con las WCAG 2.1 nivel AA.

Importante antes de empezar: esto es una primera comprobación, no una auditoría completa. Al final te explicamos por qué.

1. Contraste de color

Qué es: la diferencia de luminosidad entre el texto y su fondo. Si el texto es gris claro sobre blanco, o blanco sobre un amarillo suave, cuesta leerlo.

Cómo comprobarlo: mira tu web con luz natural fuerte, o pídele a alguien mayor que lea un párrafo. Si entornan los ojos, tienes un problema. Sospecha especialmente de los textos en tonos pastel, los pies de foto en gris y el texto sobre imágenes.

A quién deja fuera: a personas con baja visión, daltonismo o presbicia, y a cualquiera que mire la pantalla con reflejos.

2. Textos alternativos en las imágenes

Qué es: una descripción escrita (el llamado texto alternativo o “alt”) que se asocia a cada imagen relevante. Una persona ciega no ve la foto; su lector de pantalla le lee esa descripción.

Cómo comprobarlo: revisa las imágenes que aportan información (un gráfico, una foto de producto, un icono con significado). Si no tienen descripción, o si pone algo como “imagen1.jpg”, no sirve. Las imágenes puramente decorativas sí pueden ir sin texto, pero deben marcarse como decorativas.

A quién deja fuera: a personas ciegas o con muy baja visión que usan lectores de pantalla.

3. Etiquetas en los formularios

Qué es: cada campo de un formulario (nombre, email, teléfono) debe tener una etiqueta asociada que diga qué hay que escribir ahí. No vale con un texto gris dentro del campo que desaparece al escribir.

Cómo comprobarlo: abre tu formulario de contacto o tu checkout. Haz clic en la etiqueta “Email” (no en el campo): si al hacerlo el cursor salta al campo correcto, está bien asociada. Si no pasa nada, probablemente la etiqueta no está conectada como debe.

A quién deja fuera: a usuarios de lector de pantalla, que no sabrán qué pide cada campo, y es una de las causas más frecuentes de carritos abandonados accesibles.

4. Navegación solo con el teclado

Qué es: poder usar toda la web sin ratón, moviéndote con el tabulador y pulsando Intro.

Cómo comprobarlo: suelta el ratón. Pulsa la tecla Tab repetidamente y observa. ¿Ves siempre dónde está el foco (un recuadro o resaltado que indica el elemento activo)? ¿Puedes llegar al menú, a los enlaces, a los botones y al formulario, y activarlos con Intro? Si el foco desaparece o hay sitios donde no puedes entrar, tienes una barrera.

A quién deja fuera: a personas con movilidad reducida que no pueden usar ratón, a usuarios de lectores de pantalla y a quien navega con teclados o conmutadores adaptados.

5. Títulos de página

Qué es: el título que aparece en la pestaña del navegador y que identifica cada página. Debe ser único y descriptivo.

Cómo comprobarlo: abre varias páginas de tu web en pestañas distintas y mira los títulos de las pestañas. Si todas ponen lo mismo (por ejemplo el nombre de la empresa a secas) o salen cosas como “Inicio - Inicio”, está mal. Cada página debería decir de qué va.

A quién deja fuera: a usuarios de lector de pantalla, que se orientan por el título, y en general a cualquiera con varias pestañas abiertas.

6. Idioma declarado

Qué es: la web debe indicar en su código en qué idioma está escrita (español, en este caso). Es un dato invisible para ti, pero esencial para la tecnología de apoyo.

Cómo comprobarlo: este es más técnico, pero hay una pista sencilla. Si un lector de pantalla lee tu web en español con acento y pronunciación correctos, el idioma está bien declarado. Si lo lee como si fuera inglés (pronunciando “hola” a la inglesa), falta la declaración de idioma.

A quién deja fuera: a usuarios de lector de pantalla, que oirán el contenido con una pronunciación incomprensible.

7. Zoom en el móvil

Qué es: poder ampliar la página con los dedos (pellizcando para hacer zoom) en el teléfono.

Cómo comprobarlo: abre tu web en el móvil e intenta ampliar con dos dedos. Si no te deja, alguien ha bloqueado el zoom (un error de configuración muy común). Las personas con baja visión necesitan ampliar para leer.

A quién deja fuera: a personas con baja visión o presbicia que usan el móvil.

8. Jerarquía de encabezados

Qué es: los títulos y subtítulos de tu contenido deben seguir un orden lógico (un título principal, luego sus apartados, luego subapartados), como el índice de un libro. No se trata solo de que se vean grandes o pequeños, sino de que estén marcados correctamente por debajo.

Cómo comprobarlo: mentalmente, repasa una página larga. ¿Hay un único título principal claro? ¿Los apartados cuelgan de él de forma ordenada? Si tu web “se ve” estructurada pero por dentro todo son textos sueltos del mismo nivel, los lectores de pantalla no podrán saltar entre secciones.

A quién deja fuera: a usuarios de lector de pantalla, que navegan saltando de encabezado en encabezado para no escuchar toda la página.

El límite de las herramientas automáticas

Quizá te suene que existen herramientas gratuitas como axe-core, WAVE o Lighthouse que analizan tu web y te listan errores. Son útiles y recomendables como primer paso. Pero tienen un límite que conviene conocer.

Las herramientas automáticas detectan aproximadamente entre el 30% y el 40% de los problemas de accesibilidad. El resto (la mayoría) no se puede comprobar con una máquina, porque requiere criterio humano.

Por ejemplo, una herramienta puede ver que una imagen tiene texto alternativo, pero no puede saber si ese texto describe bien la imagen. Puede ver que existe un encabezado, pero no si tiene sentido en su contexto. Esa parte solo la detecta una persona revisando con criterio, idealmente probando con un lector de pantalla real.

Por eso, pasar una herramienta automática y ver “0 errores” no significa que tu web cumpla. Significa que has superado la parte fácil.

En resumen

Repasa estos ocho puntos en tu web:

Contraste de texto suficiente.
Textos alternativos correctos en las imágenes con información.
Etiquetas asociadas en los formularios.
Navegación con teclado completa y con foco visible.
Títulos de página únicos y descriptivos.
Idioma declarado correctamente.
Zoom permitido en el móvil.
Jerarquía de encabezados ordenada.

Si fallas en varios, no es para alarmarse: la inmensa mayoría de webs en España suspende este examen. Lo importante es saberlo para poder corregirlo.

Pasa de la sospecha a los datos

Este checklist te da una primera intuición, pero la conformidad real con las WCAG 2.1 AA necesita una revisión que combine herramientas y criterio humano.

En AccesiPack te hacemos una auditoría gratuita de tu web: pasamos las pruebas automáticas y revisamos a mano lo que las máquinas no ven, y te entregamos un informe claro de qué barreras tienes y qué prioridad darles. Sin tecnicismos y sin compromiso.

Pide tu auditoría gratis y deja de adivinar.

Cómo saber si tu web cumple la accesibilidad: checklist WCAG 2.1 AA