Errors d'accessibilitat de Lighthouse

Què comprova aquesta auditoria

Compta quantes auditories d’accessibilitat de Lighthouse han fallat a la pàgina. Lighthouse executa axe-core internament i agrupa els resultats en correcte/error/manual. Aquesta regla reporta el comptador de errors i els llista: el mesurador de la puntuació d’accessibilitat de Lighthouse és el número titular, aquesta regla és la llista de tasques pendents.

Infraccions habituals que MetricSpot fa aflorar:

color-contrast, text per sota de la ràtio de contrast AA de 4,5:1.
image-alt, <img> sense alt (diferent de la qualitat del text alternatiu, que puntua si té sentit).
link-name / button-name, elements interactius sense nom accessible (els botons amb només icona són els culpables habituals).
label, controls de formulari sense un <label> associat.
html-has-lang / html-lang-valid, cobert per declarar l’idioma de la pàgina.
document-title, <title> buit o absent.
aria-*, rols invàlids, atributs obligatoris que falten o aria-hidden sobre elements focusables.
list / listitem, <li> fora d’un pare <ul>/<ol>.

Per què importa

Els errors de Lighthouse són la meitat arreglable de l’accessibilitat. Cada auditoria d’aquesta llista és quelcom que un agent de build pot verificar mecànicament, sense judici humà. També són les auditories que tenen més probabilitats d’aparèixer en una demanda legal: el contrast i les etiquetes de formulari absents són els dos problemes més citats a les demandes d’accessibilitat web ADA als EUA, i la European Accessibility Act (en vigor el juny de 2025) llegeix la mateixa llista.

Posar aquest comptador a zero no farà que un lloc sigui completament compatible amb WCAG: aproximadament un terç dels criteris WCAG 2.1 AA requereix revisió manual. Però elimina les objeccions de menys esforç.

Com solucionar-ho

Llegeix els errors per ordre. Cada error de Lighthouse inclou un fragment d‘“Elements que fallen”, aquest és el punt de partida.

Veure la llista per auditoria:

Lighthouse CLI / DevTools, executa una auditoria, baixa fins a “Accessibilitat”, clica cada entrada en vermell per veure la llista d’elements que fallen.
PageSpeed Insights, pagespeed.web.dev/?url=<la-teva-url> retorna les mateixes auditories amb selectors d’elements.
DevTools → panell Issues, Chrome 109+ mostra els problemes d’axe-core en directe mentre navegues.

Integra-ho al CI. No confiïs que els humans cliquin Lighthouse. Afegeix axe-core a la teva suite e2e:

bun add -D @axe-core/playwright axe-playwright

// e2e/a11y.spec.ts
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("la home no té violacions d'a11y detectables", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page })
    .withTags(["wcag2a", "wcag2aa", "wcag21aa"])
    .analyze();
  expect(results.violations).toEqual([]);
});

Per a builds de React/Next/Astro, afegeix també eslint-plugin-jsx-a11y per atrapar els obvis en temps de lint.

Les 5 correccions d’una línia més habituals:

Error	Solució
`color-contrast`	Apuja el primer pla o el fons fins que la ràtio passi de 4,5:1 (3:1 per a text de 18pt o més). Utilitza el color picker de DevTools, mostra la ràtio en directe.
`image-alt`	Afegeix `alt="..."`. Per a imatges purament decoratives, utilitza `alt=""` (buit, no absent). Consulta text alternatiu d’imatges.
`button-name`	Els `<button>` amb només icona necessiten `aria-label="Tancar el menú"`. Les icones SVG de dins necessiten `aria-hidden="true"`.
`link-name`	Igual que els botons. Envolta els enllaços amb icona amb text descriptiu o `aria-label`. Consulta text descriptiu d’enllaços.
`label`	Envolta l’`<input>` amb `<label>`, o utilitza `<label for="id">` + `id="id"`. Consulta etiquetes de camps de formulari.

Si la puntuació és n/a en lloc d’un comptador, consulta accessibilitat de Lighthouse no disponible: l’auditoria no s’ha executat.

Preguntes freqüents

Corregir tots els errors em portarà a 100?

Habitualment acabaràs amb una puntuació alta dels 90. La puntuació d’accessibilitat de Lighthouse està ponderada però no és lineal: color-contrast pesa molt, altres pesen poc. Els punts restants venen de comprovacions manuals (ordre de focus, narració del lector de pantalla) que l’auditoria automàtica llista com a “Elements addicionals a comprovar manualment”.

Puc suprimir auditories amb què no estic d’acord?

Sí, via la matriu skipAudits de la configuració de Lighthouse, però pensa-t’ho bé abans de suprimir. El fals positiu comú és color-contrast en banners amb text sobre imatge: corregeix el contrast (afegeix una capa o un fons sòlid) en lloc de saltar-te l’auditoria.

En què es diferencia d’axe-core a DevTools?

En realitat no es diferencia. Lighthouse incorpora axe-core i executa un subconjunt de les seves regles. L’extensió axe de DevTools executa el conjunt complet, així que pots veure-hi més problemes; aquests extres solen estar etiquetats com a best-practice i no són obligatoris per WCAG.