Point sur l'accessibilité numérique en pratique dans un projet Drupal

Un handicap, idées reçues

En France, 12 millions de français (soit pratiquement 20% de la population) sont touchés par un handicap, dont 1,5 million par une déficience visuelle. Nous tentons tous d'encourager l'aménagement des espaces publics pour améliorer leur quotidien (rampes d'accès, boutons surimprimés en braille, alertes sonores, etc.) Nous sommes concernés pour rendre l'espace public numérique plus facilement accessible. L'accessibilité numérique participe aux mêmes objectifs.

L'accessibilité, cela ne me concerne pas !

Nous, UX et UI designer, concepteur·rice·s d'interfaces, devons désormais intégrer ces contraintes d'accessibilité dans le but de proposer à tou·te·s une expérience améliorée. Concevoir des interfaces accessibles permet en outre d'augmenter le ROI du projet numérique en atteignant une plus large audience.

Les supports numériques entament le virage de l'accessibilité : sur votre smartphone, dans les réglages, vous disposez de l'onglet "Accessibilité". On y trouve la possibilité de changer la taille de la police, la taille d'affichage des icônes, l'inversion des couleurs, le réglage des contrastes élevés, etc. Même sans handicap (apparent), ces réglages sont utiles. Faites l'expérience autour de vous - vous verrez que de nombreux utilisateurs utilisent ces réglages pour augmenter la taille de la police, manipuler les contrastes. Mais ce n'est pas le plus flagrant exemple : le flash de l'iPhone pour vous signaler un message ou un appel, vous voyez ? Et bien, à l'origine, cette fonction était destinée aux sourds et malentendants ne pouvant pas entendre leur sonnerie. Les adaptations liées à l'accessibilité font partie intégrantes des projets numériques modernes, ils sont en outre source d'innovation !

Accessibilité + Inclusive design = Accessibilité numérique

Qualifier l'accessibilité numérique ne se limite pas aux usages. Les efforts et anticipations se retrouvent également an amont, pendant la conception des interfaces numériques : c'est l'inclusive design. Pour expliquer le concept, citons Tim Berners-Lee, qui définit l'accessibilité comme : "Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales". L'accessibilité concerne donc le support, le logiciel, les interfaces et qualifie en plus des situations temporaires ou permanentes.

Prendre en compte l'inclusive Design dans sa démarche de conception, c'est surtout être animé par une grande empathie. C'est considérer les utilisateurs pour ce qu'ils sont et non pour ce que l'on peut imaginer qu'ils sont. L'accessibilité numérique, c’est l’accès à tous les supports, pour tous les individus.

Comment mettre cela en place ?

Créer un projet numérique accessible nécessite plus de réflexions et de connaissances. Il convient de se familier avec les standards et bien les utiliser. Bien entendu, il sera délicat de tous les mettre en place. Cependant, nous devons toujours garder à l'esprit les principes et dispositions légales en la matière (loi du 11 février 2005 en faveur des personnes handicapées). Ceux-ci sont disponibles dans un Référentiel Général d’Accessibilité pour les Administrations (RGAA), listant l'ensemble des critères que les sites web de l'État et établissements publics doivent respecter.

Si l'obligation ne s'étend pas au secteur privé, ce dernier devrait cependant s'en inspirer. Un site accessible augmente sa popularité en élargissant la cible. Il est déjà simple de penser à quelques éléments de base qui faciliteront la navigation sur un site :

• Donner un titre aux pages ;
• Donner des titres aux rubriques ;
• Éviter les captcha ;
• Assurer un contraste suffisant entre texte et fond ;
• Ne pas utiliser la couleur ou l'information sensorielle comme seule source d'information ;
• Libeller des liens et des boutons ;
• Éviter les boites de dialogues et l'ouverture de nouvelles fenêtres ;
• Fournir des liens d'évitement ;
• Permettre le contrôle des animations ;
• Situer explicitement la page dans le site et fournir plusieurs moyens d'y accéder ;
• Permettre la navigation au clavier ;
• Assurer la visibilité du focus ;
• Permettre l'agrandissement de texte et l'adaptation de la taille d'affichage ;
• Permettre d'aérer le texte ;
• Identifier et conserver la cohérence des regroupements et des différentes régions de la page ;
• Fournir un texte alternatif pour les images et les contenus non textuels.

Voici que quelques points permettant d'améliorer un projet pour une meilleure accessibilité.

L'équipe bluedrop.fr a fourni ce travail de recherche d'accessibilité pour le site du Céreq par exemple. Le projet a été certifié accessible AA, le tout répondant au Référentiel Général d'Accessibilité pour les Administrations (RGAA). Nous avons donc appliqué les critères listés ci-avant, et avons regroupé certains d'entres eux dans un bouton "accessibilité" disponible dans le header du site. L'utilisateur a donc la possibilité de faire ses propres réglages sur le contrastes des couleurs et la taille de la police.

Des outils pour les développeurs

Pour un développeurs, le travail est tout aussi minutieux et méthodique. Voici quelques bonnes pratiques appliquées au développement pour avoir un projet accessible :

• Donner à chaque page un titre qui lui est spécifique et qui reflète son contenu ou sa fonction (balise <title>) ;
• Identifier les balises de titres à utiliser (balises h1 jusqu'à h6) pour structurer le contenu des pages ;
• Mettre, dans toute balise <img>, un attribut alt pertinent ;
• Ne pas supprimer l'outline autour des éléments cliquables ;
• Ne pas fixer de hauteur sur les éléments afin que le contenu reste lisible lorsque le texte est zoomé ;
• Utiliser les balises de structure HTML5 (header, footer, nav, section, article, aside) ;
• Utiliser CSS exclusivement pour la présentation et HTML pour la structure ;
• Définir un rôle ARIA sur les éléments (exemple : attribut role="navigation" sur le menu, aria-label="fermer" sur un bouton).

Une fois ces conseils adoptés, voici quelques outils ou modules Drupal à utiliser pour vérifier et aider votre recherche d'accessibilité :

• TextSize : Module Drupal qui permet d'ajouter des boutons + et - pour contrôler la taille du texte ;
• Page Style : Module Drupal qui permet de créer des versions Noir et Blanc du site et autres styles afin d'améliorer le contrastes et le confort de lecture ;
• Accessibility Checklist : Check-list de points d'accessibilité du W3C à respecter ;
• aXe : est une extension disponible pour Chrome et Firefox permettant d'effectuer une série de tests basés sur les WCAG ;
• Wave : Disponible pour Firefox, Wave permet d'effectuer une série de tests d'accessibilité mais il offre la possibilité d'afficher les erreurs directement dans la page.

L'équipe conception de l'agence bluedrop.fr -

Pour revenir en arrière, voici notre premier article sur l'accessibilité :
Qu'est ce que l'accessibilité d'un site internet ? - Éléments de réponse et point sur les sites Drupal - Vendredi 22 Octobre 2010
L'accessibilité des sites web, des normes et un état d'esprit... - Samedi 25 Mars 2017

Sources :
Les chiffres clés du handicap en France - 12/07/2018
Qu'est-ce que l'accessibilité numérique ? - Pierre Laine
Qu'est-ce que l'inclusive design ? - 26/09/2016
Les bonnes pratiques à suivre pour améliorer l’accessibilité d’un site - 05/11/2016
Lancer des tests d’accessibilité avec Pa11y -  23/06/2019
UX & accessibilité : tous concernés ? - 06/03/2019