L’accessibilité numérique consiste à concevoir des sites et applications utilisables par tous, y compris par les personnes en situation de handicap.
Elle permet par exemple de naviguer au clavier, de comprendre le contenu sans dépendre uniquement de la couleur ou du son, et d’utiliser le site avec des technologies d’assistance.
👉 En pratique, un site accessible est surtout un site mieux conçu pour tout le monde.
❌ 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
[/vc_column_text][/vc_column][/vc_row][vc_row type= »vc_default » css= ».vc_custom_1769034036538{padding-top: 50px !important;} »][vc_column][vc_column_text css= » »]
❌ 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 ? Très souvent, une liste ou un contenu statique est plus accessible… et plus efficace.
❌ 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
Une popup inaccessible peut bloquer l’accès au reste du 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é
Un mauvais alt est parfois pire que pas d’image du tout.
❌ 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
Une transcription améliore aussi le référencement… mais ce n’est pas la raison principale.
⭐ 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
Une information importante ne doit jamais dépendre uniquement de la couleur.
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
