5 erreurs qui ruinent l’accessibilité numérique de ton site

❌ 1. Impossible de naviguer au clavier

Si ton site ne peut pas être utilisé uniquement avec le clavier, il n’est pas accessible.

Navigation au clavier, ça veut dire :

• se déplacer avec TAB
• revenir avec SHIFT + TAB
• activer un bouton ou un lien avec Entrée ou Espace
• voir clairement où se trouve le focus

Quand ce n’est pas le cas, le site devient inutilisable pour :

• les personnes malvoyantes
• les personnes avec un handicap moteur
• les utilisateurs de lecteurs d’écran
• et même les utilisateurs habitués aux raccourcis clavier

👉 Comment vérifier ?

Pose ta souris → Appuie sur TAB → Parcours toute ta page

Pose-toi ces questions :

• Est-ce que j’accède à tous les éléments interactifs ?
• Est-ce que je vois où je suis ?
• Est-ce que je peux tout activer sans souris ?

👉 Comment corriger ?

• Ne jamais supprimer le focus CSS sans alternative visible
• Utiliser des éléments HTML natifs (button, a, input) plutôt que des div cliquables
• Vérifier l’ordre de tabulation (logique et cohérent)
• Tester régulièrement… au clavier

❌ 2. Les sliders/carrousels qui défilent automatiquement

Ils posent déjà problème en UX, mais en accessibilité, c’est souvent une catastrophe.

Problèmes courants :

• le contenu disparaît avant d’avoir été lu
• impossible de mettre en pause
• navigation clavier inexistante
• surcharge cognitive

👉 Comment vérifier ?

• Le slider démarre-t-il automatiquement ?
• Peut-on le mettre en pause ?
• Est-il utilisable au clavier ?
• Le contenu est-il accessible sans attendre le défilement ?

👉 Comment corriger le slider ?

• pas de défilement automatique
• boutons accessibles au clavier
• contrôle explicite de la lecture / pause

Se demander honnêtement : est-ce que ce slider apporte une vraie valeur ?

❌ 3. Les popups intrusives et incontrôlables

Popups, modales, bandeaux… Ils peuvent être utiles, mais mal implémentés, ils deviennent des murs invisibles.

Problèmes fréquents :

• le focus n’est pas déplacé dans la popup
• impossible de la fermer au clavier
• focus “piégé” à l’intérieur
• ouverture sans annonce pour les lecteurs d’écran

👉 Comment vérifier ?

Ouvre la popup au clavier :

• Le focus arrive-t-il dedans automatiquement ?
• Peux-tu la fermer avec ESC ou TAB ?
• Le focus revient-il à l’élément d’origine après fermeture ?

👉 Comment corriger ?

• Gérer correctement le focus (entrée et sortie)
• Ajouter une fermeture accessible (pas juste une petite croix)
• Permettre la fermeture via ESC
• Éviter les popups non sollicitées dès l’arrivée sur le site

❌ 4. Mettre des alt partout, même sur les images décoratives

Erreur très répandue : penser que l’attribut alt sert uniquement au SEO.

En accessibilité :

• une image porteuse d’information → alt pertinent
• une image décorative → alt="" (vide)

Sinon, les lecteurs d’écran annoncent : “image”, “photo”, “illustration”…

👉 Comment vérifier ?

Passe ton site avec un lecteur d’écran (NVDA sur Windows par exemple) → Écoute la lecture des images → Est-ce utile ? Ou juste du bruit ?

👉 Comment corriger ?

Identifier le rôle de chaque image :

• Pour les images décoratives : <img src="..." alt="">
• Pour les images informatives : décrire le sens, pas l’apparence
• Arrêter de penser SEO avant accessibilité

❌ 5. Pas de sous-titres ou de transcription pour les vidéos

Une vidéo sans alternative, c’est de l’information verrouillée. Sans sous-titres ou transcription, tu exclues :

• les personnes sourdes ou malentendantes
• les utilisateurs dans un environnement bruyant
• ceux qui ne peuvent pas activer le son
• une partie de ton audience tout court

👉 Comment vérifier ?

• La vidéo a-t-elle des sous-titres ?
• Sont-ils activables facilement ?
• Existe-t-il une transcription texte ?

👉 Comment corriger ?

• Ajouter des sous-titres synchronisés (ne pas se contenter des sous-titres automatiques)
• Fournir une transcription complète sous la vidéo (par exemple disponible via un accordéon pour ne pas surcharger la page pour ceux n’en ayant pas besoin)
• Penser accessibilité dès la création du contenu

⭐ Bonus – L’élément actif du menu indiqué uniquement par la couleur

Changer la couleur de l’item actif dans un menu, ce n’est pas suffisant car tout le monde ne perçoit pas les couleurs de la même manière :

• daltonisme
• basse vision
• écrans de mauvaise qualité
• mode sombre / fort contraste
• fatigue visuelle

Si l’information “tu es ici” repose uniquement sur la couleur, elle peut tout simplement disparaître.

👉 Comment vérifier ?

Pose-toi ces questions simples :

• Si je passe le site en niveaux de gris, est-ce que je vois encore l’élément actif ?
• Si je ne distingue pas bien les couleurs, est-ce que je comprends où je suis ?
• Est-ce que l’item actif est identifiable sans comparer les couleurs ?

Astuce rapide : active un filtre “no color” ou “grayscale” dans les devtools ou ton OS.

👉 Comment corriger ?

Ajouter au moins un autre indicateur visuel, par exemple :

• un soulignement
• un trait vertical ou horizontal
• une icône
• un changement de forme ou de fond
• une graisse de texte différente

Exemple simple et efficace : couleur différente + trait souligné sous l’élément actif

Conclusion

L’accessibilité, ce n’est pas une checklist obscure ni une contrainte technique insurmontable.
C’est souvent :

• du bon sens
• des choix de conception
• un peu d’attention en plus

Corriger ces erreurs améliore :

• l’expérience de tous les utilisateurs
• la qualité globale du site
• la robustesse de ton interface

Et surtout :
👉 un site accessible est un site mieux conçu