Le bureau des UX : à propos de l’accessibilité

Quand on parle d’expérience utilisateur, on parle de l’expérience de tous les utilisateurs. Y compris, et il ne faut pas les oublier, les utilisateurs avec des handicaps, visuels ou autres. De lecture automatique en attribut ARIA, bienvenue dans le monde de l’accessibilité !

#1 Accessibi..quoi ?

L’accessibilité, et son numéronyme associé a11y (pour « a[ccessibilit]y »), dans le monde de la tech, c’est un ensemble de règles pour rendre les interactions plus inclusives pour un maximum de personnes. Le but final étant que tout à chacun puisse naviguer librement et sans contraintes sur le web. Tout au long de l’article, on va beaucoup parler du web, car ce sont les normes les plus répandues et les plus faciles à mettre en place, mais gardez à l’esprit que des solutions existent dans beaucoup de systèmes.

Le sujet est, malheureusement, trop peu abordé. C’est encore aujourd’hui un sujet marginal, et pourtant la WAI (Web Accessibility Initiative, créée par le W3C)  a été initiée en 1997,soit (à l’heure de rédaction de cet article) depuis bientôt un quart de siècle. Celle-ci vise à établir des recommandations et des solutions techniques pour améliorer l’accessibilité. Et en plus d’être possible, cela fait partie des droits internationaux de l’homme à l’ONU depuis 2008, et c’est un devoir dans certains pays, notamment via la loi accessibilité numérique en France.

Au final, l’accessibilité est déjà présente dans nos vies, sans qu’on y prête forcément attention. Un exemple ? Si vous êtes sur ordinateur, baissez les yeux sur votre clavier : il est fort probable que les lettres f et j portent des petits picots pour les distinguer des autres, pour que les personnes malvoyantes sachent où placer leur main à partir de ces deux repères.
Pour aller plus loin, je conseille aux anglophiles le site a11y.coffee, qui reprend et approfondi la plupart des sujets que nous allons traiter.

#2 Web & handicap visuel

Actuellement dans le monde du numérique, l’interface majeure à laquelle est confronté l’utilisateur sont les écrans. Ce qui veut dire que la famille de handicaps qui connait le plus de barrières, et qui demande donc le plus d’attention (dans ce domaine), ce sont les handicaps visuels. On parle aussi bien d’acuité visuelle que de perceptions des couleurs et des contrastes. Nativement la plupart des ordinateurs offrent un mode d’accessibilité, incluant un mode à fort contraste ou encore un lecteur automatique. Cependant, pour fonctionner, il faut que les applications aient intégré quelques règles dans leur code. Regardons ensemble quelques techniques à mettre en place !

Contraste

En parlant de contraste, c’est l’un des premiers sujets qui permet d’améliorer l’accessibilité d’un site. En effet, les couleurs que vous utilisez sont peut-être difficilement visibles / distinguables pour certaines personnes. Le choix de la palette de votre produit, c’est déjà de l’a11y. De nombreux sites de colorimétrie vous propose un ratio de contraste pour vérifier cela, mais je vous conseille Who Can Use, qui liste plusieurs déficiences visuelles et comment elles sont impactées par vos choix, et vous donnant un résultat (succès ou échec) par rapport aux WCAG (Web Content Accessibility Guidelines, écrites par la WAI dont nous avons parlé en introduction).

Sémantique

Grâce aux évolutions modernes du CSS et des frameworks comme Angular et React, il est presque possible d’écrire toute une application web avec la balise HTML div. Pourtant, le HTML comprend des dizaines et des dizaines de balises ! Pourquoi s’embêter alors si une seule suffit ? Parce qu’en plus d’un support natif (avec les liens <a> par exemple), les balises ont une sémantique (elles ont un sens précis). Une section n’est pas une navbar, qui n’est pas un article, ni une figure… Et les moteurs de lectures à voix haute, ainsi que la navigation au clavier, se basent sur cette structure sémantique pour identifier les éléments d’importances, les blocs, et leur rôles. Je ne dis pas qu’il faut utiliser toutes les balises dans chaque projet, mais éviter d’utiliser une div « par défaut » est déjà un progrès. Faites le test sur n’importe quel site : sélectionnez un élément avec votre souris (par exemple, un champs de formulaire), et appuyer successivement sur la touche tabulation de votre clavier. Si le curseur de sélection se déplace comme vous vous y attendiez, la sémantique est bonne. Sinon, il faut probablement revoir la structure !

De même les attributs HTML sont là à votre secours : le type d’un bouton, le titre (« alt ») d’une image, sont aussi là pour ça. Les IDE modernes connaissent nativement les attributs possibles, je vous encourage à les remplir quand cela est nécessaire. On évitera aussi des liens vides, uniquement stylisés et utilisés dans la partie javascript sans contexte dans le HTML.

ARIA

Ah oui, en introduction, j’ai lancé un mot mystère : ARIA. Pour Accessible Rich Internet Applications, « applications internet riches et accessibles », c’est un ensemble d’attributs qui vient en complément de l’HTML, pour aider les lecteurs automatiques et donner du contexte. Ils permettent notamment de palier au manque de sémantique des balises HTML dans certains cas. Il existe encore plus d’attributs ARIA que de balises, et si le sujet vous intéresse, je vous invite à consulter la documentation MDN associée. Les attributs vont du rôle, à la modification dynamique de zone, en passant par les états ou encore les aria-labels. Attention la documentation officielle d’ARIA (par la WAI, encore une fois) commence par une mise en garde : pas d’ARIA c’est mieux que du mauvais ARIA !

Nouvelles technologies

Si l’utilisateur ne peut pas (ou peu) se fier à sa vision, on pourra alors se reposer sur des feedbacks audio :  de la simple sonnerie à la lecture automatique du contenu de la page comme nous l’avons évoqué précédemment. Mais plus encore, l’arrivée sur le marché d’un nombre toujours plus grand d’assistants vocaux (comme Alexa, Siri, MyCroft, …) fut une véritable révolution pour beaucoup de personnes, en leur offrant plus d’autonomie sans le joug des écrans. L’arrivée des intelligences artificielles avec une compréhension toujours plus fine est aussi une grande avancée, et le meilleur est à venir.

Je vous invite à regarder cette vidéo époustouflante qui montre l’importance de l’accessibilité, et ce qu’une bonne intégration apporte : Comment un développeur aveugle utilise Visual Studio.

#4 État de l’art de l’accessibilité

D’après une étude réalisée tous les ans par le Center for Persons with Disabilities de l’université de l’Utah sur un million de pages d’accueils des sites les plus connus comme google.com, facebook.com, twitter.com,… (liste complète ici), en février 2020, 98.1% des pages n’étaient pas conformes au WCAG ! C’est dire si le sujet est peu pris au sérieux, même par les grands groupes. En France, on estime pourtant le nombre de personnes atteintes de handicap visuel à plus de 1,7 million de personnes. Si l’accessibilité est pensée dès le début d’un projet, elle est facile à mettre en place, et d’autant plus importante que la portée est publique.

Et si jamais vous voulez tester votre site à l’heure actuelle, l’étude précédente repose sur un outil disponible en ligne gratuitement, il suffit de rentrer votre adresse sur le site : WAVE by WebAim

La technologie ne doit jamais devenir un frein, mais au contraire une chance pour tou•te•s. Prendre conscience de ce qu’est l’accessibilité et de ce qui peut être fait est un des meilleurs moyens d’ouvrir son application à l’audience la plus large possible. Cet article n’est qu’une introduction, et le sujet est très vaste, à vous de faire vos recherches 😉