Accessibilité avancée avec Drupal
DALL-E, 2024

Le contexte

L'accessibilité web est désormais essentielle, tant sur le plan éthique que pratique, dans le développement de sites internet. Elle garantit que tous les utilisateurs, y compris ceux ayant des handicaps visuels, puissent accéder au contenu et l'utiliser de manière équitable.

Lorsqu'un client demande une intervention technique suite à un audit d'accessibilité, cela marque souvent le début d'un parcours complexe mais indispensable vers un web plus inclusif.

Notre client a effectué un audit d'accessibilité de son site web afin d'identifier les lacunes et de garantir une expérience utilisateur inclusive pour tous. Étant riche en contenu informatif, le site présentait des zones nécessitant des améliorations pour assurer une accessibilité optimale, en accord avec les exigences réglementaires et leur engagement envers l'inclusivité.

Notre client visait à respecter, au minimum, la norme RGAA.

Dans cet article, nous partageons notre démarche pour améliorer l'accessibilité et classer le site en deuxième place des entreprises du CAC 40.

Les défis identifiés

Intégration avec le contenu existant

Le site comportait des milliers de pages de contenu varié et structuré de différentes manières, ce qui rendait la mise à jour de l'accessibilité complexe. Nous devions trouver des solutions pour rendre ce contenu accessible sans compromettre son intégrité ou sa convivialité.

Coordination avec le client

L'amélioration de l'accessibilité ne se limitait pas à l'aspect technique et impliquait donc des acteurs au-delà de l'équipe de développement. Le client, responsable de la rédaction et de la gestion des contenus, jouait également un rôle crucial. Il était essentiel de déterminer précisément les responsabilités de chacun pour répondre efficacement aux exigences d'accessibilité.

Tests approfondis sur différentes plateformes et dispositifs

Garantir l'accessibilité sur une grande variété de navigateurs, appareils et technologies d'assistance représentait un véritable défi. Des tests approfondis étaient indispensables pour assurer une expérience utilisateur uniforme et accessible à tous.

Les outils

Pour tester l'accessibilité de manière complète, nous avons dû apprendre à naviguer comme une personne mal voyante sur PC en utilisant des outils tels que le plugin ChromeVox ou ScreenReader, ainsi que sur téléphone avec VoiceOver sur iOS et TalkBack sur Android. Cela impliquait de comprendre et d'adopter les habitudes de navigation spécifiques, comme utiliser la touche Tab pour passer à l'élément suivant sur PC, ou effectuer un double balayage sur Android.

En s'immergeant dans ces méthodes de navigation, nous avons pu identifier des obstacles potentiels et adapter nos solutions pour améliorer l'expérience utilisateur. Cette approche nous a permis de concevoir des interfaces plus intuitives et de garantir que tous les utilisateurs, quelle que soit leur situation, puissent naviguer et interagir avec le site de manière fluide et efficace. Les tests réguliers et l'ajustement des fonctionnalités en fonction des retours d'expérience ont été essentiels pour atteindre un niveau d'accessibilité optimal.

La mise en oeuvre

La mise en œuvre de l'accessibilité

Pour rendre le site web de notre client plus accessible, nous avons apporté plusieurs modifications visant à garantir une expérience utilisateur inclusive.

Sélection et utilisation des couleurs

Notre premier effort s'est concentré sur la sélection et l'utilisation des couleurs du site pour garantir un contraste adéquat entre les textes et l'arrière-plan. Cette considération est essentielle pour assurer une lisibilité optimale, en particulier pour les utilisateurs ayant une vision réduite ou souffrant de daltonisme.

Plusieurs tests ont été effectués pour évaluer la visibilité et la lisibilité des combinaisons de couleurs. Le site offrant plusieurs options de fond pour les boutons et le contenu, des ajustements ont été apportés pour s'assurer que tous les utilisateurs puissent facilement distinguer le contenu textuel.

Amélioration des éléments interactifs

En parallèle, nous avons travaillé à améliorer l'accessibilité des éléments interactifs du site, notamment les boutons, qui sont cruciaux pour la navigation et l'interaction.

Des libellés significatifs ont été ajoutés aux boutons, notamment dans les pages de recherche et leurs filtres (y compris sur les versions mobiles). Bien que les pictogrammes soient souvent clairs pour les utilisateurs sans problèmes de vision, ils manquaient de clarté pour ceux dépendants de technologies d’assistance. Ces libellés, invisibles à l'œil nu mais détectables par les lecteurs d'écran, fournissent des descriptions claires de l'action associée à chaque bouton, permettant une navigation plus fluide et efficace pour tous les utilisateurs.

Navigation au clavier

Des améliorations significatives ont également été apportées à la navigation au clavier. Les utilisateurs naviguant uniquement à l'aide du clavier doivent pouvoir accéder facilement à toutes les fonctionnalités et sections du site.

Pour répondre à ce besoin, des liens et des boutons supplémentaires ont été ajoutés, permettant une navigation complète et intuitive au clavier. Des raccourcis clavier ont été mis en place pour faciliter le déplacement entre les différentes parties du site, et des indications visuelles ont été fournies pour mettre en évidence les éléments actuellement sélectionnés, garantissant ainsi une expérience utilisateur cohérente et sans faille.

Intégration des attributs ARIA

Enfin, des attributs ARIA (Accessible Rich Internet Applications) ont été intégrés aux éléments interactifs du site qui ne les possédaient pas déjà. Ces attributs fournissent aux utilisateurs de lecteurs d'écran des informations supplémentaires sur la structure, le comportement et l'état courant des composants interactifs.

En fournissant des indications claires sur la manière dont les éléments interactifs doivent être interprétés et utilisés, ces attributs contribuent à créer une expérience de navigation plus robuste et prévisible.

En combinant ces différentes stratégies, le site a été transformé en une plateforme plus inclusive, offrant une accessibilité optimale pour tous les utilisateurs, indépendamment de leurs capacités physiques ou des technologies d'assistance qu'ils utilisent. Ces efforts démontrent notre engagement à promouvoir une expérience utilisateur équitable et à respecter les normes d'accessibilité.

Les résultats

Grâce à cette approche rigoureuse, nous avons réussi à améliorer considérablement l'accessibilité du site de notre client, permettant aux utilisateurs porteurs de handicaps d'accéder au contenu avec plus de facilité.

La mise à jour de l'accessibilité d'un site de grande envergure, destiné à un public spécialisé, peut être un défi complexe, souvent nécessitant plusieurs passes. Notre client, par exemple, a établi un plan de mise à jour étalé sur trois ans.

Cependant, les résultats constatés justifient largement les efforts.

Après seulement la première passe de mise à jour, notre client a atteint la deuxième place ex-aequo parmi les entreprises du CAC 40 dans le classement des sites Corporate les plus accessibles, avec une compatibilité de plus de 95%.

Cette réussite démontre non seulement l'engagement de notre client envers l'inclusivité, mais elle souligne également les avantages commerciaux tangibles.

Les Bénéfices pour l'Entreprise

Renforcement de la Réputation : En devenant un leader en matière d'accessibilité, notre client améliore son image de marque et se positionne comme une entreprise socialement responsable.

Expansion de l'Audience : Un site accessible attire un public plus large, y compris les personnes ayant des handicaps, ce qui peut augmenter le trafic et l'engagement.

Conformité Légale : En respectant les normes d'accessibilité, notre client se protège contre les risques juridiques et les amendes potentielles liées à la non-conformité.

Amélioration de l'Expérience Utilisateur : Des sites accessibles offrent une meilleure expérience utilisateur pour tout le monde, ce qui peut conduire à des taux de conversion plus élevés et une fidélisation accrue des clients.

Avantage Concurrentiel : En se distinguant par un engagement fort envers l'accessibilité, notre client gagne un avantage compétitif sur le marché, attirant des partenaires et des investisseurs sensibles à ces enjeux.

Depuis plus de 15 ans Eurelis met en oeuvre le CMS Drupal pour des acteurs majeurs de l'industrie et des médias.

Vous souhaitez en savoir plus sur l’expertise Drupal chez Eurelis ? Nous vous invitons à consulter notre page dédiée, et à prendre contact avec nous pour échanger sur votre besoin.

Vous avez un projet ? Concrétisons vos idées.