Punteggio accessibilità Lighthouse

Cosa controlla questo check

Esegue l’audit di accessibilità di Lighthouse (un sottoinsieme curato delle regole axe-core) sulla pagina e riporta il punteggio pesato. MetricSpot fa fallire il check sotto 90.

Perché è importante

Il punteggio è un segnale grossolano ma onesto. Lighthouse intercetta solo i problemi che un parser statico può verificare — circa un terzo di WCAG. Tutto quello che segnala è quasi certamente reale, non un falso positivo.

Utenti reali esclusi. Circa 1 visitatore su 5 usa tecnologie assistive in qualche momento: screen reader, navigazione solo da tastiera, modalità ad alto contrasto, controllo vocale. Una pagina con punteggio di accessibilità 60 sarà inutilizzabile per la maggior parte di loro.
Esposizione legale. Nell’UE, lo European Accessibility Act si applica ai siti commerciali pubblici da giugno 2025. Negli USA, il DOJ ha dichiarato esplicitamente che il titolo III dell’ADA copre i siti web. I siti con punteggio fallito sono un bersaglio frequente per cause estorsive.
SEO e IA. I segnali di page-experience di Google includono metriche adiacenti all’accessibilità. I crawler IA analizzano lo stesso DOM tree degli screen reader — una semantica rotta danneggia l’estrazione.

Come risolvere

Apri Lighthouse (Chrome DevTools → tab Lighthouse → Accessibility) ed eseguilo sull’URL che fallisce. Il report elenca ogni audit fallito raggruppato per severità, con i nodi DOM colpevoli evidenziati.

Concentrati prima sugli elementi con peso maggiore — Lighthouse pesa gli audit per impatto, non per quantità:

Contrasto colore (color-contrast) — testo ≥ 4.5:1, testo grande ≥ 3:1. Usa uno strumento come Stark o l’indicatore di contrasto di DevTools.
Testo alternativo immagini (image-alt) — ogni <img> ha bisogno di un attributo alt, anche se vuoto per immagini decorative. Vedi testo alternativo immagini.
Etichette dei form (label) — ogni input ha bisogno di un <label for="…"> esplicito. Vedi etichette dei form.
Lingua del documento (html-has-lang) — <html lang="it"> sulla radice. Vedi dichiarare lingua pagina.
Testo dei link (link-name) — niente “clicca qui”, niente <a> vuoti. Vedi testo descrittivo dei link.

Esegui axe-core in CI per intercettare regressioni:

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([]);
});

Controlli manuali che Lighthouse non può fare. Naviga la pagina con Tab dall’alto al basso: l’ordine di focus è logico? Il focus ring è visibile? Accendi VoiceOver (Cmd+F5 su macOS) o NVDA (Windows) e leggi una pagina dall’inizio alla fine. Lighthouse 100 è un pavimento, non un soffitto.

Domande frequenti

Perché il mio punteggio è stato così diverso a una nuova esecuzione?

Lighthouse gira in un’istanza headless di Chrome con CPU sotto throttling. Rumore di rete, script pubblicitari e timing del banner di consenso possono spostare il punteggio di 5–10 punti. Esegui tre volte e prendi la mediana; tratta il trend, non il valore puntuale, come verità.

Lighthouse è a 100 — ho finito?

No. Lighthouse copre circa il 30% di WCAG. L’altro 70% (ordine logico di lettura, flusso di error-recovery, gestione del focus, significato del contenuto trasmesso solo dal colore) richiede revisione manuale. Un punteggio 100 significa che la baseline automatica è pulita; spedisci la revisione manuale sopra.

Da dove arriva il punteggio nell’audit?

MetricSpot chiama il motore Lighthouse durante l’audit e memorizza il punteggio. Se l’esecuzione fallisce (la pagina è dietro login, blocca i browser headless o va in timeout) vedrai invece un finding separato accessibilità Lighthouse non disponibile.