On sait que 15% de la population mondiale vit avec un handicap (chiffre de l’Organisation Mondiale de la Santé). Malheureusement 70% du contenu digital leur est inaccessible.
Qu’est-ce qu’un site web accessible ?
Le Web Accessibility Initiative (WAI) créé par le World Wide Web Consortium définit l’accessibilité comme suit :
“L'accessibilité du Web signifie que les sites Web, les outils et les technologies sont conçus et développés de manière à ce que les personnes handicapées puissent les utiliser. Plus précisément, les personnes peuvent :
- percevoir, comprendre, naviguer et interagir avec le Web
- contribuer
L'accessibilité couvre un large spectre de limitations fonctionnelles, telles que les limitations visuelles, auditives, physiques, cognitives, neurologiques ou encore, celles liées à la parole, au langage ou à l'apprentissage.
Mais finalement on s’est vite rendu compte que l'accessibilité du Web bénéficie aussi aux personnes non handicapées.
Quelques exemples :
- les personnes utilisant des téléphones mobiles, des montres intelligentes, des téléviseurs intelligents et d'autres appareils dotés de petits écrans, de modes de saisie différents, etc.
- les personnes âgées dont les capacités changent en raison du vieillissement
- les personnes souffrant de "handicaps temporaires", comme un bras cassé ou des lunettes perdues
- les personnes souffrant de "limitations situationnelles", par exemple en cas d'exposition à la lumière du soleil ou dans un environnement où elles ne peuvent pas écouter d'audio
- les personnes utilisant une connexion Internet lente ou disposant d'une bande passante limitée ou onéreuse
Le but est donc d’exclure ou de limiter les obstacles qui entravent l’accès à une page web pour proposer une égalité d’accès à tous et sans discrimination.
Pour les normes et standards, il faut se référer au WCAG 2.0 qui fait autorité dans ce domaine. Ce référentiel repose sur 4 objectifs, le contenu doit être :
- Perceptible : jouer sur les contrastes, rendre le texte visible et ajouter une alternative textuelle aux éléments non textuels
- Utilisable : rendre les contenus accessibles par le clavier ou par la souris, aides à la navigation
- Compréhensible : produire du contenu lisible, aider à la navigation et la rendre intuitive
- Robuste : prévoir l’accessibilité, quels que soient l’outil et la technologie utilisés
Accessibilité web : qui est concerné ?
Les personnes en situation de handicap comptent parmi les utilisateurs particulièrement concernés par l’accessibilité web. Lors de la création ou de la refonte d’un site, il faut donc réfléchir aux impacts pour chaque forme de handicap : visuel, auditif, moteur et cognitif.
Même si les personnes souffrant d’un handicap sont les premières touchées, l’accessibilité peut être élargie pour désigner l’accès du plus grand nombre d’utilisateurs.
Se mettre à la place des personnes atteintes d’un handicap et comprendre comment elles naviguent sur le Web
Les personnes aveugles utilisent des lecteurs d’écran (logiciels qui retranscrivent par synthèse vocale le contenu d’une page Web). Pour trouver rapidement le contenu adéquat, un lecteur d’écran analyse la navigation du site et les en-têtes de chaque page. Il est combiné à un clavier plutôt qu’à une souris ou pavé tactile : les touches Tab et Entrée permettent de basculer rapidement entre les éléments actifs d’une page. C’est pour cela qu’une personne aveugle doit pouvoir compter sur un contenu parfaitement structuré et sur une navigation claire pour pouvoir accéder au Web.
Contrairement aux personnes aveugles, les individus malvoyants ou daltoniens visitent votre site de façon « classique »… mais sont freinés par une foule d’obstacles. Polices trop petites, informations basées uniquement sur la couleur (par ex. histogrammes ou hyperliens de couleur bleue)...
Heureusement, il existe des solutions :
1. Le ratio de contraste
Le ratio de contraste est une valeur comprise entre 1 et 21 (1 = même couleur, 21 = noir/ blanc) qui détermine la qualité du contraste entre le texte et son arrière-plan. Un ratio de contraste accessible aide les personnes malvoyantes ou atteintes d’une pathologie visuelle à interagir.
Le ratio de contraste accessible est généralement de 4.5:1 (sauf le texte agrandi et le texte agrandi sous forme d'image ont un rapport de contraste d'au moins 3:1).
2. La Navigation, hiérarchie du contenu et les en-têtes
Comme vu précédemment lorsque le contenu est structuré et clair, l’expérience utilisateur est grandement améliorée, notamment du fait qu’il peut interagir facilement avec les différents éléments du site.
3. Le texte et la typographie
Taille du texte : les textes de petite taille sont difficiles à lire pour les personnes malvoyantes. Utiliser une police d’au moins 14 px sur le site permet un accès au plus grand nombre. En parallèle, le texte doit pouvoir être redimensionné jusqu'à 200 pour cent.
Alignement : il ne faut jamais justifier le texte. Contraint dans un espace limité, un texte justifié présentera des espaces de largeur variable entre les caractères, et l’utilisateur aura du mal à distinguer le début ou la fin d’un mot. L’alignement du texte à gauche est la meilleure option.
Espacement : les espaces aident l’utilisateur à repérer le texte à lire, mais aussi où commencer sa lecture.
Usage des majuscules : certains lecteurs de texte épellent les mots en lettres capitales, rendant la lecture moins compréhensible. Il faut donc veiller à utiliser du texte en minuscules (hormis la première lettre des mots).
4. Le texte alternatif
Le texte alternatif (Alt Text) fournit à l’utilisateur des infos de base mais essentielles à propos d’une image. Les images deviennent ainsi accessibles aux utilisateurs de lecteurs d’écran, mais aussi à ceux souffrant de lenteurs de connexion – lorsque le chargement des images est impossible.
Pour les handicaps auditifs, il est important de sous-titrer les contenus vidéos. Il faut également avoir en tête qu’il n’y a pas que les malentendants qui visionnent du contenu avec le son coupé. Les médias ne s’y sont pas trompés en proposant des vidéos avec du texte incrusté.
Concernant les handicapés moteurs, il est nécessaire de vérifier la mise en forme des formulaires Web, passerelles de paiement et autres champs de connexion afin que les outils autofill puissent renseigner les informations. Un site web doit pouvoir être parcouru en utilisant uniquement les touches Tab, Maj, Espace et Entrée.
• Tab : permet de parcourir en boucle tous les éléments interactifs d’une page (de haut en bas)
• Shift + Tab : permet de parcourir en boucle tous les éléments interactifs d’une page (de bas en haut)
• Entrée / Espace : permet d’interagir avec les éléments (cliquer sur un lien, cocher une case ou afficher un menu déroulant)
Enfin pour les troubles cognitifs, il est recommandé de privilégier une navigation claire et structurée ainsi que l’aspect visuel. L’utilisation d’icônes et de visuels parlants devraient faciliter la compréhension de tous.
Conclusion
En synthèse lorsqu’on se lance dans une démarche d’accessibilité, cela dépasse le public en situation de handicap. Il s’agit en fait de diffuser votre contenu à un maximum d’internautes. Les recommandations à suivre sont celles de la WAI (W3C) et plus particulièrement du WCAG 2.0. Tous les autres référentiels s’appuient sur ce socle commun.
Rappelons que dans tous les cas, une expérience en ligne accessible génère naturellement moins de points de friction et de frustration. Un site Web facilement navigable et au contenu de qualité et hiérarchisé sera a priori favorisé par le référencement Google. La notion d’accessibilité est étroitement liée à l’expérience utilisateur sur un site web (UX) et à l’ergonomie de ses interfaces (UI). Nous développerons cette thématique dans un prochain article.
