Accessibilite web : le guide pratique pour rendre votre site utilisable par tous

Introduction

Selon l'Organisation mondiale de la sante, environ 16 % de la population mondiale vit avec un handicap significatif. En France, cela represente plus de 12 millions de personnes. L'accessibilite web consiste a concevoir des sites utilisables par tous, quelles que soient les capacites physiques, sensorielles ou cognitives de l'utilisateur.

Au-dela de l'ethique, c'est aussi une obligation legale en France depuis la loi du 11 fevrier 2005. Le Referentiel general d'amelioration de l'accessibilite (RGAA), dans sa version 4.1 publiee en 2021, fixe les regles applicables aux sites publics et progressivement aux sites prives.

Les WCAG : le standard international

Les Web Content Accessibility Guidelines (WCAG) sont publiees par le W3C. La version actuelle est WCAG 2.2, publiee en octobre 2023. Elles definissent trois niveaux de conformite :

• Niveau A : le minimum absolu (exemple : toute image a un texte alternatif)
• Niveau AA : le standard vise par la plupart des legislations (contraste suffisant, navigation au clavier)
• Niveau AAA : le niveau le plus exigeant (langue des signes pour les videos, par exemple)

Les WCAG reposent sur quatre principes fondamentaux, resumes par l'acronyme POUR :

• Percevable : l'information doit etre presentee de maniere perceptible
• Operable : l'interface doit etre navigable par tous les moyens
• Understandable (Comprehensible) : le contenu doit etre comprehensible
• Robust : le contenu doit etre interpretable par les technologies d'assistance

Les handicaps et le web

Handicaps visuels

Les personnes aveugles utilisent des lecteurs d'ecran comme NVDA (gratuit, Windows), VoiceOver (integre a macOS/iOS) ou JAWS. Ces logiciels lisent le contenu de la page a voix haute en suivant le code HTML.

Pour que votre site soit compatible :

• Structurez vos pages avec des balises semantiques (<header>, <nav>, <main>, <article>)
• Ajoutez un attribut alt descriptif a chaque image
• Utilisez des niveaux de titres logiques (h1, h2, h3 sans sauter de niveau)
• Assurez un ratio de contraste d'au moins 4,5:1 pour le texte normal (3:1 pour le texte agrandi)

Handicaps moteurs

Certaines personnes ne peuvent pas utiliser une souris. Elles naviguent au clavier (touche Tab, Entree, Echap) ou avec des peripheriques specialises.

Bonnes pratiques :

• Tous les elements interactifs doivent etre focusables et avoir un indicateur de focus visible
• L'ordre de tabulation doit etre logique (suivre l'ordre visuel)
• Ne jamais supprimer l'outline CSS sans le remplacer par un indicateur equivalent

Handicaps cognitifs

Les troubles de l'attention, la dyslexie ou les deficiences intellectuelles concernent un large public :

• Utilisez un langage simple et des phrases courtes
• Privilegiez les mises en page claires avec suffisamment d'espace blanc
• Evitez les animations automatiques qui ne peuvent pas etre arretees

Les erreurs les plus frequentes

Selon le rapport WebAIM Million de 2024, les 6 erreurs d'accessibilite les plus courantes sur un echantillon d'un million de pages d'accueil sont :

1. Contraste de texte insuffisant (81 % des pages)
2. Images sans texte alternatif (54 %)
3. Liens vides (sans texte accessible) (49 %)
4. Labels de formulaire manquants (45 %)
5. Boutons vides (28 %)
6. Langue de la page non specifiee (18 %)

Tester l'accessibilite de son site

Outils automatises

• axe DevTools (extension navigateur) : detecte les problemes les plus courants
• Lighthouse (integre a Chrome DevTools) : inclut un audit d'accessibilite
• WAVE (wave.webaim.org) : visualise les erreurs directement sur la page

Tests manuels indispensables

Les outils automatises ne detectent qu'environ 30 a 40 % des problemes d'accessibilite. Les tests manuels sont incontournables :

• Naviguer sur votre site uniquement au clavier (Tab, Shift+Tab, Entree)
• Tester avec un lecteur d'ecran (VoiceOver sur Mac : Cmd+F5 pour l'activer)
• Verifier le zoom a 200 % : le contenu doit rester lisible sans defilement horizontal

L'accessibilite en pratique : exemples de code

Un bouton accessible

<!-- Mauvais -->
<div onclick="submit()">Envoyer</div>

<!-- Bon -->
<button type="submit">Envoyer le formulaire</button>

Une image informative

<!-- Mauvais -->
<img src="graphique.png">

<!-- Bon -->
<img src="graphique.png" alt="Graphique montrant une hausse de 25 % du trafic entre janvier et mars 2026">

Un lien explicite

<!-- Mauvais -->
<a href="/rapport">Cliquez ici</a>

<!-- Bon -->
<a href="/rapport">Telecharger le rapport annuel 2025 (PDF, 2 Mo)</a>

Conclusion

L'accessibilite web n'est pas un surcout : c'est un investissement dans la qualite. Un site accessible est un site mieux structure, mieux reference et plus facile a maintenir. Commencez par les bases — contraste, textes alternatifs, navigation clavier — et progressez incrementalement vers une conformite WCAG AA.