Accessibilité des applications web : l'essentiel à savoir

L’objectif de cet article est de sensibiliser à la notion d’accessibilité au sein du web, d’expliquer pourquoi cette notion gagne en importance et comment mettre en œuvre des solutions accessibles répondant à toutes les contraintes qu’elle apporte sans pour autant rentrer dans les aspects techniques avancés.

L’accessibilité d’un site web, c’est quoi ?

L’accessibilité du web se définit par le fait de concevoir et développer des sites web, outils et technologies de telle manière que toute personne puisse les percevoir, comprendre, naviguer et interagir avec.

Souvent reliée aux personnes en situation de handicap (auditif, cognitif, physique, visuel, …), l’accessibilité du web bénéficie aussi aux personnes sans handicap :

• Les personnes âgées
• Les personnes utilisant une connexion internet lente
• Les personnes ayant un handicap « temporaire » (une blessure, perte de lunettes, …)
• Les personnes utilisant des appareils alternatifs (montre connectée, télévision, …) ayant des petits écrans ou différents modes de saisie

L’article portera principalement sur l’accessibilité pour les personnes en situation de handicap.

Accessibilité web : pourquoi est-ce important ?

La nécessité de rendre accessibles les sites et applications web aux personnes handicapées donne de l’importance à cette notion pour les entreprises et la société de manière générale.

En effet, l’importance du web ne cesse de grandir dans de multiples domaines : le commerce, l’éducation, le gouvernement, la santé, les loisirs et plus encore.

Il est donc nécessaire d’abattre les obstacles qui empêchent les usagers d’utiliser des sites d’emploi, gouvernementaux ou de loisirs quelle que soit leur situation.

Le spectre des handicaps en France

Selon une étude de l’INSEE, 9,6 millions de personnes sont en situation de handicap environ qui se décline en 4 principaux types :

• 5,2 millions de personnes atteintes de déficiences auditives
• 2,3 millions de personnes atteintes de déficiences motrices
• 1,7 million de personnes atteintes de déficiences visuelles
• 0,7 million de personnes atteintes de déficiences intellectuelles

Parmi ces personnes, 42% souffrent d’un handicap contre 58% souffrant de plusieurs handicaps (en tout 8% souffrent de 5 handicaps ou plus).

Accessibilité web : les contraintes à prendre en compte

Avec cette pluralité des handicaps, il existe autant de contraintes à prendre en compte lors du développement d'applications web.

Contrastes des couleurs et police du texte

Des couleurs trop similaires peuvent rendre des éléments invisibles à l'oeil de personnes ayant un daltonisme ou d'autres déficiences visuelles.

Dans le même contexte que les contrastes des couleurs, certaines personnes ne peuvent voir qu'une partie des couleurs voire toutes les couleurs.

La police du texte (taille, gras, …) peut affecter la justesse du contraste. En effet un texte en gras sera plus facilement lisible et nécessitera un contraste moins élevé.

Navigation clavier et libellés

Un point central à l’accessibilité est la navigation grâce au clavier. Il existe un attribut ARIA nommé « tabindex » (plus d’explication dans la partie suivante) permettant de placer le focus sur des éléments de base non interactifs et inversement.

Chaque élément interactif (boutons, liens, …) doit être accompagné d’un label clair décrivant concisément la portée de l’élément.

Attention à ne pas créer des répétitions avec les libellés, par exemple en mettant le terme « bouton » dans le libellé d’un bouton, les lecteurs vocaux vont par défaut l’annoncer à l’utilisateur.

Sémantique HTML

La structuration du code HTMLHTML (HyperText Markup Language) est un langage permettant de décrire le découpage d'une page web. est bien plus importante qu’elle n’y paraît. L’organisation entre différentes régions, titres et menus permet une navigation au clavier fluidifiée grâce aux raccourcis existants et améliore donc l’accessibilité de votre site. Les robots d’indexation ont également une meilleure compréhension de votre site web. Les balises principales de structuration sont : < header>, < nav>, < main>, < article>, < section>, < aside> et < footer>.

Il faut aussi revoir l’utilisation de certaines balises :

• < strong> et < b> : ces balises sont utilisées pour mettre en avant un bout de texte grâce à un effet de style (gras), la différence se joue côté sémantique où la balise < strong> apporte cette notion d’importance. La balise < b> peut être remplacé par une règle CSS.

• < em> et < i> : même principe que pour les balises précédentes, la balise < em> apporte une importance sémantique à son contenu en plus de l’effet de style italique. À noter que l’importance apportée est plus faible que la balise < strong>.

Accessibilité web : comment répondre aux contraintes ?

Pour répondre aux contraintes qu’apporte le besoin d’accessibilité, plusieurs options sont possibles.

Les attributs ARIA

Les attributs ARIA (Accessible Rich Internet Applications) permettent de rendre accessible le contenu des applications web pour les personnes en situation de handicap. ARIA complète HTML pour que les outils d’assistance puissent utiliser les éléments interactifs et les widgets quand les fonctionnalités standards ne le permettent pas.

Parmi ces attributs, les plus populaires sont :

• Aria-label : permets de définir le label d’un élément interactif quand aucun élément du DOM ne le permet
• Aria-labelledby : permets d’identifier un élément du DOM via son ID permettant de labelliser l’élément courant
• Aria-required : indique qu’une saisie est requise pour cet élément avant qu’un formulaire ne soit soumis
• Aria-hidden : permets de cacher un élément d’une API d’accessibilité

Une charte graphique aux couleurs accessibles

Chaque application web possède sa propre charte graphique, souvent première facette de son identité, et elle ne respecte pas forcément les recommandations de contraste minimum.

Les recommandations W3C

Le ‘World Wide Web Consortium’ (W3C) développe des standards internationaux pour le web qui sont nommés ‘Recommandations du W3C’. Ces dernières sont revues par le groupe de travail ‘Architectures de Plateformes Accessibles’ (APA) pour prendre en compte l’accessibilité.

Les prises de notes peuvent être retrouvées sur le site du W3C.

Elles vous seront utiles pour assimiler de bonnes pratiques et pour parfaitement comprendre les aspects les plus poussés de l’accessibilité du web.

Tester l’accessibilité de son application web

Plusieurs outils permettent de réaliser des tests d’accessibilité. Voici les principaux !

• WAVE Evaluation tool (ext. Chrome): analyse votre page web pour repérer les erreurs (contraste, label), schématise la structure du contenu HTML et vérifie la présence des attributs ARIA en vous proposant également de modifier les couleurs du site
• ARIA DevTools (ext. Chrome): spécialisée dans les attributs ARIA, cette extension vous permet de repérer les attributs manquants ainsi que les rôles grâce à un affichage reprenant votre sémantique
• IBM Equal Access Accessibility Checker (ext. Chrome): outils d’analyse de votre contenu web, similaire à WAVE avec pour différence de générer un rapport dans l’outil de développement de votre navigateur, similaire à la catégorie ‘accessibilité’ de LightHouse de Google
• NvDA (logiciel de lecture d’écran) : c’est un logiciel de lecture d’écran, il vocalise le contenu d’un site web à son utilisateur en se basant sur le type de balise HTML, son contenu et principalement ces attributs ARIA.

Il existe d’autres alternatives qui proposent des fonctionnalités similaires, en voici un aperçu rapide : GreyScale, LightHouse de Google, le lecteur d’écran intégré à Windows, l’outil d’évaluation du W3C, …

Concrètement, comment pouvons-nous tester l’accessibilité d’un site web ?

Au plus simple, il suffit de naviguer dessus ! Bien évidemment, il faut le faire en se mettant des contraintes : utilisation du clavier uniquement, modifier les couleurs du site (teinture de gris, daltonisme, …), voir même en fermant les yeux !

Pour conclure

La notion d’accessibilité web gagne en importance au fil du temps suite à la démocratisation du tout numérique. Les applications proposant la meilleure expérience à leurs utilisateurs sauront s’imposer sur leur marché, c’est pourquoi il devient nécessaire d’inclure cette notion dès le début du développement d’un projet pour ne pas avoir une dette technique trop importante !

Sources

• INSEE [Chiffre population handicapée]
• W3 [Informations accessibilité]
• Ronan Hello [Sémantique HTML]
• MDN [Sémantique HTML]
• MDN [ARIA]
• W3 [Recommandations w3c]
• OCIRP [Chiffres clés du handicap en France]