Primera revisión: comprobaciones rápidas que cualquiera puede hacer

No hace falta ser auditor para darse cuenta de que una web tiene problemas de accesibilidad. Con un navegador, el teclado y un par de extensiones gratuitas puedes hacer en veinte o treinta minutos una primera revisión que detecta muchas de las barreras que vimos en la lección sobre las barreras más frecuentes. El W3C publica una guía con este mismo enfoque, Easy Checks – A First Review of Web Accessibility. Aquí te proponemos una versión adaptada en seis bloques: qué mirar, cómo hacerlo y qué criterio WCAG hay detrás.

Antes de empezar: páginas, tarea y herramientas

Elige tres o cuatro páginas representativas: la de inicio, una de contenido (una noticia, una ficha de producto), una con formulario y, si existe, el proceso principal del sitio (un trámite, una compra, una reserva). Mejor aún si recorres una tarea completa de principio a fin. Prepara:

• Un navegador actualizado: Chrome, Edge o Firefox.
• Una extensión de evaluación gratuita, como WAVE (de WebAIM) o axe DevTools (de Deque).
• Un analizador de contraste, como Colour Contrast Analyser (de TPGi), o el que incorporan las herramientas de desarrollo del navegador.
• Una tabla sencilla para anotar: página, problema, dónde está, a quién afecta y una captura de pantalla.

1. Título e idioma de la página

Mira el texto de la pestaña del navegador. Cada página debe tener un título que diga qué es y dónde estás, por ejemplo «Solicitud de cita previa – Ayuntamiento de Villaserena», y no «Inicio» en todas las páginas ni «Untitled» (2.4.2 Titulado de páginas). Es lo primero que anuncia un lector de pantalla y lo que permite distinguir varias pestañas abiertas. Para el idioma, la extensión de evaluación te avisará si falta el atributo lang en el elemento <html> (3.1.1 Idioma de la página).

2. Imágenes y textos alternativos

Activa la extensión y revisa los avisos sobre imágenes. Comprueba tres cosas: que las imágenes informativas tienen texto alternativo, que ese texto describe lo que importa (no «imagen1.jpg» ni «foto») y que los iconos que funcionan como botón o enlace tienen nombre (1.1.1 Contenido no textual). La herramienta te dice si el atributo existe; si el texto tiene sentido solo lo puedes juzgar tú. Cómo escribir buenos textos alternativos lo verás en el nivel 2.

3. Encabezados y estructura

Con la extensión, muestra el esquema de encabezados de la página. Debería leerse como un índice: un encabezado principal que resume la página y secciones ordenadas por debajo. Hay tres señales de alarma: no existe ningún encabezado; hay textos que parecen títulos pero en el código son párrafos en negrita; o los niveles se eligen por su tamaño visual y no por su jerarquía (1.3.1 Información y relaciones). Saltar de encabezado en encabezado es una de las formas más habituales de explorar una página con lector de pantalla, así que una estructura mal hecha obliga a escuchar la página entera.

4. Contraste y zoom

Usa el analizador para medir el contraste de los textos que te parezcan más claros: grises sobre blanco, texto sobre fotografías, botones de colores suaves. El texto normal necesita una relación de contraste de al menos 4,5:1 con su fondo, y el texto grande (desde 18 puntos, o 14 en negrita), de al menos 3:1 (1.4.3 Contraste (mínimo)).

Después amplía la página al 200 % con Ctrl + + (Cmd + + en Mac). El texto debe crecer sin cortarse ni solaparse y sin que se pierda contenido ni funcionalidad (1.4.4 Cambio de tamaño del texto). Si sigues hasta el 400 % (en una ventana de unos 1.280 píxeles de ancho), el contenido debería reorganizarse, normalmente en una sola columna, sin obligarte a desplazarte en horizontal para leer (1.4.10 Reajuste de los elementos).

5. Teclado y foco

Deja el ratón a un lado. Pulsa Tab para avanzar, Mayús + Tab para retroceder, Intro para activar enlaces y botones, Espacio para casillas y botones, las flechas para botones de opción y listas, y Esc para cerrar ventanas emergentes. Comprueba que:

• Llegas a todos los enlaces, botones y campos, y puedes activarlos (2.1.1 Teclado).
• Ves siempre dónde está el foco: un contorno, un subrayado o un cambio de color claro (2.4.7 Foco visible).
• El orden sigue la lógica de la página (2.4.3 Orden del foco).
• Nunca te quedas atrapado en un elemento del que no puedes salir (2.1.2 Sin trampas para el foco del teclado).
• Al abrir un menú o una ventana modal, el foco entra en ella y, al cerrarla, vuelve al punto de partida.
• El primer Tab muestra, idealmente, un enlace «Saltar al contenido principal», el llamado skip link, que evita recorrer todo el menú en cada página (2.4.1 Evitar bloques).

Es la prueba más reveladora de toda la revisión: muchas barreras bloqueantes aparecen aquí y ninguna herramienta automática las detecta.

/* Incorrecto: elimina el indicador de foco sin sustituirlo */
a:focus, button:focus { outline: none; }

/* Correcto: un indicador visible, grueso y con contraste */
a:focus-visible, button:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

6. Formularios y multimedia

En los formularios, haz clic en el texto de cada etiqueta: si el cursor salta al campo, la etiqueta suele estar bien asociada (1.3.1 Información y relaciones; 3.3.2 Etiquetas o instrucciones); si no salta, revisa ese campo con la extensión. Después envía el formulario vacío o con un dato erróneo. El error debe explicarse con texto, indicar qué campo falla y, a ser posible, cómo corregirlo; no basta con pintar el borde de rojo (3.3.1 Identificación de errores; 1.4.1 Uso del color).

En multimedia, los vídeos con habla deben tener subtítulos sincronizados y correctos (1.2.2 Subtítulos (grabados)). Ningún sonido debe reproducirse automáticamente durante más de 3 segundos sin un control para pararlo o para bajar su volumen (1.4.2 Control del audio). Y los carruseles o animaciones que se mueven solos durante más de 5 segundos necesitan un botón para detenerlos (2.2.2 Poner en pausa, detener, ocultar).

Cómo anotar y comunicar lo que encuentras

Una revisión solo sirve si sus resultados se entienden y se pueden reproducir. Para cada problema anota la página, qué pasa, cómo reproducirlo, a quién afecta y una captura. Describe la barrera y su efecto antes que el criterio: «el botón Confirmar no se puede activar con teclado, así que no se puede terminar la reserva» convence más que «falla 2.1.1».

Usa «posible» delante del criterio: en una primera revisión estás señalando indicios, y la confirmación corresponde a una evaluación completa. Prioriza en tu resumen las barreras bloqueantes de las tareas principales.

Resumen

• Una primera revisión detecta problemas evidentes en poco tiempo, pero no demuestra conformidad: para eso hace falta una auditoría con metodología.
• Seis bloques: título e idioma, imágenes, encabezados, contraste y zoom, teclado y foco, formularios y multimedia.
• La prueba con teclado es la más reveladora y la que ninguna herramienta automática sustituye.
• Anota cada problema con página, efecto, pasos, persona afectada y captura, y prioriza los bloqueantes.