6 exemples de sites web accessibles pour vous inspirer
En Bref : L'essentiel à retenir
- La BBC excelle en accessibilité clavier avec un focus visible sur tous les éléments et une navigation complète sans souris.
- Le NHS britannique combine hiérarchie claire, typographie lisible et navigation prévisible pour un accès rapide à l'information médicale.
- Patagonia prouve qu'un site e-commerce peut être à la fois beau et accessible avec des filtres, menus et CTAs navigables au clavier.
- Le W3C WAI fournit une démonstration avant/après montrant concrètement l'impact des corrections d'accessibilité.
L'accessibilité web n'est pas l'ennemie du design. Les meilleurs sites prouvent qu'une interface peut être à la fois esthétique et utilisable par tous. Voici 6 exemples concrets qui appliquent les standards WCAG avec brio.
1. BBC News : l'accessibilité clavier exemplaire
Le site de la BBC est une référence mondiale en matière d'accessibilité. Avec des millions de visiteurs quotidiens, chaque détail compte.
Ce qui fonctionne bien
Navigation clavier complète : Appuyez sur Tab et naviguez l'intégralité du site. Chaque élément interactif reçoit un focus visible et distinctif.
Skip links efficaces : Le premier Tab révèle des liens d'évitement vers le contenu principal, la navigation et la recherche.
Contraste élevé : Les textes noirs sur fond blanc dépassent largement le ratio 4.5:1 exigé par WCAG.
Titres structurés : La hiérarchie des titres (h1 à h6) forme un plan de page logique, navigable par les lecteurs d'écran.
[!TIP] Testez la navigation clavier de votre propre site : débranchez votre souris et essayez d'accomplir une tâche courante.
Techniques à retenir
<!-- Focus visible personnalisé -->
<style>
a:focus, button:focus {
outline: 3px solid #007bff;
outline-offset: 2px;
}
</style>
2. NHS (Service national de santé britannique)
Le site du NHS gère un volume massif d'informations médicales. L'accessibilité y est critique : les personnes malades ou en situation de handicap doivent pouvoir trouver l'information rapidement.
Ce qui fonctionne bien
Langage clair : Les contenus sont rédigés pour un niveau de lecture grand public, évitant le jargon médical quand c'est possible.
Contrastes optimisés : Le bleu NHS sur fond blanc offre un ratio de 9.66:1, bien au-delà du minimum requis.
Navigation prévisible : La structure reste cohérente sur toutes les pages. Les utilisateurs savent où chercher.
Audits réguliers : Le NHS effectue des tests d'accessibilité tous les six mois avec des utilisateurs réels.
Engagements publics
Le NHS vise la conformité WCAG 2.2 niveau AAA pour certains critères et publie une déclaration d'accessibilité détaillée.
Consultez notre guide sur les déclarations d'accessibilité pour créer la vôtre.
3. Patagonia : e-commerce accessible
Patagonia démontre qu'un site de vente en ligne peut conjuguer esthétique et accessibilité. L'expérience shopping est fluide quel que soit le mode d'interaction.
Ce qui fonctionne bien
Catalogue navigable au clavier : filtres, grilles de produits et boutons d'ajout au panier sont tous accessibles sans souris.
Images avec alt pertinents : Chaque photo produit décrit l'article, pas son apparence ("Veste imperméable Torrentshell, bleue").
Formulaires bien labelisés : Tailles, couleurs et quantités ont des labels explicites et des messages d'erreur clairs.
Respect des préférences système : Le site détecte prefers-reduced-motion et désactive les animations pour les utilisateurs concernés.
Leçon e-commerce
L'accessibilité élargit votre audience. Une personne aveugle qui ne peut pas utiliser votre site est un client perdu.
4. W3C WAI Before and After Demo
Le W3C a créé une ressource pédagogique unique : un même site en version inaccessible ("before") et accessible ("after").
Pourquoi c'est précieux
Cette démonstration montre concrètement :
- Les erreurs courantes (formulaires sans labels, images sans alt, contrastes insuffisants)
- Les corrections correspondantes
- L'impact sur l'expérience utilisateur
Accès : w3.org/WAI/demos/bad/
[!NOTE] C'est un excellent outil de formation pour sensibiliser vos équipes aux enjeux de l'accessibilité.
Ce que vous apprendrez
- Comment un manque de structure affecte la navigation par lecteur d'écran
- Pourquoi les placeholder ne remplacent pas les labels
- L'importance des alternatives textuelles contextuelles
5. Airbnb : accessibilité à grande échelle
Airbnb gère des millions d'annonces dans toutes les langues. Son engagement accessibilité est documenté publiquement.
Ce qui fonctionne bien
Filtres de recherche accessibles : Les options d'accessibilité du logement (entrée sans marche, douche accessible) sont intégrées aux filtres.
Tests avec technologies d'assistance : L'équipe teste avec VoiceOver sur macOS et NVDA sur Windows.
Design system inclusif : Les composants UI intègrent l'accessibilité dès leur conception, pas en rattrapage.
Documentation publique : Airbnb publie ses objectifs WCAG 2.1 AA et ses progrès.
Leçon plateforme
Sur une marketplace, l'accessibilité concerne aussi le contenu généré par les utilisateurs. Airbnb guide les hôtes vers des descriptions accessibles.
6. Le design System de l'État français (DSFR)
En France, le Système de design de l'État fournit des composants accessibles prêts à l'emploi pour les sites publics.
Ce qui fonctionne bien
Conformité RGAA native : Chaque composant (boutons, formulaires, navigation) respecte le RGAA 4.1.
Documentation exhaustive : Chaque composant s'accompagne de consignes d'accessibilité et d'exemples de code.
Open source : Le code est disponible et auditable, favorisant l'amélioration continue.
Tests automatisés : Des suites de tests vérifient la non-régression accessibilité.
Accès : systeme-de-design.gouv.fr
Leçon secteur public
Les administrations françaises ont l'obligation légale d'utiliser le DSFR. C'est une garantie de base pour les citoyens.
Consultez notre article sur les obligations RGAA pour en savoir plus.
Caractéristiques communes des sites accessibles
Ces six sites partagent plusieurs traits :
| Caractéristique | Impact |
|---|---|
| Navigation clavier complète | Utilisateurs moteurs |
| Contrastes élevés | Malvoyants, contextes lumineux |
| Titres hiérarchisés | Navigation lecteur d'écran |
| Langage clair | Troubles cognitifs, non-natifs |
| Focus visible | Tous les utilisateurs clavier |
| Déclaration d'accessibilité | Transparence, confiance |
Comment évaluer l'accessibilité d'un site
Inspirez-vous de ces exemples pour auditer vos propres sites :
- Test clavier : Naviguez sans souris pendant 5 minutes
- Test lecteur d'écran : Activez VoiceOver ou NVDA
- Test contrastes : Utilisez un vérificateur de ratio
- Test structure : Examinez le plan des titres
- Test automatisé : Lancez un audit avec RGAA Checker
[!TIP] Aucun outil automatisé ne détecte 100% des problèmes. Combinez tests automatiques et manuels pour une évaluation complète.
Ressources pour aller plus loin
Conclusion
L'accessibilité n'est pas une contrainte, c'est une opportunité de design. Ces six exemples prouvent qu'un site peut être beau, fonctionnel et accessible. Inspirez-vous de leurs pratiques et testez régulièrement vos propres interfaces.
Évaluez l'accessibilité de votre site avec RGAA Checker : obtenez un rapport détaillé sur les 106 critères du RGAA en quelques secondes.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.