Extension Chrome « Audit RGAA 4.1.2 »

À propos du projet

Outil d'audit d'accessibilité que j'ai conçu et développé pour accélérer et fiabiliser les audits RGAA directement dans le navigateur. Il automatise la détection d'une grande partie des non-conformités et guide l'auditeur sur les critères qui nécessitent un jugement humain.

Contexte & besoin

Un audit d'accessibilité manuel est long et répétitif. L'objectif était de fournir un outil interne, intégré à Chrome, capable de pré-qualifier automatiquement les 106 critères du référentiel et de mémoriser les jugements par page pour reprendre un audit à tout moment.

Fonctionnalités clés

• Audit des 106 critères sur 13 thématiques (détection machine + verdict auditeur).
• Trois périmètres : audit complet, mini-audit commun, mini-audit clients.
• Interfaces enrichies pour les images, les liens et les formulaires.
• Outils visuels : contraste, ordre de tabulation, suivi du focus, hiérarchie des titres, inspecteur lecteur d'écran, vue mobile…
• Persistance locale des jugements par URL (rien n'est envoyé à un serveur).

Stack technique

• Extension Chrome Manifest V3 (content script, side panel, service worker).
• JavaScript ES5, sans framework ; build par concaténation ordonnée.
• Chrome DevTools Protocol (arbre d'accessibilité, émulation mobile).
• Stockage local chrome.storage.local.

Détails dans l'onglet Documentation technique.

Compétences du Bloc 1 validées

• 1.3 : développer une présence en ligne accessible et conforme au cadre juridique (RGAA).
• 1.5 : mettre à disposition un service (publication sur le Chrome Web Store, documentation).

Voir le portfolio E5

Statut

Extension en cours d'examen sur le Chrome Web Store.

Documentation technique

Vue d'ensemble

L'extension est composée de trois bundles qui communiquent exclusivement par messages Chrome :

• content.js, injecté dans la page auditée : détection des critères, surlignage, rendu.
• sidepanel.js, l'interface (panneau latéral).
• background.js, service worker : accès au Chrome DevTools Protocol (CDP).

Système de build

Le code repose sur un scope global partagé (les fonctions s'appellent sans import/export), incompatible avec un bundler classique. La stratégie retenue est la concaténation ordonnée : build.js lit build.order.json, assemble les modules dans l'ordre déclaré, puis valide la syntaxe avec node --check. Le code est volontairement en ES5 strict (pas de let/const/arrow functions).

{
  "content": {
    "output": "content.js",
    "files": [
      "src/content/00-referentiel.js",
      "src/content/01-helpers.js",
      "..."
    ]
  }
}

Architecture des messages

• side panel → content : chrome.tabs.sendMessage() (lancer l'audit, localiser, re-rendre…).
• content → background : chrome.runtime.sendMessage() (relayout, scans CDP).
• side panel → background : émulation mobile, lecteur d'écran.

Moteur de verdict

Chaque critère agrège ses constats machine dans un store R. Le verdict est calculé selon une priorité simple, où le jugement de l'auditeur prime toujours :

si jugement auditeur   -> jugement auditeur
si un constat NC       -> Non conforme
si un constat SEMI     -> À confirmer
si tous NA             -> Non applicable
si OK (auto)           -> Conforme
sinon                  -> À tester (manuel)

Thématiques enrichies (1, 6, 11)

Les images (1.1 à 1.9), les liens (6.1) et les formulaires (11.1 à 11.13) disposent d'une interface dédiée : classification élément par élément (porteuse/décorative, explicite/ambigu, étiquetage correct/incorrect), puis recalcul automatique du verdict, avec possibilité de surclassement par sous-critère.

Persistance

Seule la couche de décision est sauvegardée (les constats machine sont recalculés à chaque audit). Chaque élément est identifié par une signature stable (chemin DOM + empreinte de contenu), robuste aux évolutions de la page. Les audits sont stockés par URL normalisée dans chrome.storage.local (50 entrées max, purge automatique).

Compatibilité

Chrome / navigateurs Chromium (Manifest V3 + Chrome DevTools Protocol requis).

Guide utilisateur

Présentation

L'extension analyse les pages selon le RGAA 4.1.2. Elle détecte automatiquement une partie des non-conformités, laisse l'auditeur qualifier les critères manuels et sauvegarde les jugements page par page. Elle ne remplace pas un test avec de vrais lecteurs d'écran, mais accélère et guide le travail.

Installation

• Chrome Web Store (bientôt) : « Ajouter à Chrome ».
• Mode développeur : node build.js, puis dans chrome://extensions activer le mode développeur et « Charger l'extension non empaquetée » sur le dossier dist/.

Lancer un audit

1. Ouvrir la page à auditer puis le panneau latéral de l'extension.
2. Choisir le périmètre d'audit.
3. Cliquer sur « Auditer ». Les jugements précédents sont restaurés automatiquement.

Lire les résultats

Signification des pastilles de synthèse

Pastille	Signification
NC	Non conforme, anomalie détectée.
C	Conforme.
À confirmer	Détection incertaine, à valider manuellement.
NA	Non applicable sur cette page.

Le verdict de l'auditeur prime toujours sur le verdict automatique.

Périmètres d'audit

Choix du périmètre selon le besoin

Périmètre	Usage
Complet (106 critères)	Audit formel, déclaration d'accessibilité.
Mini-audit commun	Diagnostic rapide, prospection.
Mini-audit clients	Test avant mise en ligne.

Outils visuels

• Pipette de contraste (critères 3.2 / 3.3).
• Ordre de tabulation (12.8) et suivi du focus (10.7).
• Hiérarchie des titres (9.1) et visualisation des listes (9.3).
• Test d'espacement du texte (10.12).
• Inspecteur lecteur d'écran (arbre d'accessibilité Chrome).

Mémoire des audits

Les jugements sont enregistrés localement par URL et restaurés au prochain audit de la même page (50 audits conservés). Aucune donnée n'est synchronisée ni envoyée à l'extérieur.

Vue mobile

Une émulation mobile (viewport 360 × 740, media queries réelles) permet de relancer l'audit dans un contexte mobile pour les critères responsive (10.11) et d'orientation (13.9).

Une question ? Me contacter.