Análisis de accesibilidad web

Cómo funciona esta comprobación

Scanaris analiza el HTML que sirve tu página, sin ejecutar JavaScript ni abrir un navegador, y pasa ocho pruebas de accesibilidad que se pueden decidir con certeza sobre el código. Tres son de severidad media: que la etiqueta <html> declare el idioma con lang, que exista la <meta name="viewport">, y que ningún campo de formulario (input, select, textarea, excluidos los ocultos y los botones) carezca de etiqueta accesible, es decir, que tenga un <label for>, esté dentro de un <label>, o lleve aria-label, aria-labelledby o title. Las otras cinco son de severidad baja: imágenes sin atributo alt (un alt="" vacío es válido para las decorativas; lo que falla es que el atributo no exista), enlaces con href y botones sin texto, sin aria-label y sin una imagen con alt dentro, atributos id repetidos, elementos con tabindex mayor que cero, y encabezados h1 a h6 vacíos. Cada prueba que falla abre su propio hallazgo con el recuento.

Por qué importa

Alrededor de un 15 % de la población tiene alguna discapacidad, y muchas más personas usan la web con un lector de pantalla, solo con teclado o con el zoom al máximo en momentos concretos. Para ellas, una imagen sin alt es un hueco, un campo sin etiqueta es una caja de la que no se sabe qué esperar y un botón que es solo un icono se anuncia como "botón" sin más. Además de ética, es ley: la Directiva europea de accesibilidad se aplica desde junio de 2025 a la mayoría de servicios digitales de empresas, y en Estados Unidos las demandas por webs inaccesibles se cuentan por miles al año. Y es SEO: el alt, el idioma y la estructura de encabezados son exactamente lo que Google lee.

Cómo arreglarlo

• Idioma: <html lang="es">. En Nuxt se configura en app.head.htmlAttrs o lo pone el módulo i18n; en Next.js, en el <html> del layout raíz; en WordPress lo escribe language_attributes() en el tema.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Sin maximum-scale=1 ni user-scalable=no, que bloquean el zoom.
• Etiquetas de formulario: un <label for="email"> por cada campo con su id, o el campo dentro del <label>. Si el diseño no muestra etiqueta visible, aria-label="Correo electrónico". El placeholder no cuenta: desaparece al escribir.
• Imágenes: alt descriptivo en las informativas ("Gráfica de ventas del tercer trimestre"), alt="" en las decorativas. Los componentes de imagen de Nuxt y Next.js exigen el atributo.
• Enlaces y botones de icono: aria-label="Abrir menú", o un texto visualmente oculto con una clase sr-only. Los iconos SVG en línea llevan aria-hidden="true".
• Ids duplicados: suelen venir de componentes repetidos con el id fijado a mano. Genera el id a partir de una prop o usa useId().
• Tabindex positivos: cámbialos a 0 y ordena los elementos en el HTML en el orden en que deben recorrerse.
• Encabezados vacíos: si estaban para maquetar, cámbialos por un div; si tienen un icono, dales texto.

Comprueba que está arreglado

curl -s https://tudominio.com | grep -oE '<html[^>]*>|<meta name="viewport"[^>]*>'
curl -s https://tudominio.com | grep -oE '<img[^>]*>' | grep -vc 'alt='

La primera debe mostrar lang y el viewport; la segunda debe dar 0. Para el resto, el panel Lighthouse de Chrome (pestaña Accesibilidad) o la extensión axe DevTools te listan cada elemento con su selector.

Preguntas frecuentes

¿Pasar estas ocho pruebas significa que mi web es accesible?

No. Son las ocho que se pueden comprobar con certeza sin navegador. El contraste de colores, el foco visible, el orden de lectura real y los componentes construidos con JavaScript necesitan una revisión con herramientas de navegador y, para algo serio, una auditoría humana. Pasarlas sí significa que no cometes los errores más frecuentes y más fáciles de evitar.

Mi app es una SPA y el HTML inicial está casi vacío.

Entonces la comprobación ve poco, y Google también. Es una razón más para renderizar en servidor al menos el contenido principal; lo explica contenido sin JavaScript.

¿Por qué el alt vacío es correcto y la ausencia de alt no?

Porque alt="" le dice al lector de pantalla "sáltate esta imagen, es decorativa", mientras que sin atributo el lector lee el nombre del fichero, que suele ser algo como IMG_4821.jpg. La estructura de encabezados, que afecta a la navegación por lector de pantalla, la revisa también encabezados.