Plateforme française de télésoin · Hébergement HDS · Essai gratuit 7 jours
Démonstration d'accessibilité : avant / après
Cette page compare les défauts d'accessibilité réellement constatés sur telavie.fr le 9 septembre 2026 avec la version corrigée de chacun. Tous ces défauts ont depuis été corrigés en production, sur les 54 pages du site public. Elle applique elle-même les huit correctifs, et sert donc aussi de référence de ce à quoi ressemble une page conforme.
Page de travail interne. Elle n'est ni indexée par les moteurs de recherche, ni reliée depuis les autres pages du site. Elle ne modifie rien à la production : les pages réelles restent en l'état tant que les correctifs n'ont pas été décidés — c'est ce qui permet de comparer.
Mise à jour du 9 septembre 2026, en fin de journée : les huit défauts présentés sur cette page sont désormais corrigés en production. Les échantillons « Avant » ne reproduisent donc plus l'état en ligne, mais l'état antérieur, conservé ici pour la comparaison. Cette page reste la trace de ce qui a été corrigé et de la manière dont ça l'a été.
Les échantillons « avant » reproduisent fidèlement les couleurs et les styles actuellement en ligne. Ils sont volontairement non conformes : c'est leur objet. Un vérificateur automatique les signalera donc — il ne sait pas distinguer un défaut d'une reproduction de défaut. En dehors de ces spécimens, identifiés par leur étiquette rouge « Actuel », la page ne présente aucune non-conformité : l'information que chacun porte est reprise en toutes lettres dans sa légende, correctement contrastée.
1. Contraste des textes critère RGAA 3.2
Le seuil est de 4,5:1 entre la couleur du texte et celle de son fond. Il ne s'applique qu'à partir de 18,66 px en gras ou 24 px en normal, seuils au-delà desquels 3:1 suffit — les trois cas ci-dessous sont en dessous, c'est donc bien 4,5:1 qui est requis.
Texte gris #6B7499 avec une opacité de 60 %, soit un rendu #A6ACC2 sur blanc. Contraste 2,26:1 — insuffisant.Après, en ligne depuis le 9 septembre 2026
Même gris #6B7499, sans l'opacité. Contraste 4,58:1 — conforme.
Correctif : retirer opacity:0.6 de la mention de copyright. Rien d'autre à changer — la couleur elle-même passe le seuil.
La marge est cependant faible : 4,58:1 pour un minimum de 4,5:1. Si vous préférez une marge confortable, #5A6285 donne 5,6:1 pour un gris à peine plus soutenu.
1.2 — Mentions « ✓ Possible selon situation », tableau des actes kinésithérapie
Avant, jusqu'au 9 septembre 2026
✓ Possible selon situation
Vert #16A34A à 16 px gras sur fond blanc. Contraste 3,30:1 — insuffisant.Après, en ligne depuis le 9 septembre 2026
✓ Possible selon situation
Vert #15803D, même famille chromatique. Contraste 5,02:1 — conforme.
1.3 — Étiquette de tarif, page d'essai gratuit
Avant, jusqu'au 9 septembre 2026
Tarif annuel du Socle Télavie
Même vert #16A34A. Contraste 3,30:1 — insuffisant.Après, en ligne depuis le 9 septembre 2026
Tarif annuel du Socle Télavie
Vert #15803D. Contraste 5,02:1 — conforme.
Correctif commun aux deux cas : dans assets/profession.css, remplacer la variable de vert utilisée par .save et td.ok — #16A34A devient #15803D. Un seul changement couvre les deux emplacements.
1.4 — Pictogrammes de validation « ✓ », page d'accueil
Ce quatrième cas n'avait pas été relevé par le diagnostic initial : l'outil d'analyse automatique ne l'a pas signalé, et il a été trouvé en appliquant les correctifs, puis mesuré directement. Il concernait plusieurs dizaines de pictogrammes de la page d'accueil.
Avant, jusqu'au 9 septembre 2026
✓
Blanc sur vert #16A34A, à 13,6 px gras. Contraste 3,26:1 — insuffisant.Après, en ligne depuis le 9 septembre 2026
✓
Blanc sur vert #15803D. Contraste 5,02:1 — conforme.
Correctif : la variable --green est déclarée deux fois de façon indépendante — dans assets/profession.css et dans le style propre de index.html. Les deux ont été alignées sur #15803D, sans quoi la page d'accueil serait restée en l'état.
Récapitulatif des quatre contrastes corrigés, mesurés le 9 septembre 2026
Emplacement
Couleur actuelle
Actuel
Couleur proposée
Corrigé
Copyright des pages légales
#6B7499 à 60 % d'opacité
2,26:1
#6B7499 sans opacité
4,58:1
Tableau des actes kinésithérapie
#16A34A
3,30:1
#15803D
5,02:1
Étiquette de tarif, page d'essai
#16A34A
3,30:1
#15803D
5,02:1
Pictogrammes « ✓ » de la page d'accueil
blanc sur #16A34A
3,26:1
blanc sur #15803D
5,02:1
Ce tableau est lui-même un exemple de tableau conforme : il porte un titre (<caption>) et ses en-têtes déclarent leur portée (scope="col") — ce qui manque aux quatre tableaux du site relevés au point 6 ci-dessous.
2. Les sept autres défauts, et leur correction
Liens repérables seulement par la couleur critères 3.1 et 10.6
Dans un paragraphe, un lien qui ne se distingue que par sa couleur est invisible pour une personne qui ne perçoit pas les couleurs. Les liens en corps de texte des pages légales sont désormais soulignés.
Avant, jusqu'au 9 septembre 2026
Voir la section 6.3 des CGU pour le détail.
Le lien n'a pour seul indice que sa couleur bleue.Après, en ligne depuis le 9 septembre 2026
Voir la section 6.3 des CGU pour le détail.
Souligné : repérable sans percevoir la couleur.
Correctif :.content-card p a{text-decoration:underline} dans les pages légales.
Lien d'évitement critère 12.7
Aucune page du site n'en proposait : au clavier, la première tabulation tombait sur le logo, puis il fallait traverser toute la navigation, sur chaque page. Les 54 pages en disposent désormais.
Cette page-ci en a un. Placez le curseur en haut de la fenêtre, appuyez sur Tab : un bouton « Aller au contenu principal » apparaît en haut à gauche, invisible tant qu'il n'a pas le focus.
Correctif : un lien vers #contenu en première position dans le <body>, masqué hors focus par un positionnement hors écran — jamais par display:none, qui le rendrait aussi inatteignable au clavier.
Régions de la page non déclarées critères 9.2 et 12.6
Les mentions légales, les CGU et l'index légal n'avaient ni <header> ni <main> : une aide technique n'y trouvait aucun repère pour sauter directement au contenu. Les sept pages légales les déclarent désormais.
Cette page déclare <header>, <nav>, <main> et <footer> — c'est ce qui rend le lien d'évitement ci-dessus opérant.
Débordement horizontal sur mobile étroit critère 10.11
Sur quatre pages métier, une section entière était élargie au-delà de l'écran par un seul bouton. La règle white-space:nowrap empêche son intitulé de revenir à la ligne ; dans une grille en une colonne, sa largeur devient celle de toute la piste, et entraîne le titre et le texte voisins.
Avant, jusqu'au 9 septembre 2026
Voir toutes les fonctionnalités Télavie
Le bouton dépasse le cadre en pointillés, qui représente l'espace réellement disponible.Après, en ligne depuis le 9 septembre 2026
Voir toutes les fonctionnalités Télavie
L'intitulé revient à la ligne et tient dans l'espace disponible.
Une seconde cause, invisible sur l'échantillon initial, est apparue en auditant les 54 pages : des titres comportant un mot trop long pour tenir dans la largeur disponible. Sur /structure/maison-sante-msp.html, « pluriprofessionnelle » à 43 px occupait 403 px pour 292 disponibles. Corrigé par une césure automatique.
Correctif : sous 560 px, .btn{white-space:normal} — ou min-width:0 sur les pistes de grille. Deux pages supplémentaires débordent à cause de tableaux larges : les envelopper dans un conteneur overflow-x:auto, comme le tableau du point 1 de cette page.
Tableaux sans titre ni en-têtes associés critères 5.4 et 5.7
Les tableaux du site n'avaient pas de <caption>, et leurs <th> ne déclaraient pas de scope. L'audit complet des 54 pages en a dénombré 19, contre 4 sur l'échantillon initial — tous corrigés depuis. Lu cellule par cellule par une aide technique, un tel tableau perd le lien entre une valeur et son en-tête.
Correctif : ajouter <caption> et scope="col" (ou scope="row"). Voir le tableau récapitulatif du point 1.
Ouverture d'une nouvelle fenêtre sans avertissement critère 13.2
Des liens externes ouvraient un nouvel onglet sans le dire : une personne au lecteur d'écran perdait son repère de navigation sans comprendre pourquoi. L'audit complet en a dénombré 48, contre 10 sur l'échantillon initial — tous complétés depuis.
Correctif : compléter l'intitulé du lien, ou ajouter un aria-label qui le mentionne.
Icônes décoratives non neutralisées critère 1.2
Trois pictogrammes de la page d'accueil n'avaient ni aria-hidden="true" ni role="presentation" : un lecteur d'écran pouvait les annoncer comme « image », sans nom, au milieu d'une phrase. Corrigé.
Cette icône-ci porte aria-hidden="true" : elle est vue, jamais annoncée.
Correctif :aria-hidden="true" sur chaque <svg> purement décoratif.
3. Ce que cette page applique
Elle porte les huit correctifs, et respecte en outre les points déjà conformes sur le reste du site : langue déclarée, titre de page unique, hiérarchie de titres continue, alternative textuelle sur les images, indicateur de focus visible, zoom à 200 % sans perte, menu mobile utilisable au clavier.
Vous pouvez le vérifier vous-même : parcourez la page à la tabulation, réduisez la fenêtre à 320 px de large, ou zoomez à 200 %.