Accessibilité web

L'accessibilité web permet à tous les utilisateurs, y compris ceux en situation de handicap, de naviguer sur le web sans problème. Pourtant, de nombreux sites restent aujourd’hui difficilement utilisables pour ces utilisateurs.

L’accessibilité ne devrait pas être une option, mais une priorité dès la conception. Au-delà des obligations légales, elle contribue à une meilleure expérience pour tous les internautes, quels que soient leurs besoins ou leurs contraintes.

Dans cet article, nous verrons les différents types de handicap, les normes à connaître et les bonnes pratiques à adopter pour créer un site réellement accessible.

Les différents types de handicap

L’accessibilité web vise à prendre en compte les besoins de tous les utilisateurs, et notamment ceux en situation de handicap.

Il existe plusieurs types de handicap, chacun pouvant impacter la manière d’interagir avec un site internet :

• Handicaps visuels : cécité, basse vision, daltonisme. Les personnes concernées utilisent souvent des lecteurs d’écran ou ont besoin d’un contraste élevé et d’un texte lisible
• Handicaps auditifs : surdité ou malentendance. L’absence de sous-titres ou de transcription rend le contenu audio ou vidéo difficilement accessible
• Handicaps moteurs : difficultés à utiliser une souris ou un clavier classique. La navigation doit pouvoir se faire uniquement au clavier ou via des dispositifs d’assistance
• Handicap psychique : troubles anxieux, troubles de l’humeur, schizophrénie… Ces situations peuvent rendre difficile l’utilisation d’interfaces trop complexes ou peu prévisibles
• Maladies invalidantes : certaines maladies chroniques (comme la sclérose en plaques ou la maladie de Parkinson) peuvent entraîner de la fatigue, des douleurs ou des difficultés cognitives ponctuelles. Une interface claire et flexible est donc essentielle
• Déficience intellectuelle : elle peut affecter la compréhension, la mémoire ou la concentration. Un langage simple, une navigation intuitive et des contenus bien structurés sont ici indispensables
• Handicaps temporaires : fatigue visuelle, bras cassé, environnement bruyant... L’accessibilité bénéficie aussi à ces situations passagères

Les normes WCAG : le socle de l’accessibilité web

Les WCAG (Web Content Accessibility Guidelines) définit les règles à suivre pour rendre les sites web accessibles à tous, en prenant en compte les aspects physiques, psychologiques et techniques des utilisateurs.

Les règles sont organisées en 4 principes :

• Perceptible : le contenu doit être visible ou audible par tous
• Utilisable : les interactions doivent être simples à réaliser
• Compréhensible : le contenu doit être clair et prévisible
• Robuste : le site doit fonctionner avec les technologies d’assistance

Les WCAG sont déclinées en niveaux (A, AA, AAA), le niveau AA étant le plus souvent exigé (par exemple pour les sites publics en France).

Comprendre ARIA (Accessible Rich Internet Applications)

Le HTML sémantique est la base de l’accessibilité. Mais dans certains cas, il est nécessaire d’ajouter des attributs ARIA pour améliorer l’accessibilité des pages web et la compréhension du contenu par les technologies d’assistance (lecteurs d’écran, commandes vocales …).

Par exemple :

• aria-label : fournit un nom à un élément interactif qui n’a pas de texte visible
• aria-hidden='true' : masque un élément aux lecteurs d’écran mais pas visuellement
• role='dialog' ou role='tablist' : précise le rôle d’un élément dans la structure de la page et s’utilise uniquement quand il n’y a pas de balises HTML correspondantes

⚠️ ARIA ne remplace pas le HTML natif : il doit être utilisé avec modération, uniquement quand les balises HTML natives ne suffisent pas.

Les bonnes pratiques pour un site accessible

Contraste des couleurs

Assurez-vous que le texte soit suffisamment lisible par rapport à l’arrière-plan pour les malvoyants.

Le contraste minimum recommandé est de 4.5:1 pour un texte standard.

Des outils comme Adobe Color ou WebAIM Contrast Checker peuvent vous aider.

Utiliser des balises HTML sémantiques

Les balises sémantiques donnent une indication sur le contenu et structurent la page web.

Il faut utiliser les bonnes balises (<header>, <nav>, <main>, <section>, <article>, <footer> …) pour aider les lecteurs d’écran à comprendre la logique de la page.

Structurer le contenu avec des titres logiques

Utilisez une hiérarchie claire : un seul H1 par page, puis des H2, éventuellement des H3.

Ne sautez pas de niveaux (évitez de passer de H2 à H4 directement).

Permettre la navigation au clavier

Tout élément interactif (liens, boutons, menus) doit être accessible sans souris, uniquement avec le clavier.

C’est très important pour les utilisateurs ayant une mobilité réduite qui ne peuvent pas utiliser une souris et les malvoyants utilisant un lecteur d’écran pilotable exclusivement par un clavier.

Pensez aussi à bien gérer l’ordre des focus et la visibilité du focus (:focus-visible).

⚠️ il ne faut surtout pas retirer la propriété outline des éléments interactifs. Cette propriété permet d’indiquer où se situe le focus. Si le style par défaut ne vous plaît pas, vous pouvez le changer.

Ajouter un texte alternatif aux images

Chaque image informative doit avoir un attribut alt décrivant brièvement son contenu. Ce texte doit être précis, concis et unique pour chaque image.

Le texte alternatif permet d’indiquer au navigateur la description de l’image :

• à afficher si l’image n’apparaît pas au chargement de la page
• à lire par les lecteurs d’écran pour les utilisateurs malvoyants

Pour les images décoratives, utilisez alt='' pour qu’elles soient ignorées par les lecteurs d’écran.

Intégrer des sous-titres aux vidéos

Il faut rajouter des sous-titres et des légendes pour rendre la vidéo :

• accessible aux sourds et aux malentendants
• compréhensible sans le son pour être lue dans un lieu public
• accessible à des utilisateurs du monde entier, si les sous-titres sont traduits en langues étrangères

Pour ajouter des sous-titres, il faut utiliser un fichier WebVTT qui est un fichier texte avec l’extension vtt. Ce fichier est ensuite associé à la vidéo.

Conclusion

Rendre un site web accessible, ce n’est pas seulement cocher des cases techniques : c’est permettre à chacun de naviguer, comprendre et interagir avec le contenu sans obstacle. En tenant compte des différents types de handicaps, en appliquant les bonnes pratiques et en respectant les normes comme les WCAG, on construit un web plus inclusif, plus éthique et souvent plus agréable pour tous.

L’accessibilité web peut sembler technique mais vous n’êtes pas seul pour la mettre en place. Que ce soit pour un audit, une refonte ou des ajustements ciblés, je peux vous accompagner dans cette démarche essentielle.

Vous ne savez pas par où commencer ou vous avez un doute sur l’accessibilité de votre site actuel ?

Je vous propose une première consultation gratuite pour faire le point et identifier les améliorations possibles.

👉 Me contacter