12 Exemples Remarquables de Sites Web Accessibles Qui Établissent de Nouvelles Normes

Chez DreamHost, nous pensons que tout le monde devrait pouvoir utiliser n’importe quel site web sur internet, indépendamment de toute incapacité ou handicap. Cependant, bien que nous nous soucions de l’accessibilité web, nous comprenons également que concevoir un site web à la fois accessible et visuellement attrayant peut être un défi.

La bonne nouvelle, c’est que tu peux concevoir des sites web accessibles sans sacrifier l’impact visuel. En fait, certains des sites les plus impressionnants sont conçus spécifiquement pour être plus accessibles aux personnes en situation de handicap — et nous pourrions tous apprendre une ou deux choses d’eux.

Dans cet article, nous commencerons par te montrer à quoi ressemble une forte accessibilité web, et aborderons quelques normes d’accessibilité web conçues pour aider à démocratiser l’accès aux sites web. Ensuite, nous te montrerons 12 des meilleurs exemples d’accessibilité web sur internet, incluant certains sites populaires qui se sont engagés en faveur de l’accessibilité, et voir ce qu’ils peuvent nous apprendre.

Commencez maintenant !

À Quoi Ressemble Une Excellente Accessibilité Web

Selon La Banque Mondiale, environ un milliard de personnes, soit 15 % de la population mondiale, ont une forme de handicap. Celles-ci peuvent inclure :

• Handicaps visuels : Certains utilisateurs ont un handicap visuel qui limite leur capacité à voir clairement ou à percevoir les contrastes de couleur. Une variété de personnes peuvent appartenir à cette catégorie, y compris les utilisateurs aveugles ou ceux atteints de daltonisme. Pour les utilisateurs ayant des handicaps visuels, tu pourrais utiliser des descriptions audio ou des combinaisons de couleurs accessibles (par exemple, éviter d’utiliser du texte foncé sur des couleurs de fond sombres).
• Handicaps auditifs : Les utilisateurs avec des handicaps auditifs peuvent inclure des personnes sourdes ou malentendantes (HoH). Les sous-titres pour le contenu audio peuvent offrir à ces utilisateurs une expérience plus accessible.
• Handicaps physiques : Certaines personnes ont des handicaps de mobilité qui peuvent affecter leur dextérité et leur capacité à effectuer des mouvements précis, rendant parfois difficile l’utilisation d’une souris. Ceux ayant des handicaps physiques peuvent être des utilisateurs de technologies d’assistance. Assure-toi que ton site est correctement codé pour les dispositifs d’assistance afin de fournir un contenu accessible aux utilisateurs ayant des handicaps physiques.
• Handicaps cognitifs : Certains utilisateurs peuvent avoir des déficiences cognitives comme la dyslexie, la démence ou un trouble du traitement auditif. Tu pourrais envisager d’utiliser une police spécifique, comme Dyslexie. Tu devrais également t’assurer que tout contenu audio dispose d’un transcript disponible pour ceux ayant des troubles du traitement auditif.

Il est important de garder à l’esprit toutes ces différentes capacités lors de la création de ton site web pour s’assurer qu’il n’y ait pas de barrières pour les utilisateurs handicapés. Pour aider les concepteurs web dans cette tâche, le W3C a développé un ensemble de Directives pour l’accessibilité des contenus web (WCAG).

Une accessibilité web solide signifie adhérer à ces directives et suivre attentivement les quatre principes directeurs du design accessible. Ces principes directeurs stipulent que tous les sites web doivent être :

1. Perceptible
2. Utilisable
3. Compréhensible
4. Robuste

Assurer que ton site web est « opérationnel » peut signifier mettre en place une navigation adaptée au clavier pour les personnes qui ne peuvent pas utiliser de souris. « Perceptible » pourrait signifier utiliser des couleurs à fort contraste pour les personnes ayant des déficiences visuelles.

Prêt à voir à quoi ressemblent ces principes en pratique ? Ci-dessous, nous avons 12 exemples de sites web qui appliquent correctement le design accessible.

12 Excellents Exemples d’Accessibilité Web Pour T’Inspirer

Ici, tu trouveras certains de nos exemples préférés d’accessibilité web. Ces 12 sites web sont des exemples de conception web accessible à son meilleur.

1. Scope

Scope est une association pour l’égalité des personnes handicapées basée en Angleterre et au Pays de Galles, dédiée à la création d’une société plus juste et égalitaire. En tant que champion de l’égalité des personnes handicapées, tu t’attendrais à ce que le site web de cette organisation soit aussi accessible que possible — et c’est le cas.

Non seulement il adhère pleinement aux directives WCAG 2.0 et WCAG 2.1, mais le site est également personnalisable pour les utilisateurs individuels. Par exemple, tu peux changer les couleurs du site, augmenter la taille du texte, ou même activer la narration de texte pour faire lire le contenu à haute voix.

Si tu regardes la section en haut à gauche de la page d’accueil, tu verras un onglet Accessibilité. Clique dessus, et le site te dirigera vers sa page d’accessibilité, qui inclut des instructions sur comment adapter l’expérience à tes besoins, des liens vers des technologies d’assistance, et une liste des problèmes d’accessibilité connus sur lesquels nous travaillons.

Scope utilise des phrases courtes et des polices grandes et épurées sur tout le site pour une lisibilité maximale. De plus, le site est entièrement compatible avec les logiciels de lecture d’écran.

Bien que déjà un excellent exemple d’accessibilité des sites web, l’équipe de Scope continue de faire des améliorations. Tous les quatre mois, ils testent le site web pour l’accessibilité et font des mises à jour là où c’est nécessaire.

2. Université Harvard

L’éducation à Harvard n’est pas son seul point fort. Le site web de l’université de renommée mondiale se distingue également par son accessibilité, offrant une armée d’outils de lecture, des sous-titres vidéo multilingues, et des agencements de couleurs soigneusement sélectionnés qui répondent aux besoins des visiteurs daltoniens.

Le menu de navigation de Harvard obtient également des points pour son accessibilité. Il est simple mais efficace, avec un texte grand et facile à lire dans une couleur à fort contraste. De plus, il est clair et facile à trouver.

3. Paralympic.org

Paralympic.org est le site officiel du Comité International Paralympique (IPC). L’IPC est un puissant défenseur de l’inclusion sociale, et son site web en est la preuve.

Il intègre une navigation par onglets adaptée aux claviers et un bouton flèche instantané « remonter en haut » pour faciliter la navigation sur la page. Les images et les vidéos sont grandes et bien visibles, et il y a beaucoup d’espace blanc pour mettre en valeur les éléments visuels.

Si tu vas à la page d’accueil, tu remarqueras un ajusteur de taille de texte dans le coin supérieur droit de l’écran. Celui-ci est facilement visible et permet aux utilisateurs ayant des déficiences visuelles de personnaliser rapidement la taille du texte selon leurs besoins.

4. Walmart

Une des exigences des WCAG pour les sites accessibles est qu’ils doivent être « visibles lors de la focalisation », ce qui signifie que la partie du site utilisée est mise en évidence. Le site web de Walmart est un excellent exemple de cela. Il possède une multitude d’éléments interactifs comme boutons, liens et champs de formulaire — mais les visiteurs ne peuvent se concentrer que sur un à la fois, et celui avec lequel ils interagissent est distinctement mis en évidence pour une visibilité maximale.

Il est également facile de naviguer entre différents éléments interactifs, du menu de navigation aux différents boutons, la barre de recherche, les liens vers ta page de compte et ton panier, et plus encore, que tu utilises la navigation par souris ou clavier.

5. KidsWish

KidsWish est une organisation qui fournit une thérapie, des services de soutien, et une fête de Noël annuelle pour les enfants défavorisés ou handicapés. Elle s’adresse à de nombreuses personnes avec divers handicaps, donc naturellement, leurs développeurs ont créé un site web aussi accessible que possible.

Et devine quoi ? Ils ont réussi. Le site web KidsWish est merveilleusement conçu, avec une structure logique, une navigation adaptée aux claviers, des couleurs à fort contraste, et un texte en gros caractères. De plus, il est facile à parcourir avec des éléments cliquables bien en évidence.

Le design est également très adapté aux enfants. Il arbore un schéma de couleurs vif et audacieux avec plein de graphismes amusants.

6. Nomensa

Nomensa est une agence de conception d’expérience utilisateur (UX) stratégique basée à Londres. Ils mettent tellement l’accent sur la conception accessible qu’ils proposent un test d’accessibilité web que leurs clients actuels et potentiels peuvent réaliser pour voir comment leurs sites se conforment aux normes internationales.

L’agence propose ensuite des services de design pour aider les clients à corriger tout problème découvert par l’outil de test d’accessibilité.

Écoute ça : le co-fondateur de l’entreprise est co-président du World Wide Web Consortium (W3C) et a aidé à rédiger les directives WCAG qui orientent les meilleures pratiques d’accessibilité web. Ce n’est pas étonnant que Nomensa prenne les solutions d’accessibilité si au sérieux !

7. Ovo Energy

Ovo Energy est une entreprise d’énergie basée au Royaume-Uni. Son site web présente des informations sur les tarifs et les offres et inclut un portail principal de connexion pour que les clients puissent gérer leurs comptes.

L’entreprise a fait un travail remarquable pour rendre le site accessible à tous en utilisant un texte lisible en grand format et une interface claire. Elle intègre également la navigation au clavier pour faciliter la navigation sur le site.

Les concepteurs ont fait plus que nécessaire pour garantir que le site soit accessible aux utilisateurs malvoyants et malentendants. Il y a des services SignVideo pour les utilisateurs de la Langue des Signes Britannique, et le contraste des couleurs est conforme aux directives WCAG.

Les clients peuvent également demander des factures en braille et dans des formats plus grands. En plus de tout cela, le site est compatible avec les technologies d’assistance.

8. Bleacher Report

Le site d’actualités sportives Bleacher Report fait quelque chose de différent qui est extrêmement utile pour les utilisateurs qui accèdent à leur site en utilisant des lecteurs d’écran ou des contrôles clavier. Les premiers points de focalisation sont la notification des cookies, la Politique de confidentialité et les Conditions d’utilisation, et si tu cliques sur le lien externe pour ceux-ci, ils s’ouvrent dans une nouvelle fenêtre.

Pour les utilisateurs sans handicap, cela peut ne pas sembler important, mais cela donne à tous les visiteurs du site de Bleacher Report un accès à des informations juridiques importantes. Sur la plupart des sites, les alertes légales et sur les cookies se trouvent en bas de page, ce qui signifie que les visiteurs qui utilisent des commandes au clavier ou des lecteurs d’écran y accèdent à la fin de leur visite, après avoir parcouru le reste du site. C’est un petit changement avec un grand impact pour les personnes en situation de handicap.

9. BBC iPlayer

BBC iPlayer est le service de streaming en ligne de la BBC. Les utilisateurs regardent des programmes en ligne sur son site web. C’est aussi un autre excellent exemple d’accessibilité web dont nous pouvons tous tirer des leçons.

Tout d’abord, le site est à la fois très facile à naviguer et compatible avec la technologie d’assistance. Tu peux te déplacer sur la page en cliquant sur le bouton Tab. Naviguer sur le logo iPlayer fait apparaître une option pour l’aide à l’Accessibilité, qui renvoie à une page de ressources contenant beaucoup d’informations utiles pour les utilisateurs en situation de handicap.

Le contenu est disposé de manière logique, et tous les boutons utilisent un design visuel clair avec des couleurs à fort contraste. Il y a aussi des infobulles accessibles au clavier et à la souris qui fournissent des informations supplémentaires pour les utilisateurs et un texte alternatif descriptif pour toutes les images.

Le contenu vidéo est également accessible. Tous les programmes sur BBC iPlayer comportent des sous-titres. Il existe également des catégories de contenu audio-décrit et signé.

10. Autorité des Transports Métropolitains

En plus d’avoir un site réactif facile à utiliser sur des appareils avec des écrans de toutes tailles, l’Autorité des Transports Métropolitains de New York dispose également d’une expérience de recherche intégrée qui aide les utilisateurs à trouver plus rapidement et facilement les informations qu’ils recherchent. Comment ? La fonction de recherche fournit toujours des résultats même si les utilisateurs épellent mal les mots ou saisissent des données dans les mauvais formats.

Par exemple, si un utilisateur saisit une adresse ou un quartier dans le planificateur de trajet de la MTA avec une faute de frappe, la barre de recherche suggérera toujours des adresses en fonction de sa meilleure estimation de ce que l’utilisateur recherchait.

11. Gouvernement de la Nouvelle-Galles du Sud

Le site web du gouvernement de NSW est le centre gouvernemental pour la région de Nouvelle-Galles du Sud en Australie. Le site est conçu pour être convivial pour les résidents de tous les horizons et capacités.

Le site web intègre une navigation par onglets, ce qui simplifie la navigation entre les pages à l’aide d’un clavier ou d’un lecteur d’écran. Grâce à des polices de caractères larges et des couleurs contrastées, il est également très lisible et obtient des points pour sa compatibilité avec la technologie d’assistance.

12. GOV.UK

GOV.UK est le centre névralgique de toutes les pages web du gouvernement du Royaume-Uni. Le site fournit des informations sur tout, depuis l’aide aux personnes handicapées et les avantages jusqu’au soutien pour les visas et l’immigration.

Le gouvernement du Royaume-Uni a fait un travail remarquable pour rendre son site accessible à tous ceux qui en ont besoin. Le site propose une navigation par clavier et des attributs ARIA, afin que tu puisses trouver facilement les pages. De plus, il est conçu pour supporter un zoom de 300% pour les lecteurs malvoyants.

Fais Une Déclaration d’Accessibilité

Veiller à ce que ton site web soit aussi accessible que possible est à la fois une obligation morale et professionnelle. Cela peut sembler être un défi, mais nous te promettons — ça en vaut la peine. Les exemples ci-dessus te guideront dans la création d’un site inclusif accessible à tous les utilisateurs.

Prêt à créer ton site accessible ? Laisse-nous prendre en charge le côté technique pour toi, afin que tu puisses consacrer plus de temps et d’énergie à ce qui compte : le design. Inscris-toi à notre Shared Unlimited Hosting Plan et obtiens un hébergement sécurisé et illimité pour tous tes sites web.

Note : Nous faisons des recherches approfondies sur le langage inclusif en matière de handicap pour nos articles. N’oublie pas d’utiliser tes ressources lors de la création de contenu accessible, et en cas de doute, demande toujours.