Proves automàtiques en el flux de desenvolupament: axe-core, eslint-plugin-jsx-a11y, Lighthouse i tests e2e

Corregir un problema d'accessibilitat en producció costa molt més que evitar-lo a l'editor. Les eines automàtiques no troben tots els problemes, però troben els més repetitius de manera immediata, consistent i gratuïta, i sobretot impedeixen que tornin. Aquesta lliçó explica quina eina encaixa en cada punt del flux de desenvolupament, com configurar-les i, amb la mateixa importància, què no poden fer.

Què detecten i què no

S'estima que les eines automàtiques detecten aproximadament entre el 30 % i el 40 % dels problemes d'accessibilitat; el percentatge real depèn del tipus de lloc. Detecten molt bé el que és sintàctic i determinista: imatges sense alt, camps sense etiqueta, contrast insuficient de text sobre fons pla, atributs ARIA no vàlids, id duplicats, falta de lang, enllaços sense nom, encapçalaments que salten nivells, elements enfocables ocults. No poden detectar si l'alt és correcte, si l'ordre del focus té sentit, si l'estat ARIA s'actualitza, si el nom d'un botó descriu la seva acció, si un modal retorna el focus, si un carrusel es pot posar en pausa o si un text és comprensible. Per això les proves automàtiques sempre es complementen amb el protocol de teclat del curs anterior i amb una revisió amb lector de pantalla.

axe-core: el motor comú

axe-core, de Deque, és la biblioteca de regles d'accessibilitat de codi obert que hi ha darrere de l'extensió axe DevTools, de Lighthouse, d'Accessibility Insights de Microsoft i de moltes integracions. La seva filosofia és no donar falsos positius: quan marca alguna cosa com a error, gairebé sempre ho és; a canvi, marca com a «necessita revisió» el que no pot decidir (el contrast sobre imatges, per exemple). S'integra en diversos punts:

• Navegador: extensió axe DevTools per analitzar la pàgina actual durant el desenvolupament.
• Proves unitàries de components: jest-axe o vitest-axe executen les regles sobre l'HTML renderitzat per un component.
• Proves d'extrem a extrem: @axe-core/playwright i cypress-axe analitzen pàgines reals al navegador, en cada estat (modal obert, formulari amb errors).
• Desenvolupament amb React: @axe-core/react mostra els problemes a la consola mentre programes, però només admet fins a React 17; en versions posteriors, fes servir l'extensió o les proves de components.

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

test('cita prèvia sense errors d\'accessibilitat', async ({ page }) => {
  await page.goto('/tramites/cita-previa');
  const inicial = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'])
    .analyze();
  expect(inicial.violations).toEqual([]);

  await page.getByRole('button', { name: 'Tria el centre' }).click();
  const conDialogo = await new AxeBuilder({ page }).analyze();
  expect(conDialogo.violations).toEqual([]);
});

Les proves d'extrem a extrem també serveixen per automatitzar part del protocol de teclat: Playwright permet prémer Tab i comprovar quin element té el focus, prémer Escape i verificar que el diàleg es tanca i el focus torna al botó, o prémer fletxes en unes pestanyes i comprovar aria-selected. I els locators per funció (getByRole('button', { name: 'Desa' })) converteixen cada test en una verificació implícita que els controls tenen funció i nom accessibles: si no en tenen, el test no troba l'element.

Linting: atrapar errors en escriure

eslint-plugin-jsx-a11y analitza el JSX de React a l'editor i a la integració contínua, abans que existeixi una pàgina per provar. Detecta imatges sense alt, onClick en elements no interactius sense funció ni teclat, aria-* no vàlids, label sense control associat, autoFocus, accessKey, enllaços sense href, funcions no admeses i més. S'activa amb la configuració plugin:jsx-a11y/recommended i convé fer servir el mode strict en projectes nous. Per a Vue hi ha eslint-plugin-vuejs-accessibility, i per a Angular, les regles d'accessibilitat d'angular-eslint (plantilles) cobreixen casos semblants. Per a HTML estàtic, html-validate inclou regles d'accessibilitat i el validador del W3C detecta errors de marcatge que repercuteixen en les tecnologies de suport.

Lighthouse i les auditories de pàgina

Lighthouse (integrat a Chrome i executable en CI amb lighthouse-ci) fa servir un subconjunt de regles d'axe i retorna una puntuació de 0 a 100. Aquesta puntuació és útil per seguir la tendència i perquè la direcció l'entengui, però és enganyosa com a mesura de conformitat: una pàgina amb 100 pot ser inaccessible (ordre del focus, estats ARIA, modals) i una amb 85 pot tenir només problemes menors. Fes-la servir com a indicador, mai com a certificat. Pa11y i pa11y-ci fan el mateix amb el motor HTML CodeSniffer o axe i són còmodes per rastrejar desenes d'URL d'un lloc en cada desplegament.

On col·locar cada eina

Definició de fet

Perquè tot això tingui efecte, l'accessibilitat ha de formar part dels criteris d'acceptació de cada història i de la definició de fet de l'equip. Una versió mínima:

1. El linter d'accessibilitat no mostra errors.
2. Les proves de component amb axe passen en tots els estats.
3. Les proves e2e amb axe passen en les pàgines i els fluxos tocats.
4. Qui revisa el codi ha recorregut la funcionalitat amb teclat seguint el protocol.
5. Els components nous s'han provat amb un lector de pantalla i en documenten el teclat.

Amb aquesta cadena, els problemes que les màquines detecten no tornen, i el temps de les persones es concentra en el que requereix criteri humà.

Resum

• Les eines automàtiques detecten al voltant d'un terç dels problemes, els sintàctics i deterministes; la resta exigeix teclat, lector de pantalla i criteri humà.
• axe-core és el motor comú: extensió, jest-axe/vitest-axe en components, @axe-core/playwright o cypress-axe en e2e.
• eslint-plugin-jsx-a11y (i equivalents per a Vue i Angular) atrapa els errors en escriure.
• La puntuació de Lighthouse és un indicador de tendència, no un certificat de conformitat.
• Fixa llindars que no puguin créixer, analitza cada estat de la interfície i fes de l'accessibilitat part de la definició de fet.