Accessibilité web : 7 pratiques pour un site ouvert à tous

L'accessibilité web, c'est s'assurer que votre site est utilisable par tout le monde y compris les personnes en situation de handicap visuel, moteur, auditif ou cognitif. Ça représente environ 15% de la population mondiale. C'est un marché, une responsabilité et, dans de nombreux pays, une obligation légale.

Mais l'accessibilité ne profite pas qu'aux personnes handicapées. Un site accessible est aussi plus facile à utiliser pour un utilisateur pressé sur son téléphone, pour quelqu'un qui navigue en plein soleil, ou pour une connexion lente. L'accessibilité, c'est de la bonne UX pour tous.

1. Des contrastes suffisants

Le texte doit être lisible. Ça paraît évident, mais le nombre de sites avec du gris clair sur fond blanc est effarant. Le ratio de contraste minimum recommandé par les WCAG est de 4.5:1 pour le texte courant et 3:1 pour les grands textes.

Testez vos contrastes avec des outils comme Contrast Checker ou directement dans les DevTools de Chrome.

2. Des textes alternatifs sur les images

L'attribut alt sur vos images permet aux lecteurs d'écran de décrire l'image aux utilisateurs non-voyants. C'est aussi un signal SEO. Décrivez ce que montre l'image, pas ce qu'elle est (« Photo d'équipe lors du lancement du projet X » plutôt que « image.jpg »).

Les images purement décoratives ? Laissez l'alt vide (alt="") pour que les lecteurs d'écran les ignorent.

3. Une navigation clavier fonctionnelle

Tous vos visiteurs n'utilisent pas une souris. Certains naviguent au clavier, d'autres avec des technologies d'assistance. Assurez-vous que chaque élément interactif (liens, boutons, formulaires) est accessible via la touche Tab et que l'état de focus est clairement visible.

4. Une structure HTML sémantique

Les balises HTML ont un sens : <nav> pour la navigation, <main> pour le contenu principal, <header>, <footer>, <article>… Utilisez-les correctement. Les technologies d'assistance s'appuient sur cette structure pour permettre une navigation efficace.

Et respectez la hiérarchie des titres : un seul H1, des H2 pour les sections principales, des H3 pour les sous-sections. Jamais de H3 directement après un H1.

5. Des formulaires étiquetés correctement

Chaque champ de formulaire doit avoir un <label> explicitement associé. Les placeholders seuls ne suffisent pas ils disparaissent quand l'utilisateur commence à taper, et les lecteurs d'écran ne les lisent pas toujours.

Ajoutez des messages d'erreur clairs et accessibles, pas juste un changement de couleur (les daltoniens ne le verront pas).

6. Du contenu multimédia accessible

Les vidéos doivent avoir des sous-titres. Les podcasts, des transcriptions. Ce n'est pas seulement une question d'accessibilité c'est aussi du contenu indexable par Google et consommable dans des environnements silencieux (transports, bureau).

7. Des animations respectueuses

Certaines personnes sont sensibles aux animations (vestibulaire). Respectez la media query prefers-reduced-motion pour désactiver ou réduire les animations quand l'utilisateur le demande dans ses préférences système.

Par où commencer ?

Lancez un audit d'accessibilité avec des outils comme WAVE, axe DevTools ou l'audit Lighthouse de Chrome. Corrigez les problèmes critiques en priorité (contrastes, labels, navigation clavier), puis progressez vers la conformité WCAG 2.1 AA.

L'accessibilité parfaite n'existe pas mais chaque amélioration compte. C'est un chemin, pas une destination.