Una comprobación de WCAG en 5 minutos que cualquier desarrollador puede hacer (sin presupuesto para auditorías)
“Haremos una auditoría de accesibilidad más adelante” es una de esas cosas que los equipos dicen y nunca hacen. Las auditorías parecen caras, lentas y como si fueran tarea de otra persona.
Pero no necesitas una auditoría formal para detectar los fallos que más importan. Una gran parte de los problemas de accesibilidad del mundo real se reduce a una breve lista de cuestiones — y puedes comprobarlas tú mismo en unos cinco minutos.
Aquí tienes la lista de comprobación.
1. Recorre toda la página con el tabulador (2 minutos)
Suelta el ratón. Pulsa Tab repetidamente desde la parte superior de la página. Hazte tres preguntas:
- ¿Puedes alcanzar todo lo interactivo? Cada enlace, botón y campo debería ser enfocable.
- ¿Hay un indicador de foco visible? Siempre deberías poder ver dónde estás. Si el contorno desaparece, eso es un fallo.
- ¿El orden tiene sentido? El foco debería moverse aproximadamente en el mismo orden en que lees. Si salta de un lado a otro, probablemente tengas un
tabindexpositivo en algún sitio.
Este único ejercicio detecta más problemas que cualquier otro.
2. Comprueba que tus elementos interactivos tengan nombre
Cada botón y enlace necesita un nombre accesible — texto visible, aria-label o aria-labelledby. Los infractores habituales son los botones de solo icono: el menú, el botón de cerrar, el icono de búsqueda. Para un lector de pantalla, un botón sin nombre es simplemente “botón”. Dale un nombre.
3. Comprueba el contraste de tu texto “sutil”
Leyendas en gris claro, texto de marcador de posición, etiquetas con aspecto deshabilitado. El texto del cuerpo necesita una relación de contraste de al menos 4.5:1 respecto a su fondo (3:1 para texto grande). Si tienes que entrecerrar los ojos, los demás también.
4. Comprueba tus imágenes y encabezados
- Imágenes: las imágenes informativas necesitan texto
alt. Las decorativas necesitanalt=""(vacío, no ausente) para que los lectores de pantalla las omitan. - Encabezados: deben formar un esquema lógico —
h1→h2→h3, sin saltar niveles para conseguir un tamaño de fuente. Los encabezados son estructura, no estilo.
5. Comprueba lo básico en el marcado
- ¿Tiene
<html>un atributolang? - ¿Tienen las entradas de formulario sus
<label>asociadas? - ¿Son los enlaces que parecen enlaces realmente
<a href>, y los botones realmente<button>?
Acabas de hacer el 80% de una auditoría
Eso es todo. Cinco minutos, sin presupuesto, sin consultor. No detectarás todo — una auditoría completa sigue teniendo su lugar — pero detectarás los fallos que bloquean a usuarios reales y desencadenan la mayoría de las quejas.
Si prefieres no hacerlo a mano, eso es exactamente lo que automatizan las herramientas de accesibilidad y el análisis con IA de PxGuard: orden de tabulación, nombres accesibles, encabezados, texto alternativo — señalados en la página, con la solución detallada.
Pero, sinceramente, incluso la versión manual le gana a “lo haremos más adelante”. Haz la comprobación de cinco minutos hoy.
Pruébalo en tus propias páginas
PxGuard es una extensión de Chrome gratuita. Inspecciona espaciado, tipografía y accesibilidad en segundos.
Instalar gratis