Puntuació d'accessibilitat de Lighthouse

Què comprova aquesta auditoria

Executa l’auditoria d’accessibilitat de Lighthouse (un subconjunt seleccionat de regles d’axe-core) contra la pàgina i reporta la puntuació ponderada. MetricSpot falla la comprovació per sota de 90.

Per què importa

La puntuació és un senyal aproximat però honest. Lighthouse només detecta problemes que un parser estàtic pot verificar, aproximadament un terç de WCAG. Qualsevol cosa que marqui és gairebé segur que és real, no un fals positiu.

Hi ha usuaris reals que en queden exclosos. Aproximadament 1 de cada 5 visitants utilitza tecnologia assistiva en algun moment: lectors de pantalla, navegació només per teclat, modes d’alt contrast, control per veu. Una pàgina amb una puntuació de 60 d’accessibilitat serà inutilitzable per a la majoria d’ells.
Exposició legal. A la UE, la European Accessibility Act s’aplica a llocs comercials públics des del juny de 2025. Als EUA, el DOJ ha declarat explícitament que ADA Title III cobreix els llocs web. Els llocs amb puntuació baixa són un objectiu freqüent de demandes oportunistes.
SEO i IA. Els senyals de page-experience de Google inclouen mètriques adjacents a l’accessibilitat. Els rastrejadors d’IA analitzen amb el mateix arbre DOM que utilitzen els lectors de pantalla; una semàntica trencada perjudica l’extracció.

Com solucionar-ho

Obre Lighthouse (Chrome DevTools → pestanya Lighthouse → Accessibilitat) i executa’l contra la URL que falla. L’informe llista cada auditoria que falla agrupada per gravetat, amb els nodes del DOM ressaltats.

Centra’t primer en els ítems amb més pes; Lighthouse pondera les auditories per impacte, no per quantitat:

Contrast de color (color-contrast), text ≥ 4,5:1, text gran ≥ 3:1. Utilitza una eina com Stark o l’indicador de contrast de DevTools.
Text alternatiu d’imatge (image-alt), cada <img> necessita un atribut alt, encara que sigui buit per a imatges decoratives. Consulta text alternatiu d’imatges.
Etiquetes de formulari (label), cada camp necessita un <label for="…"> explícit. Consulta etiquetes de camps de formulari.
Idioma del document (html-has-lang), <html lang="ca"> a l’arrel. Consulta declarar l’idioma de la pàgina.
Text dels enllaços (link-name), res de “clica aquí”, res d’<a> buits. Consulta text descriptiu d’enllaços.

Executa axe-core a CI per capturar regressions:

bun add -d @axe-core/playwright

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

test("la pàgina d'inici és accessible", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Comprovacions manuals que Lighthouse no pot fer. Recórrer la pàgina amb el tabulador de dalt a baix: és lògic l’ordre de focus? És visible l’anell de focus? Activa VoiceOver (Cmd+F5 a macOS) o NVDA (Windows) i llegeix una pàgina de cap a peus. Un 100 de Lighthouse és un terra, no un sostre.

Preguntes freqüents

Per què la meva puntuació és tan diferent en una segona execució?

Lighthouse s’executa en una instància de Chrome headless amb CPU limitada. Soroll de xarxa, scripts d’anuncis i el timing del banner de consentiment poden moure la puntuació entre 5 i 10 punts. Executa-ho tres vegades i agafa la mediana; tracta la tendència, no el valor puntual, com a veritat.

Lighthouse marca 100, ja he acabat?

No. Lighthouse audita aproximadament el 30% de WCAG. L’altre 70% (ordre lògic de lectura, flux de recuperació d’errors, gestió de focus, significat de contingut només per color) requereix revisió manual. Una puntuació de 100 vol dir que la línia base automatitzada està neta; envia la revisió manual a sobre.

D’on surt la puntuació a l’auditoria?

MetricSpot crida al motor de Lighthouse durant l’auditoria i emmagatzema la puntuació. Si l’execució falla (la pàgina és darrere d’un login, bloqueja navegadors headless o supera el temps), veuràs una troballa separada d’accessibilitat de Lighthouse no disponible en lloc d’una puntuació.