L'accessibilité (ou A11y) est un terme qui se rapporte généralement à la situation de handicap. Dans sa définition la plus basique, il s'agit de donner la possibilité aux personnes handicapées d'accéder à un lieu physique ou à des informations.

Dans notre société, le handicap est relatif à plusieurs domaines : physique, éducatif, civique, culturel, numérique... Nous allons ici nous intéresser à l'accessibilité numérique, un enjeu essentiel au cœur de notre quotidien.

Si aujourd'hui nous passons de plus en plus de temps sur internet à lire des articles, à réaliser des achats, à se documenter, nous sommes aussi de plus en plus exigeants sur la qualité des pages web que l'on visite. De la police aux icônes, en passant par la navigation, un site ergonomique et bien réalisé est une des clés pour fidéliser l'utilisateur.

Qu'est ce qu'un site bien réalisé ?

Il existe de multiples réponses à cette question. Le sujet est vaste, les débats qu'il génère également.

Mais plus précisément, nous allons voir comment un site internet, aussi 'beau' soit-il, peut aussi se révéler être un enfer à utiliser pour certaines personnes, notamment les 24% de la population active considérée comme handicapée.

Au cours de notre vie, se retrouver dans une situation de handicap est quelque chose de commun. Cette situation peut être éphémère, comme de devoir prendre le métro après une fracture de la jambe ou utiliser un clavier avec un pouce cassé, ou durable, voire définitif, comme dans le cas d'un problème moteur dès la naissance, d'un problème de vue ou d'un problème auditif. De ce fait, on sait aussi que tous les visiteurs d'une page web ont des besoins différents et que certains s'y prennent donc différemment pour naviguer sur la toile.

Mais comment le web est-il influencé par ces problèmes d'accessibilité ? Comment, par exemple, faire en sorte qu'un site soit aussi accessible à une personne non-voyante qu'à une personne sans problème de vue ?

HTML à la rescousse !

Nous savons tous que les pages web d'aujourd'hui sont développées grâce aux langages HTML et CSS, pour les pages les plus basiques. Ces deux langages sont répandus partout sur le web d'aujourd'hui. Le problème qui se pose est que chaque entreprise/développeur, peut développer une page web à sa manière. Heureusement, le W3C (World Wide Web Consortium) a créé des recommandations à travers le projet Web Accessibility Initiative (WAI) qui permet de normer la manière de rendre un site accessible.

Nous allons partir sur un exemple très simple. Nous avons ci-dessous une page web simpliste : 

 
La page que vous voyez ci-dessus contient, à première vue, un titre, trois articles suivis de leur titre, puis une image et un champ de saisie. Cette page, pourtant très simple, ne respecte pas les règles de base de l’accessibilité, comme nous allons le voir tout de suite.

Pour être bien compris des utilisateurs ou des bots, notre page web doit avoir une signification sémantique. Le HTML inclut des balises sémantiques depuis sa création, et ces balises, bien utilisées, ont des conséquences importantes sur l'accessibilité d'un site. En voici quelques exemples.

Sur la première partie, nous avons un titre suivi de sous-titres et de contenus pour chaque sous-titre. Dans le code HTML de notre page, nous avons pour le titre et les articles quelque chose de simple : 

On peut voir ici, l'utilisation (un peu exagérée) des balises 'div', qui sont des balises neutres en HTML, pour contenir divers éléments. On utilise ici cette balise pour représenter un titre qu'on marque pas la classe title pour lui donner le style voulu. Un moyen simple d'améliorer sémantiquement ceci est d'utiliser une balise de titre, de niveau 1 pour le titre principal et de niveau 2 pour les autres sous-titres. Une fois le changement effectué, cela donne ceci :

Ce changement donnera donc comme information qu'il y a un titre important en haut de page et plusieurs sous-titres avec un degré d'importance plus faible. De la même manière, pour le contenu des sous éléments, il est important de donner les bonnes informations aux visiteurs de votre page web. Ici nous avons une image non accessible :

Voici ici sa version accessible :

Comme on peut le voir, on a ajouté un attribut et transformé une balise 'div' en balise 'p' pour représenter un paragraphe.

Alors d'accord, on écrit du HTML sémantique, mais où est la différence pour les utilisateurs ?

En effet, un utilisateur en situation de handicap ne va pas naviguer la page de la même manière. Prenons l'exemple d'un utilisateur non-voyant : comment va t-il faire pour lire le contenu du site ?

Les lecteurs d'écran

Il existe des outils qu'on appelle des lecteurs d'écran et qui vont littéralement lire toutes les informations que contient une page là où l'utilisateur se situe.

NVDA est un lecteur d'écran que vous pouvez télécharger gratuitement, qui s'installe sur le poste utilisateur de manière globale et qui va lire une fois installé, tous les textes sur lesquels la souris va passer.

Prenons l'image précédente non accessible : comment savoir le contexte dans lequel l'image se situe pour un non-voyant ?

Lorsque nous repassons au lecteur d'écran, le texte que nous avons mis dans l'attribut 'alt' est lu et nous avons donc accès au contexte de l'image. De même que pour l'attribut 'alt', les champs de saisie ont souvent besoin d'avoir une information supplémentaire notifiée grâce à un élément de label.

L'outil 'axe', dont nous reparlerons dans un instant, pointe aussi le bout de son nez pour tous les champs input qui ne seront pas associés à un label. Comprenez ici que l'élément label n'est pas indispensable, il peut parfaitement se substituer par un élément si le champ de saisie possède aria-labelledby (en savoir plus sur ARIA).

L'importance d'avoir un site accessible

Avec ces petits exemples, nous comprenons rapidement l'intérêt d'avoir un site accessible à tous, surtout lorsqu'il s'agit d'un site s'adressant au grand public : e-commerce, gestion de comptes bancaires, etc.

Quels outils pour aider les développeurs ?

Tout d'abord, les développeurs web se doivent de coder des pages HTML en utilisant les bonnes balises aux bons endroits, (balise de titre, article, main, footer, header, etc.)

Concernant les tests d'accessibilité, les développeurs ont à disposition des extensions Chrome qui permettent par exemple d'analyser la page courante et de savoir si la page qu'ils visualisent respecte les normes d’accessibilité.

Présentation de l'outil 'axe' :

Axe est un plugin Chrome que vous pouvez télécharger. Il se présente ensuite dans la console Chrome et peut être lancé pour analyser n'importe quelle page. En voici un exemple sur la page précédemment non accessible : 

Il existe bien entendu d'autres outils que nous ne présenterons pas ici, mais qui sont utilisés de la même manière qu'axe. L'outil axe va donc analyser votre page, vous suggérer des améliorations pour rendre des éléments accessibles et vous pointer les différents problèmes de votre site.

En ouvrant la console de son navigateur, en allant ensuite dans l'onglet axe, nous pouvons lancer l'analyse de notre page :

A chaque problème résolu, nous pouvons recharger axe sur la page du site - il ne le fera pas tout seul :) - pour finalement obtenir, après un dur travail de moins de 10 minutes, ceci :

Les autres outils à disposition

Bien qu'axe soit un outil plus que pratique pour analyser les critères d'accessibilité, il en existe d'autres, tel que WAVE, un outil proposant une approche similaire à celle d'axe et qui est aussi très clair et puissant.

A la différence d'axe, les erreurs d’accessibilité peuvent être directement tracées dans la page. Il est de ce fait parfois utile d'allier les deux pour travailler plus efficacement.

Accessibilité et sécurité, parfois antagonistes

Lorsque l'on doit coder une page web, selon le contexte, le code appliqué à la page se doit parfois de respecter certaines normes de sécurité comme par exemple celles liées à l'authentification des utilisateurs sur la page.

Lors de la connexion, nous présentons un clavier virtuel à l'utilisateur lui permettant de s'authentifier de manière sécurisée. En contrepartie de cette sécurité, l'accessibilité est ici affectée car le site doit être suffisamment robuste pour ne pas présenter de failles contre les robots ou les attaques...

Une solution pour rendre un clavier virtuel accessible est d'énoncer au passage de la souris le chiffre sur lequel on passe. Cependant, énoncer les valeurs du clavier que l'on parcourt peut représenter une faille importante.

Il s'agit donc parfois de faire des compromis, voire de réfléchir à d'autres implémentations afin de respecter les règles de sécurité et d'accessibilité pour une même fonctionnalité.

Un dernier mot

En définitive, l’accessibilité est un sujet important parfois trop peu abordé ou trop peu connu des développeurs.

Malgré le fait que ces derniers puissent connaître les différents éléments sémantiques que possède le langage HTML, leur raison d'exister est souvent obscure.

Nous sommes là évidemment très loin d'avoir vu toutes les notions et toutes les solutions qui existent autour de l'accessibilité et je vous invite donc à faire un tour par ici pour en découvrir davantage sur le sujet.

Et vous ? Développez-vous de manière accessible au sein de votre projet ? :)

------------------------------

Article rédigé par Kévin, Développeur Front chez ESENS | Retrouvez tous nos articles sur le Blog ESENS

Vous êtes à la recherche d'un nouveau challenge ? Rejoignez l'équipe ESENS en postulant à nos offres d'emploi !