Extension Chrome « Audit RGAA 4.1.2 »
Extension Chrome (Manifest V3) d'audit d'accessibilité numérique : elle analyse une page web et évalue sa conformité au RGAA 4.1.2 (106 critères, 13 thématiques).
- JavaScript (ES5)
- Chrome Manifest V3
- Chrome DevTools Protocol
- Accessibilité / RGAA
Captures d'écran
Aperçu de l'extension en fonctionnement.
À 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.
Cadre : projet réalisé dans le cadre de mon stage de BTS SIO.
⚠ À COMPLÉTER : entreprise d'accueil et période du stage.
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).
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 danschrome://extensionsactiver le mode développeur et « Charger l'extension non empaquetée » sur le dossierdist/.
Lancer un audit
- Ouvrir la page à auditer puis le panneau latéral de l'extension.
- Choisir le périmètre d'audit.
- Cliquer sur « Auditer ». Les jugements précédents sont restaurés automatiquement.
Lire les résultats
| 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
| 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.