axe-core

Definizione — axe-core è un motore open-source di regole per l’analisi automatica dell’accessibilità di pagine e componenti web. Rileva pattern comuni di non conformità (ad es. etichette mancanti, ruoli ARIA impropri, contrasti insufficienti, nomi accessibili assenti) e restituisce un report strutturato con severità, selettori CSS e suggerimenti di fix.

Quando usarlo

• In sviluppo: linting dell’HTML e dei componenti UI mentre si codifica.
• In test: integrazione in unit/UI/e2e per bloccare regressioni prima del rilascio.
• In CI/CD: step automatico su PR/merge per standardizzare la qualità minima.

Come eseguirlo

Estensioni browser: “axe DevTools” per Chrome/Firefox consente audit rapidi sull’attuale stato della pagina.

Programmatico con Puppeteer:

const { AxePuppeteer } = require('@axe-core/puppeteer');
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  const results = await new AxePuppeteer(page).analyze();
  console.log(results.violations); // elenco problemi con target CSS e help
  await browser.close();
})();

Con Cypress (e2e):

// cypress/support/e2e.js
import 'cypress-axe';

it('Homepage senza violazioni critiche', () => {
  cy.visit('/');
  cy.injectAxe();
  cy.checkA11y(null, { includedImpacts: ['critical', 'serious'] });
});

Con Jest + React (unit/UI):

import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Componente accessibile', async () => {
  const html = renderToString(<Button>Invia</Button>);
  const results = await axe(html);
  expect(results).toHaveNoViolations();
});

Limiti e buone pratiche

• Copertura parziale: gli strumenti automatici individuano solo una quota dei problemi; affianca sempre audit manuale e test con tecnologie assistive.
• Definisci soglie: fallisci la build per violazioni “critical/serious”, registra “minor/moderate” come debt pianificato.
• Pattern condivisi: crea componenti riutilizzabili (design system) già conformi, riducendo falsi positivi e manutenzione.

Mappatura

Le regole di axe-core sono allineate ai requisiti WCAG 2.1 (es. 1.1.1, 1.3.1, 1.4.3, 2.4.x, 4.1.2) e supportano la conformità prevista da EN 301 549. Il risultato va sempre interpretato da un valutatore.