Un client vendant du matériel de randonnée en ligne affichait, sur chaque fiche produit, une note moyenne sous forme de cinq étoiles, dont une partie apparaissait dorée proportionnellement à la note obtenue, le reste restant gris clair. Ce composant, visuellement soigné, reposait entièrement sur des propriétés CSS de dégradé appliquées à une police d’icônes, sans aucun texte présent dans le document HTML pour exprimer la note réelle.
Lors d’un audit de routine, notre relecture au lecteur d’écran NVDA a révélé que ce composant, omniprésent sur le catalogue entier, était purement et simplement invisible pour un visiteur non-voyant : aucune annonce, aucune valeur, rien.
Symptôme : un silence total sur un composant visuellement riche
En activant NVDA et en parcourant une fiche produit avec la touche Tab puis avec les flèches en mode navigation, le lecteur d’écran passait directement du nom du produit à son prix, sans jamais mentionner la note ni le nombre d’avis, alors que ce bloc occupait une place visuelle importante juste sous le titre du produit.
Diagnostic : un rendu entièrement produit par CSS
<div class="etoiles" style="--note: 4.6;"></div>
Le composant reposait sur une variable CSS personnalisée, --note, combinée à la propriété background: linear-gradient() appliquée sur une police d’icônes en pseudo-élément ::before, pour créer l’effet visuel de remplissage progressif des étoiles. Le <div> concerné ne contenait strictement aucun texte, ni attribut ARIA, ni attribut alternatif d’aucune sorte. Un lecteur d’écran, qui construit son rendu à partir de l’arbre d’accessibilité du document, n’avait tout simplement aucune information textuelle à annoncer sur ce nœud vide de contenu.
.etoiles::before {
content: "★★★★★";
background: linear-gradient(90deg, gold calc(var(--note) / 5 * 100%), lightgray 0);
-webkit-background-clip: text;
color: transparent;
}Correctif : un texte réel, masqué visuellement si besoin
La correction ne nécessitait pas d’abandonner l’effet visuel, seulement de lui ajouter un support textuel réel dans le HTML, via aria-label posé directement sur le conteneur, décrivant la note en langage clair :
<div class="etoiles" style="--note: 4.6;" role="img" aria-label="Note : 4,6 sur 5, basée sur 213 avis"></div>L’ajout de role="img" indique aux technologies d’assistance de traiter ce conteneur comme une unité visuelle unique portant un texte alternatif global, plutôt que de tenter d’analyser son contenu interne, qui reste de toute façon purement décoratif et généré en CSS. Le pseudo-élément visuel n’a nécessité aucune modification.
Variante retenue pour les nouvelles fiches produit
Pour les développements ultérieurs, nous avons préféré une seconde approche, plus robuste encore, affichant le texte réel dans le document plutôt que dans un seul attribut, avec une classe utilitaire masquant visuellement ce texte sans le retirer du flux accessible :
<div class="etoiles" style="--note: 4.6;">
<span class="visible-lecteur-ecran">Note : 4,6 sur 5, basée sur 213 avis</span>
</div>
<style>
.visible-lecteur-ecran {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
</style>Cette variante présente l’avantage de rester lisible même si un futur développeur retire par erreur l’attribut role="img" lors d’une refonte du composant, puisque le texte reste présent dans le DOM indépendamment de cet attribut.
Prévention pour les futurs composants décoratifs
Ce cas illustre un principe plus large : tout composant visuel construit uniquement en CSS, sans aucun texte réel dans le document, doit systématiquement se poser la question de ce qu’un lecteur d’écran en perçoit. Un dégradé, une police d’icônes ou une animation ne portent par eux-mêmes aucune information exploitable pour les technologies d’assistance, contrairement à ce que leur richesse visuelle pourrait laisser croire à une équipe qui ne teste jamais autrement qu’à l’œil.
- Tester chaque nouveau composant décoratif avec un lecteur d’écran avant mise en production
- Vérifier systématiquement qu’une information exprimée visuellement existe aussi sous forme de texte réel
- Ajouter cette vérification à la check-list de recette des fiches produit
Un dégradé CSS peut être visuellement parfait et rester, malgré tout, un trou noir total pour n’importe quelle technologie d’assistance qui ne lit que ce que le document contient réellement.
En résumé
La correction de ce composant, présent sur plusieurs milliers de fiches produit générées dynamiquement depuis une seule fonction PHP de thème, a suffi à rendre visible pour un lecteur d’écran une information jusqu’alors totalement absente de l’expérience non-voyante du site, sans le moindre changement de rendu visuel pour les autres visiteurs.
