Accessibilité numérique : normes et outils

L’accessibilité numérique permet de rendre accessible le contenu et les services d’un site web au plus grand nombre mais surtout aux personnes porteuses d’un handicap, il est important de penser en amont à sa mise en place.

Néanmoins, cette partie du développement web est souvent la grande oubliée car cela demande du temps pour sa mise en place.  

Heureusement, de nombreux outils existent aujourd’hui pour faciliter l’application de ces normes aux sites web. Il suffit de respecter certaines règles et principes pour grandement améliorer l’accessibilité numérique mais également le SEO de votre site web.

Normes d’accessibilité numérique

Les normes d’accessibilité numérique sont fixées par le W3C (World Wide Web Consortium) via le WAI (Web Accessibility Initiative). Il existe différentes versions mises à jour des guides de bonnes pratiques : l’actuelle est la version WCAG 2.1 (Web Content Accessibility Guidelines). 

Ce document découpe les pratiques en différents niveaux d’accessibilités (A, AA et AAA) à appliquer sur son site web. Le plus courant est d’essayer d’atteindre le niveau AA. 

Comme dit précédemment, il est important de penser à l’accessibilité numérique en amont dès la réalisation des mockups pour optimiser l’expérience utilisateur du site web. Par exemple, penser à la hiérarchisation du texte et du contenu, mettre en place des formulaires avec des labels, rendre les boutons compréhensibles, ajouter des liens pour accéder directement au contenu…

Les designers vont s’occuper ensuite des maquettes et vont penser à ajuster le contraste des couleurs pour que tous les éléments soient lisibles. On évite ainsi d’avoir recours à des outils externes pour rendre son site lisible, permettant ainsi de garder l’identité du site web.

Le respect des normes d’accessibilité numérique

Il faut toujours avoir en tête le respect des normes d’accessibilité numérique lorsque l’on développe un site web :

• Utiliser la bonne sémantique HTML pour permettre la bonne compréhension de la page. Cela comprend les bons en tête de page (headings : h1, h2,…)
• Utiliser les unités `rem` ou les `em` en CSS au lieu des `px` pour permettre au site d’être accessible par rapport au préférence de taille de police de l’utilisateur
• Ajouter des éléments pour l’accessibilité seulement. Par exemple, on affiche du texte supplémentaire pour contextualiser une information (afficher le label “Prix : ” à côté d’un nombre). Cela peut se faire en appliquant le CSS suivant :

         ```css
         .show-for-sr {
      		border: 0; 
                clip: rect(0 0 0 0); 
                height: 1px; 
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
         }
		```

• Cacher les éléments qui ne doivent pas être visibles. Un simple `display:none;` en CSS peut faire l’affaire. Par contre, si on veut le rendre seulement invisible aux lecteurs d’écrans, il suffit d’appliquer la balise `aria-hidden=”true”` à l’élément HTML qu’on veut masquer.
• Utiliser des librairies accessibles qui permettent le fonctionnement avec un clavier.
• Utiliser les balises ARIA (Accessible Rich Internet Applications) pour contextualiser les composants.
• Renseigner les attributs donnant du contexte à des images ou des liens (balises alt, title…)
• Vérifier le contraste du texte pour qu’il soit lisible (voir section Outils)

En plus de ces bonnes pratiques,  les principaux CMS proposent par défaut de rendre leurs administrations accessibles. De plus, ils fournissent des bonnes pratiques et des fonctions pour améliorer l’accessibilité numérique : WordPress propose une section dédiée et il en va de même pour Drupal.

Après avoir respecté les points suivants, il est important d’utiliser des outils qui vont pouvoir nous remonter des problèmes et atteindre notre objectif de respect de la norme WCAG 2.1 AA.

Outils de test d’accessibilité numérique site web

Pour analyser et corriger l’accessibilité d’un site web, il existe différents outils qui automatisent les vérifications ou les simplifient grandement.

Les outils embarqués d’accessibilité numérique dans les navigateurs

Les navigateurs modernes embarquent aujourd’hui de nombreux outils pour simplifier le développement web. Depuis quelques années, cela comprend également toute une partie dédiée à l’accessibilité numérique.

Google Chrome et Microsoft Edge possèdent par défaut deux outils très pratiques. Le premier permet grâce à l’inspecteur d’élément de vérifier rapidement le contraste de celui-ci. 

Le deuxième outil est Lighthouse,  le logiciel de Google pour tester les performances et la qualité d’un site web. Il embarque également une partie dédiée à l’accessibilité numérique.

Pour y accéder, rendez-vous dans l’inspecteur web puis dans l’onglet Lighthouse et cliquez sur Generate report.  Il  va tester la page web sur différents critères (balise alt sur les images, contrastes…) et retourne les actions à mener pour améliorer l’accessibilité numérique de la page.

Firefox embarque également un outil d’accessibilité numérique très complet. Pour y accéder, il suffit de se rendre dans l’onglet “Accessibilité” dans l’inspecteur de page web.

Il permet de visualiser la structure du site web et d’inspecter le contraste des éléments comme sur les navigateurs basés sur Chromium.

En plus de cela, il permet de rapporter des problèmes automatiquement sur une page, simuler les troubles visuels comme le daltonisme et voir l’ordre de tabulation d’une page.

Extensions web

Microsoft a créé une extension web nommée Accessibility Insights fonctionnant sur Chrome et Edge. Celle-ci possède de nombreux outils indispensables (test des tabulations, couleurs, en tête…).

Mais en plus de cela, l’outil “Assesment” permet de vérifier que votre page web respecte tous les points du WCAG 2.1 avec des tests automatiques et manuels.

En alternative, je conseille l’extension WAVE, développée par une organisation à but non lucratif spécialisée dans l’accessibilité numérique. Comparé à Lighthouse, elle affiche directement les soucis sur la page web, ce qui permet d’identifier très rapidement les problèmes. Elle permet très rapidement et facilement de vérifier une page web en identifiant automatiquement les problèmes.

Outils supplémentaires

Pour parfaire votre attirail de super héros de l’accessibilité numérique, vous pouvez vérifier le contraste des couleurs grâce à l’application TGPI Color Contrast Checker ou un équivalent en ligne comme WebAIM Contrast Checker. Je vous conseille également de vérifier la sémantique de votre code via un outil comme Nu HTML Checker ainsi que les “headings” grâce à des extensions web comme HeadingsMaps (Chrome, Firefox, Edge).

L’accessibilité numérique est un sujet passionnant qui est en constante évolution. En effet, la version 3 de la WCAG qui paraîtra dans quelques années devrait être plus abordable. Il est prévu notamment un changement de son système de notation : remplacement des A par des niveaux bronze, argent et or selon un score obtenu.

Un autre changement annoncé est un nouveau système de calcul des contrastes plus intelligent. Un article dans le futur sera nécessaire pour vous expliquer en profondeur toutes les nouveautés quand celles- ci seront disponibles.

L’accessibilité chez Spiriit

L’accessibilité numérique est appliquée constamment chez Spiriit notamment par le respect de la sémantique, de la hiérarchie des contenus et des bonnes pratiques web. Ainsi, l’accessibilité sur le site GRIM Occasion est très élevé sans la moindre intervention supplémentaire dédiée.

Un accompagnement peut être apporté sur le design et l’expérience utilisateur du site web pour être davantage accessible. Par exemple, ICM possède un style spécifique plus contrasté pour permettre une meilleure lisibilité.

Enfin, nous continuons de structurer notre approche qualité notamment par la formation de nos collaborateurs à la certification Opquast. Celle-ci contient notamment quelques règles de bases d’accessibilité qui deviendront ainsi des standards pendant la réalisation de nos projets.