Comment ce site a été conçu

Les choix d'accessibilité

Structure et navigation

• Un lien d'évitement en premier élément, un seul h1 par page, des titres sans saut de niveau, des repères header, nav, main, footer nommés quand il y en a plusieurs.
• Un fil d'Ariane sur chaque page intérieure, un plan du site, et le même menu partout : l'aide se trouve toujours au même endroit, comme le demandent les WCAG 2.2.
• Tout fonctionne sans JavaScript : contenus, formulaires, thèmes de l'appareil. Les scripts n'ajoutent que du confort.
• Aucune fenêtre superposée : le panneau d'affichage, l'avis de thème et le bandeau de mesure d'audience sont dans le flux de la page. Rien ne recouvre jamais un élément qui a le focus.

Clavier et focus

• Chaque élément interactif est atteignable et activable au clavier, dans l'ordre de lecture. Le focus est visible partout : un anneau de 3 pixels doublé d'un halo, calculé pour contraster avec chaque fond, y compris sur le pied de page bleu nuit.
• Les cibles cliquables mesurent au moins 24 par 24 pixels (critère 2.5.8 des WCAG 2.2), les boutons 44 pixels de haut.
• La touche Échap ferme le panneau d'affichage et rend le focus au bouton qui l'a ouvert.

Couleurs et lisibilité

• Palette crème et bleu nuit, choisie pour les lecteurs dyslexiques (texte foncé sur fond crème plutôt que noir sur blanc) et pour les personnes sensibles aux stimulations visuelles (tons doux, jamais de blanc ni de noir purs par défaut).
• Quatre affichages au choix, mémorisés sans cookie : crème, blanc, sombre bleu nuit, contraste renforcé. Plus la taille du texte, l'espacement, et la désactivation des animations. Ce que fait ce réglage, et ce qu'il ne fait pas.
• La police Atkinson Hyperlegible, conçue par le Braille Institute pour distinguer les lettres qui se ressemblent, hébergée ici en quatre fontes de 17 à 18 Ko.
• L'information n'est jamais portée par la couleur seule : les liens sont soulignés, les erreurs de formulaire sont écrites, les états sont nommés.
• Le site respecte le zoom jusqu'à 400 %, le réaffichage à 320 pixels de large sans défilement horizontal, l'espacement de texte augmenté (critère 1.4.12), les modes de contraste forcé de Windows et la préférence de mouvement réduit.

Formulaires

• Chaque champ a une étiquette visible et reliée, le format attendu est annoncé avant la saisie, les champs obligatoires sont indiqués par une règle générale et une mention « facultatif » sur les autres.
• Les erreurs sont vérifiées côté serveur, listées sur une page accessible qui conserve votre saisie ; avec JavaScript, elles s'affichent aussi sous chaque champ, reliées par aria-describedby, et un résumé annoncé compte les champs à corriger.
• Pas de CAPTCHA, jamais : la protection contre les robots repose sur un champ piège invisible et une limitation côté serveur.
• L'adresse e-mail n'est pas le seul moyen de contact : une visio en langue des signes est proposée.

Langue des signes et médias

• Les pages importantes ont un emplacement vidéo en langue des signes française, lu par le lecteur natif du navigateur, avec sous-titres et transcription complète. Pourquoi, et quelles pages.
• Aucune lecture automatique, aucun son non sollicité, aucune animation qui ne puisse être coupée.

Les choix d'écoconception

• HTML, CSS et JavaScript écrits à la main, générés par un script Python de 380 lignes, sans dépendance. Une feuille de style de 32 Ko (7 Ko compressée), trois scripts de 6 à 7 Ko, chargés avec une empreinte de version pour être mis en cache un an.
• Pas d'image décorative : les motifs sont dessinés en CSS, les pictogrammes sont des SVG en ligne de quelques centaines d'octets. Les seules images binaires sont le logo et l'image de partage.
• Les polices sont hébergées ici, en sous-ensemble latin, et ne sont jamais chargées depuis un serveur tiers.
• Aucun service tiers n'est chargé sans accord explicite. Refuser est aussi simple qu'accepter.
• Les détails, critère par critère, sont dans la déclaration d'écoconception.

Les tests réalisés

Les tests automatiques ont été passés le 3 octobre 2026 sur la totalité des 31 pages de cette version. Les tests manuels sont refaits avant chaque mise en ligne. L'ensemble sera recommencé à chaque changement important.

Tests automatiques

• axe-core 4.10, dans Chromium, avec les règles WCAG 2.0, 2.1 et 2.2 niveaux A et AA et les bonnes pratiques : zéro violation sur chaque page, dans les quatre affichages, à 1 280 et à 320 pixels de large.
• Validation HTML : le gabarit commun et chaque type de composant ont été passés au validateur du W3C sans erreur ni avertissement ; chaque page a ensuite été vérifiée par un analyseur syntaxique (imbrication, identifiants, attributs obligatoires). La validation W3C de l'ensemble des adresses est refaite sur le site de test avant chaque mise en ligne.
• Contrastes : calcul de tous les couples texte et fond réellement rendus sur chaque page, dans les quatre affichages, selon la formule des WCAG : 7 896 couples, minimum constaté 6,2:1 (exigence : 4,5:1). Composants et focus : 3:1 au moins.
• Réaffichage : aucun défilement horizontal à 320 pixels, texte agrandi et espacement augmenté compris.
• Liens : tous les liens internes mènent à une page existante ; les anciennes adresses sont redirigées.

Tests manuels

Faits par moi, avant chaque mise en ligne, parce qu'aucun outil ne les remplace :

• Parcours complet au clavier de chaque page, avec Tab, Maj + Tab, Entrée, Espace, flèches et Échap.
• Lecture avec un lecteur d'écran sous Windows (NVDA et Firefox), sur les parcours principaux : accueil, pré-diagnostic, contact, tarifs, panneau d'affichage.
• Zoom à 200 % et à 400 %, orientation portrait et paysage.
• Les trois thèmes et le contraste renforcé, vérifiés visuellement, page par page.

Un test automatique ne couvre qu'une partie des critères : il ne juge ni la pertinence d'une alternative, ni la clarté d'un libellé, ni la logique d'un parcours. C'est pour cela que les tests manuels existent, et que la déclaration d'accessibilité dit précisément ce qui a été vérifié et comment.

Ce qui reste imparfait

• Les vidéos en langue des signes sont en préparation : les emplacements sont en place, avec leurs transcriptions, mais les vidéos ne sont pas encore tournées.
• Le site est entièrement en français, alors que je travaille aussi en anglais et en allemand. Des pages de présentation dans ces deux langues sont prévues.
• L'évaluation d'accessibilité est une auto-évaluation : elle n'a pas été contre-vérifiée par un tiers. Un regard extérieur trouve toujours quelque chose.
• La mesure d'audience, même soumise à accord, reste un service tiers. Une alternative sans traceur est à l'étude.
• Le logo est provisoire, en attendant sa refonte.

Vous avez trouvé un défaut ? Dites-le moi : je corrige et je l'ajoute ici.

Les outils utilisés

• Un éditeur de texte, Python 3 pour la construction, Git pour l'historique.
• Chromium et Firefox pour les tests, NVDA pour le lecteur d'écran.
• axe-core pour les contrôles automatiques, un script maison pour les contrastes et le réaffichage.
• PHPMailer pour l'envoi des formulaires, sur un hébergement mutualisé Apache.
• Un assistant d'intelligence artificielle m'a aidée à préparer cette version du site : relecture des textes, scripts de test, vérifications répétitives. Les choix, le code final et les tests manuels sont de moi, et je le dis parce que je demande la même transparence à mes clients.

Demander mon pré-diagnostic gratuit