# Audit d'accessibilité — checklist de vérification (MG-111) Cible : **WCAG 2.1 niveau AA**. Ce document liste ce qui a été traité pendant le développement et ce qui doit être vérifié à la main avant la mise en ligne. Les outils automatiques ne détectent qu'environ 30 % des problèmes réels : les points marqués « manuel » sont les plus importants. --- ## Lancer les mesures automatiques **Lighthouse** (intégré à Chrome, onglet *Lighthouse* des outils de développement) — lancer en navigation privée, sinon les extensions faussent le résultat. Objectifs à atteindre sur chaque page : | Catégorie | Objectif | Remarque | |---|---|---| | Performance | ≥ 90 | mobile, réseau simulé « Slow 4G » | | Accessibility | 100 | un score inférieur signale un vrai défaut | | Best Practices | ≥ 95 | | | SEO | 100 | | Pages à tester : `/`, `/qui-suis-je`, `/approche`, `/cabinet`, `/visio`, `/ateliers`, `/faq`, `/contact`. **axe DevTools** (extension navigateur) complète Lighthouse et donne des diagnostics plus précis sur les rôles ARIA. --- ## Traité pendant le développement - [x] **Langue déclarée** — `` sur toutes les pages. - [x] **Titres uniques** — chaque page a son propre ``, de 31 à 43 caractères. - [x] **Hiérarchie des titres** — un seul `<h1>` par page, pas de niveau sauté. - [x] **Textes alternatifs** — les images porteuses de sens ont un `alt` descriptif ; les images purement décoratives ont `alt=""` et `aria-hidden="true"` (décor flottant Ψ, motifs de fond). - [x] **Accordéons** — `aria-expanded`, `aria-controls` et `hidden` pilotés par le JavaScript : l'état est correctement annoncé par un lecteur d'écran. - [x] **Menu mobile** — fermeture à la touche Échap, `role="dialog"`, `aria-label`, boutons de fermeture explicites. - [x] **Formulaire de contact** — chaque champ dans un `<label>` englobant, messages d'erreur affichés en clair sous le champ concerné. - [x] **Mouvement** — `@media (prefers-reduced-motion: reduce)` neutralise les animations, les apparitions au défilement et la parallaxe. - [x] **Back-office non indexé** — `<meta name="robots" content="noindex, nofollow">`. - [x] **Zone de clic** — les boutons et liens principaux dépassent 44 × 44 px. --- ## À vérifier à la main ### Contrastes — corrections appliquées Partout où du texte blanc repose sur une des deux couleurs d'accent, la teinte des maquettes a été assombrie pour atteindre le seuil AA de 4,5:1. | Couleur | Avant | Après | Statut | |---|---|---|---| | Terracotta — CTA, pastilles | `#C88772` 2,93:1 | `#A85E44` **4,83:1** | ✅ AA | | Terracotta au survol | `#bd7761` 3,81:1 | `#96523B` **5,89:1** | ✅ AA | | Bleu — CTA, sections, pastilles | `#7895A5` 3,16:1 | `#5C7A8B` **4,55:1** | ✅ AA | | Bleu au survol | `#688798` 3,81:1 | `#4B6675` **6,08:1** | ✅ AA | > **Note sur la valeur du bleu.** Une version antérieure de ce document > annonçait `#5E7C8D` à 4,6:1. C'était une erreur de calcul : cette teinte ne > donne que **4,43:1**, soit en dessous du seuil. La valeur retenue est > `#5C7A8B` (4,55:1), la plus proche qui le franchisse réellement. > > Les ratios sont désormais calculés par `tools/contraste.php`, dont le > calibrage est vérifié sur `#767676` — valeur WCAG de référence à 4,54:1. > > ```bash > docker compose exec php php tools/contraste.php 7895A5 5C7A8B > ``` **Emplacements modifiés en terracotta (12) :** CTA du header, CTA collant mobile, CTA du menu mobile, CTA de bas de page des cinq pages intérieures, bouton d'envoi du formulaire, pastille de motif du tiroir des messages, pastille « TS » de l'accueil, pastille des ateliers adultes, bouton « Accepter » des cookies, bouton primaire du back-office, survol de « Voir le site ». **Emplacements modifiés en bleu (14) :** CTA du hero, CTA « Réserver sur Doctolib », bandeau de citation, section « Mon approche », pastille « EMDR », hero de la page Visio (fond et dégradé), pastille des ateliers adolescents, survol des boutons d'atelier, rubrique active de la sidebar, avatar, onglet actif, filtre actif, pagination active, avatar des super-admins. **Les teintes d'origine restent inchangées** partout où aucun texte blanc ne les surmonte : filets de citation, pictogrammes SVG, glyphes Ψ, **les deux moitiés du rideau du menu mobile**, numéros d'étapes bleus, textes terracotta ou bleus sur fond clair. Contrôle automatisé : `bash design-reference/check-contraste.sh` ### Contrastes restants à arbitrer | Association | Où | Ratio | Remarque | |---|---|---|---| | `#8FA99A` (sauge) sur `#F7F4EF` | sur-titres en capitales | ≈ 2,3:1 | petit texte décoratif | | `rgba(40,51,49,0.5)` | fil d'Ariane, mentions discrètes | ≈ 4,3:1 | très proche du seuil | | `#C88772` sur `#283331` | lien « Prendre rendez-vous → » du pied de page | ≈ 4,45:1 | juste sous le seuil | | `#8FA99A` sur blanc | interrupteur actif du back-office | ≈ 2,4:1 | l'état est aussi porté par le libellé texte | > Ces valeurs viennent des maquettes et n'ont pas été modifiées : seules les > corrections explicitement demandées ont été appliquées. Le texte de grande taille (≥ 24 px, ou ≥ 18,7 px en gras) bénéficie d'un seuil abaissé à 3:1 : les grands titres blancs sur fond bleu passent, les petits boutons non. ### Navigation au clavier - [ ] Parcourir chaque page uniquement avec `Tab` : l'ordre suit-il la lecture ? - [ ] Le focus est-il **visible** sur chaque élément ? (le contour par défaut du navigateur a été conservé, ne pas le supprimer) - [ ] Le sous-menu « Accompagnements » s'ouvre-t-il au focus clavier ? (`:focus-within` est en place, à confirmer en usage réel) - [ ] Menu mobile ouvert : le focus reste-t-il à l'intérieur, et Échap ferme-t-il ? - [ ] Les accordéons FAQ s'ouvrent-ils avec `Entrée` et `Espace` ? ### Lecteur d'écran À tester avec NVDA (Windows, gratuit) ou VoiceOver (macOS, `Cmd+F5`) : - [ ] La structure de la page est-elle compréhensible à l'écoute seule ? - [ ] Les liens sont-ils explicites hors contexte ? (éviter « en savoir plus » isolé — le lien du hero mériterait un `aria-label` plus précis) - [ ] Le formulaire de contact est-il remplissable sans voir l'écran ? - [ ] Après envoi, le message de confirmation est-il annoncé ? ### Zoom et redimensionnement - [ ] Zoom navigateur à **200 %** : aucun contenu coupé, aucun défilement horizontal. - [ ] Taille de police système augmentée : la mise en page tient-elle ? (les tailles sont en `px` dans les maquettes, ce qui limite l'adaptation — point à signaler si Maud a des patients malvoyants) ### Contenu - [ ] Les textes alternatifs décrivent-ils réellement les photos, ou répètent-ils le titre voisin ? - [ ] Le numéro d'urgence est-il lisible et repérable sur la page Contact ? - [ ] Les abréviations (EMDR, TCC, TS, MPC) sont-elles explicitées au moins une fois par page ? --- ## Recensement des écarts connus | Écart | Gravité | Origine | Statut | |---|---|---|---| | Contraste des boutons terracotta | Bloquant pour AA | Maquettes | ✅ **corrigé** (`#A85E44`) | | Contraste du bleu — CTA, sections, pastilles | Bloquant pour AA | Maquettes | ✅ **corrigé** (`#5C7A8B`) | | Sur-titres sauge sur ivoire | Moyen | Maquettes | ouvert | | Tailles de police en pixels | Moyen | Maquettes | ouvert | | Lien « En savoir plus » peu explicite | Faible | Maquettes | ouvert | Les écarts « ouverts » n'ont pas été corrigés : les maquettes font foi pour le design, et seule la correction terracotta a été explicitement demandée. Ils sont listés ici pour que la décision soit prise en connaissance de cause.