Accessibilité de ce site

Ce site est conçu comme une démonstration d'accessibilité. J'y ai mené un auto-audit selon la méthodologie RGAA 4.1, dans le cadre de ma formation d'auditeur (Access42, certification visée septembre 2026).

Ce n'est pas une déclaration de conformité officielle — c'est une démarche pédagogique, transparente et vérifiable.

Informations d'audit

Référentiel

RGAA 4.1 (aligné WCAG 2.1)

Niveau : AA

Périmètre

8 gabarits auditées :

  • Accueil
  • À propos / CV
  • Hub Ressources
  • Article
  • Composant (7 zones)
  • Étude de cas
  • Contact
  • 404

Outils utilisés

  • NVDA + Firefox/Chrome
  • axe DevTools
  • WAVE
  • Lighthouse
  • Navigation clavier manuelle
  • Simulateurs DevTools

Résultats clés

95% conforme

  • ✅ 83 critères conformes
  • ⚠️ 2 réserves mineures
  • 🔵 4 non applicables

Thématiques RGAA — Détails & Exemples

1. Images

Status : ✅ Conforme

Critères testés : RGAA 1.1, 1.2, 1.3

Tous les éléments <img> ont des alt descriptifs ou vides si décorativifs.

  • Exemple bon : <img src="graph.svg" alt="Graphique de tendances 2024" />
  • Exemple décorativif : <img src="decoration.svg" alt="" />
  • Déjà sur le site : favicon, logos thème, icônes (tout marqué correctement)
2. Couleurs

Status : ✅ Conforme

Critères testés : RGAA 3.2 (Contraste), WCAG 1.4.3

Contrastes respectent le niveau AA (4.5:1 minimum). Aucune information n'est portée par la seule couleur.

  • Thème clair : vert/fond clair (ratio 7.2:1, AAA+)
  • Thème sombre : vert clair/fond sombre (ratio 6.8:1, AAA+)
  • Erreurs : bordure rouge + texte explicite, pas juste couleur
  • Testé avec : WebAIM Contrast Checker, DevTools color picker
3. Navigation

Status : ✅ Conforme

Critères testés : RGAA 10 (Structuration), WCAG 2.4.3 (Focus Visible)

Ordre de tabulation logique, skip link visible au focus, focus visible 3px vert avec offset.

  • Skip link : appuyez sur Tab en haut de la page → visible
  • Breadcrumb : aria-current="page" sur l'élément actif
  • Landmarks : <header role="banner">, <nav aria-label>, <main id="main">, <footer role="contentinfo">
  • Focus visible : testable partout avec Tab
4. Formulaires

Status : ✅ Conforme

Critères testés : RGAA 11 (Formulaires), WCAG 1.3.1 (Info & Relationships)

Tous les champs ont des labels liés, honeypot accessible, erreurs annoncées en aria-live.

  • Labels : <label for="email">Email</label> + <input id="email" />
  • Honeypot : invisible mais accessible (position absolute, -10000px, pas display: none)
  • Erreurs : aria-invalid="true" + aria-live="polite"
  • Voir en action : page Contact
5. Scripts & Composants interactifs

Status : ✅ Conforme

Critères testés : RGAA 7 (Scripts), WCAG 4.1.3 (Status Messages)

Tous les composants interactifs sont accessibles au clavier, avec annonces correctes au SR.

  • Dialog natif : <dialog aria-modal="true" aria-labelledby> → Échap ferme, focus trap automatique
  • Accordion natif : <details><summary> → Entrée/Espace, annonces SR gratuites
  • Démos interactives : testez par vous-même
  • Voir la démo Dialog — 3 exemples testables
  • Voir la démo Accordion — 3 exemples testables
6. Consultation & Adaptation

Status : ✅ Conforme

Critères testés : RGAA 13 (Consultation), WCAG 1.4.4 (Resize Text)

Zoom jusqu'à 400% sans débordement horizontal, reflow à 320px, respect des préférences utilisateur.

  • Zoom sans débordement : testé à 200% et 400%
  • Reflow : 320px CSS = une colonne, pas de scroll horizontal
  • Préférences utilisateur : prefers-reduced-motion, prefers-color-scheme, prefers-contrast, forced-colors
  • Tester vous-même : DevTools → Toggle device toolbar, ou zoom navigateur
7. Liens & Texte

Status : ✅ Conforme

Critères testés : RGAA 6.1, 10.1 (Liens), RGAA 8 (Structuration)

Tous les liens ont un texte explicite, distincts visuellement (underline), pas de « cliquez ici ».

  • Bon : <a href="/articles/rgaa-wcag-eaa">Lire sur RGAA et WCAG</a>
  • Mauvais : <a href="/about">cliquez ici</a>
  • Hiérarchie : h1 unique par page, h2/h3 imbriquées correctement
8. Structuration & Éléments obligatoires

Status : ✅ Conforme

Critères testés : RGAA 8, 9, 10 (Structuration & Navigation)

HTML sémantique, landmarks correctes, un seul h1 par page, langue déclarée.

  • Landmarks : header, nav, main, footer sur chaque page
  • Langue : <html lang="fr">
  • h1 unique : titre de page, pas duplication
  • Pas de divitis : utilisation d'éléments sémantiques (header, section, article, aside)
9. Présentation & CSS

Status : ✅ Conforme

Critères testés : RGAA 10 (Présentation), WCAG 1.3.1 (Structure)

Aucun contenu masqué visuellement mais visible au lecteur d'écran. Animations respectent les préférences.

  • CSS sans JS : animations fluides, mais @media (prefers-reduced-motion: reduce) supprime les animations
  • Focus visible : déclaré en CSS global, sur tous les éléments interactifs
  • Honeypot : caché avec position: absolute; left: -10000px (pas display: none qui l'exclut du SR)
10. Non applicables

Certaines thématiques ne s'appliquent pas à ce site (par nature du contenu) :

  • Cadres (iframes) : 🔵 Non applicable — pas de contenu embarqué
  • Multimédia (vidéo/audio) : 🔵 Non applicable — site statique texte/articles
  • Tableaux (données) : 🔵 Non applicable — grilles CSS, pas de <table> de données

Comment tester vous-même

L'accessibilité doit être testée, pas juste affirmée. Voici comment vérifier par vous-même :

🖱️ Test clavier (le plus important)

Objectif : naviguer tout le site sans souris.

  1. Appuyez sur Tab pour naviguer d'élément en élément
  2. Appuyez sur Shift+Tab pour naviguer en arrière
  3. Appuyez sur Entrée ou Espace sur les boutons
  4. Échap pour fermer les modales ou annuler
  5. Vérifiez que le focus est toujours visible (outline vert 3px)

À tester spécifiquement :

👂 Test lecteur d'écran

Outils gratuits :

  • Windows : NVDA (https://www.nvaccess.org/) — gratuit, complet
  • Mac/iOS : VoiceOver (intégré, Cmd+F5)
  • Android : TalkBack (intégré, geste des doigts)

À tester avec NVDA + Firefox (le plus courant) :

  1. Démarrez NVDA (Ctrl+Alt+N)
  2. Naviguez avec les flèches ou Tab
  3. Écoutez ce qui est annoncé : titres, labels, état des boutons
  4. Testez les formulaires : les labels sont-ils liés ?
  5. Testez les modales : NVDA annonce-t-il « Boîte de dialogue » ?
  6. Testez les accordéons : NVDA annonce-t-il « fermé/ouvert » ?

Checklist NVDA :

  • ✅ Headings annoncées : h1, h2, h3
  • ✅ Landmarks annoncés : banner, navigation, main, contentinfo
  • ✅ Boutons annoncés : « bouton, Ouvrir la modale »
  • ✅ Liens explicites : « Lire la doc » (pas juste « lien »)
  • ✅ Formulaires : « champ éditable Email » avec label
🎨 Test zoom & reflow

Objectif : le site reste utilisable au zoom.

  1. Appuyez sur Ctrl+Plus (ou Cmd+Plus sur Mac) pour agrandir
  2. Testez à 200% (zoom 2x) : pas de scroll horizontal ?
  3. Testez à 400% (zoom 4x) : toujours lisible et navigable ?
  4. Alternative : DevTools → Toggle device toolbar → petite largeur (320px)

Ce qui doit rester accessible :

  • Boutons cliquables (cibles ≥ 44×44 px)
  • Pas de débordement horizontal
  • Une colonne sur mobile (reflow)
  • Formulaires toujours remplissables
🎨 Test contraste & couleurs

Outils :

  • WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/) — copiez/collez les couleurs
  • axe DevTools (extension Chrome/Firefox) — teste automatiquement les contrastes
  • DevTools natif — sélectionnez un élément, inspectez la couleur

À tester :

  • Texte sur fond : ratio ≥ 4.5:1 (AA) — idéalement ≥ 7:1 (AAA)
  • Les deux thèmes : clair ET sombre doivent être conformes
  • Aucune information portée par la couleur seule (ex: erreur = rouge + texte explicite)
🤖 Test automatisé

Extensions navigateur :

  • axe DevTools (Chrome/Firefox) — détecte les violations WCAG
  • WAVE (Chrome/Firefox) — visuellement les erreurs sur la page
  • Lighthouse (Chrome DevTools) — onglet Lighthouse, audit Accessibility

Utilisation :

  1. Installez l'extension
  2. Ouvrez la page du site
  3. Lancez l'audit
  4. Lisez les violations détectées (certaines sont de faux positifs)
  5. Signalez-moi via le formulaire contact
🔧 Test des préférences utilisateur

DevTools → Rendering :

  • Emulate CSS media feature prefers-reduced-motion: désactiver les animations (images gif, transitions)
  • Emulate CSS media feature prefers-color-scheme: tester les deux thèmes (clair/sombre)
  • Emulate CSS media feature prefers-contrast: augmente les contrastes et le focus
  • Emulate CSS media feature forced-colors: mode Windows haut contraste

Comment je garantis la suite

L'audit est une photo datée d'un périmètre. La qualité continue est un processus :

  • Gabarits auditées une fois : chaque nouvel article/composant hérite de la conformité du gabarit.
  • Vérification avant publication : clavier + axe + lecteur d'écran sur le contenu nouveau (alt, titres, liens).
  • Ci/CD (phase 2) : tests automatisés axe + Lighthouse pour bloquer les régressions.

⚠️ Note : Cet audit en est à ses débuts. Je serai formé à l'auditage complet en juillet 2026 et apporterai les ajustements nécessaires.

Vous avez détecté un problème d'accessibilité ? Contactez-moi.