Puntuación de accesibilidad de Lighthouse

Qué comprueba esta auditoría

Ejecuta la auditoría de accesibilidad de Lighthouse (un subconjunto curado de reglas de axe-core) contra la página y reporta la puntuación ponderada. MetricSpot marca la comprobación como fallida por debajo de 90.

Por qué importa

La puntuación es una señal gruesa, pero honesta. Lighthouse solo detecta problemas que un parser estático puede verificar: aproximadamente un tercio de WCAG. Cualquier cosa que marca es casi seguro real, no un falso positivo.

Excluye a usuarios reales. Aproximadamente 1 de cada 5 visitantes usa tecnología de apoyo en algún momento: lectores de pantalla, navegación solo por teclado, modos de alto contraste, control por voz. Una página con 60 de accesibilidad será inutilizable para la mayoría de ellos.
Exposición legal. En la UE, la Ley Europea de Accesibilidad se aplica a los sitios comerciales de cara al público desde junio de 2025. En EE. UU., el DOJ ha declarado explícitamente que el Título III de la ADA cubre los sitios web. Los sitios con puntuación baja son un objetivo frecuente de demandas oportunistas.
SEO e IA. Las señales de page experience de Google incluyen métricas adyacentes a accesibilidad. Los rastreadores de IA analizan con el mismo árbol DOM que usan los lectores de pantalla: una semántica rota daña la extracción.

Cómo solucionarlo

Abre Lighthouse (Chrome DevTools → pestaña Lighthouse → Accesibilidad) y ejecútalo contra la URL que falla. El informe lista cada auditoría fallida agrupada por severidad, con los nodos del DOM resaltados.

Empieza por los elementos con más peso: Lighthouse pondera las auditorías por impacto, no por número:

Contraste de color (color-contrast) — texto ≥ 4.5:1, texto grande ≥ 3:1. Usa una herramienta como Stark o el indicador de contraste de DevTools.
Texto alternativo en imágenes (image-alt) — todo <img> necesita un atributo alt, aunque sea vacío para imágenes decorativas. Consulta Alt text en imágenes.
Etiquetas de formulario (label) — cada input necesita un <label for="…"> explícito. Consulta Etiquetas de formulario.
Idioma del documento (html-has-lang) — <html lang="es"> en la raíz. Consulta Declarar idioma de página.
Texto de enlace (link-name) — nada de “haz clic aquí” ni <a> vacíos. Consulta Texto descriptivo de enlaces.

Ejecuta axe-core en CI para cazar regresiones:

bun add -d @axe-core/playwright

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("home page is accessible", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Comprobaciones manuales que Lighthouse no puede hacer. Tabula por la página de arriba abajo: ¿es lógico el orden de foco? ¿Es visible el anillo de foco? Enciende VoiceOver (Cmd+F5 en macOS) o NVDA (Windows) y lee una página de principio a fin. Lighthouse 100 es un suelo, no un techo.

Preguntas frecuentes

¿Por qué mi puntuación varía tanto entre ejecuciones?

Lighthouse corre en una instancia headless de Chrome con CPU limitada. El ruido de red, los scripts de anuncios y la latencia del banner de consentimiento pueden mover la puntuación 5–10 puntos. Ejecútalo tres veces y toma la mediana; fíate de la tendencia, no del valor puntual.

Tengo 100 en Lighthouse, ¿he terminado?

No. Lighthouse audita en torno al 30% de WCAG. El otro 70% (orden lógico de lectura, flujo de recuperación de errores, gestión del foco, significado del contenido transmitido solo por color) requiere revisión manual. Un 100 significa que la base automática está limpia; añade la revisión manual encima.

¿De dónde sale la puntuación en la auditoría?

MetricSpot llama al motor de Lighthouse durante la auditoría y guarda la puntuación. Si la ejecución falla (la página está tras un login, bloquea navegadores headless o agota el tiempo de espera) verás un hallazgo aparte de Accesibilidad de Lighthouse no disponible en su lugar.