Tests d'accessibilité automatisés (axe)

Définition

axe-core est le moteur open source de Deque qui vérifie une page contre les règles WCAG (contrastes, attributs ARIA, labels, ordre des titres). Intégré à Playwright via @axe-core/playwright (classe AxeBuilder : include, exclude, withTags, disableRules, analyze), il transforme l'accessibilité en assertion de test. Il ne détecte qu'une partie des problèmes : la gestion du focus et la pertinence des textes alternatifs restent à vérifier à la main.

Analogie

Le correcteur orthographique d'un texte : il attrape les fautes mécaniques, pas le sens ; il faut encore relire.

Exemple de code

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

test('la page panier est accessible', async ({ page }) => {
  await page.goto('/panier');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])  // niveau visé
    .exclude('#widget-chat-tiers')               // hors périmètre
    .analyze();
  // Chaque violation contient la règle, l'impact et les nœuds fautifs
  expect(results.violations).toEqual([]);
});

Cas d'usage

Empêcher qu'une régression d'accessibilité (bouton sans nom, contraste insuffisant) arrive en production, sur les parcours critiques.

Anti-pattern

Termes liés

Sources

• playwright.dev/docs/accessibility-testing