6 erreurs d'accessibilité fréquentes sur les sites de studios de design

Publié le 21 septembre 2026

Les sites les plus soignés visuellement ne sont pas forcément les plus accessibles. Ce n'est pas une question de talent : certains réflexes de design, parfaitement défendables esthétiquement, font échouer des critères RGAA. Voici les six que l'on rencontre le plus souvent, et comment les corriger sans renoncer au style.

1. Le gris clair « premium » (RGAA 3.2)

Texte gris clair sur fond blanc, légendes pâles, mentions discrètes : c'est élégant, mais le RGAA exige un contraste d'au moins 4,5:1 pour le texte courant (3:1 pour les grands textes). Un gris #AAAAAA sur blanc n'atteint que 2,3:1.

Correction : assombrir la teinte jusqu'au seuil. Un gris #767676 passe tout juste (4,5:1), #6B6B6B donne de la marge (5,3:1). Visuellement, la différence est faible ; juridiquement, elle est décisive.

2. Le contour de focus supprimé (RGAA 10.7)

La règle outline: none fait disparaître le cadre qui indique où l'on se trouve quand on navigue au clavier. Pour quelqu'un qui ne peut pas utiliser de souris, le site devient inutilisable.

Correction : utiliser :focus-visible, qui n'affiche le contour que pour la navigation au clavier, et le dessiner aux couleurs de la marque (par exemple un contour de 2 px dans la couleur principale).

3. Les images sans alternative (RGAA 1.1)

Photos produits, pictogrammes, logos partenaires : sans attribut alt, un lecteur d'écran annonce simplement « image », ou lit le nom du fichier.

Correction : une alternative courte et utile pour les images qui portent une information (« Sac cabas en cuir camel »), et un alt="" vide pour les images purement décoratives, afin qu'elles soient ignorées.

4. Les liens « En savoir plus » (RGAA 6.1)

Trois cartes, trois liens « En savoir plus » : hors contexte, ces liens ne disent pas où ils mènent. Les utilisateurs de lecteurs d'écran naviguent souvent par la liste des liens de la page.

Correction : un intitulé explicite (« Découvrir nos coffrets de Noël »), ou un complément masqué visuellement mais lu par les lecteurs d'écran.

5. Les formulaires sans étiquette (RGAA 11.1)

Le champ où le texte d'exemple (placeholder) sert d'étiquette est très courant dans les designs épurés. Mais le placeholder disparaît à la saisie et n'est pas toujours lu comme une étiquette.

Correction : une vraie balise <label> associée à chaque champ. Elle peut être visuellement discrète, mais elle doit exister.

6. La hiérarchie de titres décorative (RGAA 9.1)

Choisir un <h3> parce que sa taille convient visuellement, sauter du <h1> au <h4>, ou styler un paragraphe en gros titre : la structure de la page devient illisible pour les technologies d'assistance (et moins claire pour Google).

Correction : choisir le niveau de titre selon la structure du contenu, et gérer l'apparence uniquement en CSS.

Le point commun : ça se corrige en CSS et en HTML

Aucune de ces corrections n'exige de refaire le design. Ce sont des ajustements de teinte, de balisage et de styles d'état. Le vrai risque, c'est qu'ils reviennent : un nouveau bloc, un plugin, une page ajoutée par le client, et le problème réapparaît.

C'est pour cela qu'AccèsVeille contrôle chaque semaine les sites de votre agence et vous signale la moindre régression, avec des explications pensées pour les designers, pas seulement pour les développeurs.