L’accessibilité est un aspect de plus en plus prioritaire pour les entreprises souhaitant créer ou refondre leur site internet. Il ne faut ainsi pas négliger cet enjeu et le prendre en compte dès le début du projet.

En effet, l’accessibilité nécessite le strict respect de certaines normes, tant au niveau du design qu’au niveau de la technique. Pour la simple et bonne raison que l’accessibilité numérique améliore l’expérience de tous les utilisateurs sur un site. L’objectif est donc de mettre en place un certain nombre d’éléments pour faciliter la navigation et l’accès aux informations, à tous ceux qui naviguent au clavier, utilisent un lecteur d’écran, souffrent de daltonisme ou qui peinent à visiter un site sur mobile.

Pour rentrer dans les normes d’accessibilité, il est bon à savoir que Drupal propose de nombreux outils et modules pour faciliter la mise en conformité avec les standards d’accessibilité, comme les WCAG à l’international et le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) en France.

Dans cet article, notre agence web Drupal vous présente ainsi quelques bonnes pratiques à adopter et une sélection de modules Drupal utiles, qui ont été testés et appliqués sur les sites de nos clients.

Les bonnes pratiques à adopter

Comme dit précédemment, il existe un certain nombre d’éléments à mettre en place pour que votre site soit accessible à toutes et tous. Parmi ces éléments, vous trouverez ci-dessous, une liste non exhaustive des règles à appliquer pour rendre votre site Drupal accessible :

Fournir à l’utilisateur des éléments d’orientation pour naviguer et trouver le contenu facilement, via l’intégration d’un sitemap par exemple.
Rendre toutes les fonctionnalités accessibles au clavier.
Renforcer les couleurs et les contrastes entre le texte et l’arrière-plan. Cela permet principalement d’optimiser la lecture pour les personnes daltoniennes ou malvoyantes.
Offrir aux visiteurs la possibilité d’agrandir le corps des polices de caractères sans perte de lisibilité et d’information.
Proposer des équivalents textuels pour tous les contenus non textuels (ajout de sous-titres sur l’ensemble des vidéos).
Faciliter la lecture des images, via l’ajout de balises ALT sur l’ensemble des images importantes de votre site. Ces contenus vont ainsi permettre aux personnes malvoyantes, grâce à un système d’audio description, de comprendre le sens de chacune des images.
Respecter les balises titres et les sous-titres des pages.
Être conforme aux règles W3C, qui est un organisme à but non lucratif dont leur mission est de standardiser les langages web afin de garantir un maximum de compatibilité des sites internet et des navigateurs à travers le monde.

Évidemment, l’ensemble de ces actions devront être testées, vérifiées et approuvées pour s’assurer que le site soit bien conforme aux normes internationales et françaises. Pour ce faire, il convient alors d’utiliser des outils performants et dédiés tels que :

AssistivLabs : outil qui permet de tester toutes les technologies d’assistance sur l’ensemble des systèmes d’exploitation (Windows, Mac)
W3C Link Checker : outil qui permet de vérifier la validité des liens d’un plan de sites.
WCAG Contrast Checker : outil qui permet de mesurer le ratio de contraste entre la couleur du texte et la couleur d’arrière-plan.
HeadingsMap : outil qui permet de vérifier l’arborescence du document et de la hiérarchie des titre

Quelques modules Drupal

Par ailleurs, en parallèle des outils cités ci-dessus, notre agence Drupal vous recommande également d’installer quelques modules, qui vous permettront de faciliter le travail des développeurs et des éditeurs de contenus.

Accessibility Scanner

Ce module permet de scanner votre site pour rechercher des problèmes d’accessibilité. Il s’appuie sur la librairie axe-core, très reconnue dans le domaine du développement web.

Editoria11y

Ce module ajoute une surcouche d’analyse d’accessibilité directement dans l’interface de gestion des contenus. C’est essentiellement un plugin idéal pour les rédacteurs et les éditeurs, car cela leur permet de voir instantanément s’ils ont oublié un texte alternatif, mal structuré leurs titres, ou encore s’ils ont inséré un lien non descriptif.

Automatic Alternative Text

Ce module utilise les API d’intelligence artificielle (comme Microsoft Azure ou Google Cloud Vision) pour générer automatiquement des textes alternatifs pour les images.

Text Resize et Accessibility

Ces deux modules permettent aux visiteurs de modifier la taille du texte, le contraste ou la police pour améliorer leur confort de lecture. Même si beaucoup de navigateurs proposent ces options, les rendre visibles sur le site est un vrai plus.

HTML Purifier

Cet outil est indispensable pour éviter que les éditeurs de contenu n’introduisent involontairement des erreurs d’accessibilité dans le HTML via CKEditor. Il nettoie le code en profondeur selon des règles strictes, et protège aussi contre les failles XSS.

Si le thème du site internet ne gère pas bien les zones ARIA (comme main, nav, aside, banner…), ce module, combiné à une configuration soignée, peut vous aider à structurer votre page avec les bons rôles pour les lecteurs d’écran.

Vous l’aurez donc compris, si vous souhaitez que votre plateforme soit accessible, un certain nombre de règles devront être respectées, pour répondre aux exigences de qualité, d’inclusion et parfois même aux obligations légales.

Sur Drupal, de nombreux modules sont là pour vous accompagner, bien qu’il soit nécessaire de faire également une recette humaine. L’accessibilité étant présente aussi bien dans la conception graphique (renforcement des couleurs et des contrastes, taille du texte, etc.) dans la rédaction du contenu web (balise ALT, rédaction d’équivalent textuel pour les contenus non textuels, respect des balises titres et des sous-titres, etc.), que dans la partie développement web (intégration sitemap, etc. ). Il convient alors à chaque personne qui travaille sur le projet de garantir la conformité aux normes européennes et internationales, en respectant l’ensemble des exigences.