Caso · Esta misma web

Antes de revisar tu web, revisé la mía.

Pasé un escáner automático de accesibilidad por la versión anterior de esta web y por la corregida: la portada y las páginas de Voxel Bid, Voxel Flow y Voxel Lex, en escritorio y en celular. En la anterior encontró dos problemas que dificultaban leer o usar el teclado, y contenido que quedaba fuera de las zonas que recorren los lectores de pantalla. En la corregida, ninguno de los que sabe detectar.

  • 4 páginas, en escritorio y en celular
  • Antes: 2 problemas detectados
  • Después: ninguno que el escáner detecte
01 — Hallazgos

Lo que encontró el escáner y cómo lo arreglé

El escáner compara la web con las WCAG, las pautas internacionales que describen cómo hacer una web usable para más personas, incluidas las que usan lector de pantalla o solo el teclado. Cada hallazgo dice qué criterio de esas pautas toca.

Un texto pequeño con poco contraste

Grave WCAG 1.4.3 · AA
  • DóndePortada, en el dibujo en miniatura de la tarjeta de El Rincón Norteño, en escritorio.
  • EncontróEl texto blanco «Reservar mesa», de 7,5 px, sobre terracota tenía un contraste de 3,84 a 1. Para un texto de ese tamaño, el mínimo es 4,5 a 1.
  • Afecta aPersonas con baja visión.
  • CambiéOscurecí el terracota, de #C9663F a #A84F2E. El contraste subió a 5,49 a 1.
Antes: en la miniatura de El Rincón Norteño, el texto «Reservar mesa» en blanco sobre un terracota claro. Captura al doble de tamaño.
Antes 3,84 a 1 · captura al doble de tamaño
Después: el mismo texto sobre un terracota más oscuro. Captura al doble de tamaño.
Después 5,49 a 1

Una tabla que no estaba preparada para el teclado

Grave WCAG 2.1.1 · A
  • DóndePágina de Voxel Bid, en celular, donde la matriz de ejemplo se desplaza de lado.
  • EncontróEl escáner marcó que la zona que se desplaza no se podía enfocar con el teclado. Al probarla con Tab en Chrome, sí llegaba, pero el contorno del foco quedaba recortado. En un navegador que no la vuelve enfocable por su cuenta, el teclado se la saltaría.
  • Afecta aQuien navega con teclado.
  • CambiéLa hice enfocable, le di un nombre («Matriz de trazabilidad de ejemplo») y llevé el contorno del foco hacia adentro para que se vea entero.
Antes: la matriz de trazabilidad en celular con el foco del teclado. El contorno azul queda recortado y solo se ve una línea arriba.
Antes El contorno queda recortado
Después: la misma matriz con el foco del teclado. El contorno azul rodea toda la tabla.
Después El contorno rodea la tabla

Contenido fuera de las zonas de la página

Buena práctica No es un criterio de WCAG
  • DóndeLas cuatro páginas, en escritorio y en celular.
  • EncontróCon un lector de pantalla se puede saltar de zona en zona: encabezado, contenido, pie. El bloque de contacto y el botón flotante de WhatsApp no estaban en ninguna.
  • Afecta aQuien usa un lector de pantalla.
  • CambiéEl contacto pasó a ser una sección con nombre, y los botones de WhatsApp, una zona propia de contacto rápido. A la vista no cambió nada.
  • Encabezado
  • Contenido
  • Contacto: fuera de toda zona
  • WhatsApp flotante: fuera de toda zona
  • Pie
Antes Dos piezas sin zona
  • Encabezado
  • Contenido
  • Contacto
  • Contacto rápido por WhatsApp
  • Pie
Después Todo en una zona
02 — Resultado

Cómo quedó

La versión corregida, con el mismo escáner y la misma configuración, en las cuatro páginas, en escritorio y en celular:

Problemas que detectó el escáner

0

Antes eran 2. Solo cuenta lo que se detecta de forma automática.

Páginas con contenido sin zona

0

Antes eran las 4. Es una buena práctica, no un criterio de WCAG.

Contraste de «Reservar mesa»

5,49:1

Antes, 3,84 a 1. El mínimo para ese texto es 4,5 a 1.

Cambio en la página en reposo

1

El color de ese texto. Sin usar el teclado, lo demás se ve igual, píxel por píxel.

Comparé capturas de página completa de las dos versiones, a 375 y a 1280 píxeles de ancho y sin usar el teclado: lo único que cambió fue el color de ese texto. El otro cambio a la vista es el contorno del foco de la matriz de Voxel Bid, que aparece al navegar con Tab.

03 — Método

Cómo lo medí

  • Escaneé las dos versiones de la web el 6 de octubre de 2026: la del 1 de octubre, antes de los arreglos, y la del 3 de octubre, con ellos.
  • El escáner usa axe-core 4.13 en Chromium y aplica sus reglas automáticas para WCAG 2.0, 2.1 y 2.2, niveles A y AA. Revisa cada página en escritorio, a 1280 × 800, y en un celular de 360 × 780.
  • Antes de revisar, baja por toda la página para que aparezca lo que se muestra al desplazar.
  • Las buenas prácticas de axe-core se cuentan aparte: no son criterios de WCAG.
  • Lo que el escáner no puede decidir solo, como el contraste de un texto sobre un degradado, queda para revisar a mano y no entra en estas cifras.

Un límite honesto: un escáner automático encuentra una parte de los problemas de accesibilidad, no todos. Que marque cero no significa que la web cumpla WCAG ni ninguna ley: significa que no encontró nada de lo que sabe detectar.

Contacto

¿Hablamos de tu proyecto?

Cuéntame qué necesitas y te respondo en menos de 24 horas con una propuesta sin compromiso.