Intégrer l'audit d'accessibilité dans votre pipeline CI/CD

L’accessibilité ne doit pas être une vérification ponctuelle mais un processus continu. Intégrer les audits d’accessibilité dans votre pipeline CI/CD permet de détecter les régressions avant qu’elles n’atteignent la production.

Pourquoi automatiser les tests d’accessibilité ?

Le problème des audits ponctuels

Un audit manuel prend 2-3 semaines et coûte 3 000-5 000 €. Entre deux audits, des dizaines de régressions peuvent s’accumuler.

Les avantages de l’automatisation

• Détection précoce : erreurs identifiées à chaque commit
• Coût réduit : pas d’intervention humaine pour les tests de base
• Couverture continue : chaque modification est vérifiée
• Documentation : historique des scores et régressions

Stratégie d’intégration

Niveaux de tests

Outils recommandés

• axe-core : moteur de test le plus complet
• pa11y : CLI simple pour CI
• Lighthouse CI : audit complet (a11y + perf)
• Accorma API : tests RGAA natifs avec IA

GitHub Actions

Configuration de base

# .github/workflows/accessibility.yml
name: Accessibility Tests

on:
  pull_request:
    branches: [main]
  push:
    branches: [main]

jobs:
  a11y:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Start server
        run: npm run preview &

      - name: Wait for server
        run: npx wait-on http://localhost:4321

      - name: Run accessibility tests
        run: npx pa11y-ci

Configuration pa11y-ci

// .pa11yci.json
{
  "defaults": {
    "timeout": 10000,
    "runners": ["axe"],
    "standard": "WCAG2AA"
  },
  "urls": [
    "http://localhost:4321/",
    "http://localhost:4321/contact",
    "http://localhost:4321/tarifs"
  ]
}

Avec Accorma API

# .github/workflows/accorma.yml
name: RGAA Audit

on:
  push:
    branches: [main]

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Accorma Audit
        run: |
          curl -X POST https://api.accorma.com/v1/audits \
            -H "Authorization: Bearer ${{ secrets.ACCORMA_API_KEY }}" \
            -H "Content-Type: application/json" \
            -d '{"siteId": "${{ vars.ACCORMA_SITE_ID }}", "wait": true}'

      - name: Check Results
        run: |
          SCORE=$(curl -s https://api.accorma.com/v1/sites/${{ vars.ACCORMA_SITE_ID }}/score \
            -H "Authorization: Bearer ${{ secrets.ACCORMA_API_KEY }}" \
            | jq '.score')

          if [ "$SCORE" -lt 75 ]; then
            echo "Score RGAA insuffisant: $SCORE%"
            exit 1
          fi
          echo "Score RGAA: $SCORE% ✓"

GitLab CI

Configuration de base

# .gitlab-ci.yml
stages:
  - build
  - test
  - deploy

accessibility:
  stage: test
  image: node:20
  script:
    - npm ci
    - npm run build
    - npm run preview &
    - npx wait-on http://localhost:4321
    - npx pa11y-ci
  artifacts:
    reports:
      junit: pa11y-results.xml
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

Avec Lighthouse CI

lighthouse:
  stage: test
  image: cypress/browsers:node18.12.0-chrome107
  script:
    - npm ci
    - npm run build
    - npm run preview &
    - npx wait-on http://localhost:4321
    - npx lhci autorun
  artifacts:
    paths:
      - .lighthouseci/

Bonnes pratiques

1. Définir des seuils progressifs

Ne bloquez pas immédiatement sur 100%. Commencez par un seuil atteignable et augmentez-le progressivement.

# Mois 1 : seuil 60%
# Mois 3 : seuil 70%
# Mois 6 : seuil 80%

2. Séparer les erreurs critiques

Certaines erreurs sont plus graves que d’autres. Bloquez sur les erreurs critiques, avertissez sur les mineures.

// pa11y config
{
  "threshold": 0,  // 0 erreurs critiques
  "ignore": [
    "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18"  // Ignorer temporairement
  ]
}

3. Tester les parcours utilisateurs

Au-delà des pages statiques, testez les interactions :

// Test avec Playwright
test('formulaire de contact accessible', async ({ page }) => {
  await page.goto('/contact');

  // Vérifier les labels
  const emailInput = page.getByLabel('Email');
  await expect(emailInput).toBeVisible();

  // Vérifier la navigation clavier
  await page.keyboard.press('Tab');
  await expect(emailInput).toBeFocused();
});

4. Documenter les exceptions

Certains problèmes ne peuvent pas être corrigés immédiatement. Documentez-les :

# a11y-exceptions.yml
exceptions:
  - rule: "color-contrast"
    selector: ".legacy-component"
    reason: "Composant tiers, correction prévue T2 2026"
    ticket: "JIRA-1234"

Alertes et monitoring

Webhook Slack

- name: Notify Slack on failure
  if: failure()
  uses: slackapi/slack-github-action@v1
  with:
    payload: |
      {
        "text": "⚠️ Régression accessibilité détectée",
        "blocks": [
          {
            "type": "section",
            "text": {
              "type": "mrkdwn",
              "text": "PR #${{ github.event.pull_request.number }} a échoué les tests a11y"
            }
          }
        ]
      }

Conclusion

L’intégration de l’accessibilité dans votre CI/CD transforme une obligation en réflexe. Chaque commit est vérifié, chaque régression est détectée.

Accorma s’intègre nativement avec GitHub Actions et GitLab CI. Découvrez nos plans avec API et automatisez vos audits RGAA.