MON 1.1 - Handicap ou pas cap : créer une UI inclusive ✅

Tags :
  • MON
  • 2024-2025
  • temps 1
  • UI/UX
Auteurs :
  • Inès Kebbab

Comprendre comment et réaliser une UI/UX inclusive.

Avoir déjà utilisé Figma ou une maquette d'interface.

L'objectif de ce MON est de comprendre comment penser et adapter les interfaces pour une expérience plus inclusive, notamment pour les utilisateurs en situation de handicap.

Le MON s'adresse aux débutants

Objectifs du MON

L'étude se découpera en deux temps : comprendre et réaliser.

  1. Comprendre :

    • Les aspects théoriques : typologie des différents handicaps et difficultés à prendre en compte (auditifs, visuels, troubles dys...), statistiques...
    • Les bonnes pratiques : comment rendre un site adapté aux différents utilisateurs et les erreurs à éviter ; méthode FALC ; design, notion de contraste, choix graphiques...
    • Quelques études de cas : identification et analyse critique de quelques sites inclusifs et d'exemples de sites peu adaptés.
    • Les limites possibles.
  2. Réaliser une interface inclusive, via une maquette Figma en apportant des corrections et/ou améliorations à des components et ainsi s'approprier les bonnes pratiques. ()

À noter, le prisme du handicap permet de répondre aussi à d'autres types de réflexions pour penser une UI/UX accessible au plus grand nombre de persona (âge et fracture générationnelle, niveaux d'éducation variés, niveaux de langues...). F

Introduction

A - C’est quoi l’accessibilité ?

Certains composants des interfaces web excluent les utilisateurs porteurs d’un handicap (permanent ou temporaire) : ce nombre est estimé à 15% des utilisateurs… soit près d**’1 milliard d’internautes** pour lesquels le web n’est pas un long fleuve tranquille !

Concrètement, le terme handicap désigne “la limitation des possibilités d’interaction d’un individu avec son environnement, causée par une déficience provoquant une incapacité, permanente ou non. Il exprime une déficience vis-à-vis d’un environnement, que ce soit en termes d**’accessibilité, d’expression, de compréhension ou d’appréhension**. Il s’agit donc plus d’une notion sociale que d’une notion médicale.” (source : Comité national Coordination Action Handicap - CCAH)

Un handicap est d’ailleurs le plus souvent invisible (80% des handicaps) et s’acquiert au cours de la vie (85% VS 15% à la naissance) : tout le monde pourrait donc un jour être concerné par ces sujets.

Dans un monde où le digital est toujours plus important, pour s’informer ou un besoin administratif en passant aux interactions sociales, il est nécessaire que ces supports soient adaptés à tous. Pour cela, il est important de d’abord prendre conscience de ce qui se cache concrètement derrière ce terme, très vaste.

Concrètement, il y a 4 principes fondamentaux autour d’un contenu inclusif (site ou appli) :

  1. Le site doit être perceptible (image, son et toucher) ;
  2. Le site doit être utilisable (avec des alternatives à la souris) ;
  3. Le site doit être compréhensible et clair (il guide les utilisateurs si nécessaire) ;
  4. Le site doit être robuste et pouvoir être compatible à différents contextes ou outils (comme un lecteur d’écran par exemple).

B - Les types de handicap

Il y a différentes typologies de handicap :

À noter, la notion de comorbidité (présence de plusieurs troubles en simultanée), notamment dans les handicaps cognitifs et psychiques (TDAH, autisme,…).

C - Pourquoi l’accessibilité est incontournable ?

Tout d’abord, un design accessible n’est pas uniquement bénéfique à une minorité, mais bien à l’ensemble des utilisateurs : privilégier une interface claire, simple, prévisible et offrant une expérience fluide, c’est faire une interface qui sera davantage utilisée. De même, l’ajout de sous-titres au vidéo ajoute généralement un confort supplémentaire aux utilisateurs. On notera aussi l’importance d’avoir une interface aérée avec des textes légers (a contrario de pavés de textes denses) parmi les bonnes pratiques pour une bonne expérience UX, et non uniquement pour les personnes porteurs d’un trouble cognitif ou mental.

Si cela ne vous a pas convaincu, peut-être que l’influence de la prise en compte des enjeux d’accessibilité dans le référencement sur les moteurs de recherche vous motivera davantage (aka le SEO). Les balises textes Alt pour les images ou les transcripts pour les vidéos sont d’autant plus de contenus où injecter ses mots clés en SEO, tout comme les balises titres si elles sont bien hiérarchisées… Google a des critères liés à l’accessibilité dans son algorithme de SEO pour le référencement naturel.

Et si vous n’êtes toujours pas prêt à franchir le pas, c’est bien dommage car la loi française impose des obligations légales en matière d’accessibilité numérique avec le Référentiel Général d’Accessibilité pour les Administrations (RGAA) pour les organisations publiques, d’intérêt général et les entreprises dont le chiffre d’affaires dépasse 250 millions d’euros . Ce cadre est restreint et plus généralement, on observe que seulement 50% des sites de l’internet français répondent aux critères… Néanmoins, pour les chanceux soumis au RGAA, on notera que le manquement à ces obligations déclaratives peut entraîner une sanction financière d’un montant de 20 000 euros par service en ligne.

Alors, prêt(e) à créer des interfaces plus inclusives ?

Quelles sont les règles pour un web accessible ?

L’accessibilité du web, ce n’est pas un sujet nouveau : la première initiative internationales, la Web Accessibility Initiative (WAI), est lancée dès 1997 par la Word Wide Web Consortium (W3C).

La WAI (ou WCAG) est un ensemble de recommandations pour faciliter l’accès aux personnes en situation de handicap ou les seniors. En France, le RGAA traduit le WAI en 106 critères opérationnels à respecter pour un site.

S’il s’agit généralement de bon sens ou d’utiliser certains outils à bon escient, d’autres solutions sont plus complexes à implémenter dans les sites. À noter, il est généralement plus simple de prendre en compte l’accessibilité dès le début d’un projet pour ne pas avoir à revenir dessus plus tard.

A- Les règles pour des contenus webs accessibles (WCAG)

Il existe 13 règles différentes pour la version 2 du référentiel (à noter, une version 3 est en construction mais est encore à l’état de brouillon), organisées dans les 4 principes présentées précédemment : Perceptible, Utilisable, Compréhensible, Robuste. Lire les 13 règles en bref à ce lien.

Il propose aussi un détail de ces 13 règles, les techniques et conseils pour l’implémenter et les choses à ne pas faire : cela permet aussi de questionner comment on aborde toutes les fonctionnalités et les interactions. Retrouvez le détail de comment suivre les recommandations de la WCAG 2.2 à ce lien.

A chaque règle, des critères de succès sont proposés pour s’évaluer par rapport à trois niveaux : A, AA et AAA (le A étant le plus bas et le AAA le plus “réussi”).

D’autres règles existent, notamment l’ATAG davantage à destination des développeurs et l’UAAG tournés davantage vers l’utilisateur (les navigateurs, les agents d’accessibilité, les lecteurs de médias).

B - C’est quoi le WAI-ARIA ?

C’est un nouveau système d’attributs (à glisser dans HTML CSS) qui ajoute de la sémantique pour mieux appréhender les contrôles d’interface complexes (souvent en Javascript), cela permet de pouvoir annoncer et décrire les actions exécutées et permettre d’avoir une arborescence plus accessible (’Accessibility Tree’). Par exemple, cela permet d’avoir une indication sonore lorsqu’on coche ou décoche une checkbox.

Néanmoins, cela ne permet ni de modifier l’apparence de l’élément, de modifier son fonctionnement, d’ajouter un “focus” ou de gérer la gestion au clavier des actions.

Il se base sur :

  1. Les rôles (navigation, search,..) qui généralement définit ce que l’élément est ou fait ;
  2. Les propriétés qui définissent les éléments et ne changent pas selon l’interaction (ex. “aria-required="true" indiquera qu'un champ doit être renseigné afin que le formulaire soit valide);
  3. Les états qui définissent les conditions actuelles de l’élément (case cochée ou décochée par exemple). Comme ces conditions peuvent changer, les états sont généralement mis à jour à l’aide d’un script Javascript.

Les fonctionnalités WAI-ARIA sont généralement prise en charge par tous les navigateurs, néanmoins tous les lecteurs d’écrans ne sont pas compatibles.

De plus, il faut veiller à utiliser ces fonctionnalités à bon escient (et pas dans tous les éléments HTML), qui auront une utilité pour un usage pratique.

Certains langages les ont aussi adapté pour avoir des components implémentant automatiquement les fonctionnalités ARIA pour l’accessibilité, comme le REACT-ARIA. Pour rendre un site accessible, il faut à la fois une attention dans le design UI mais aussi un effort pour les développeurs, en bref, c’est un travail d’équipe !

C- C’est quoi le WAI-Adapt ?

WAI-Adapt permet aux utilisateurs d’adapter (ou « personnaliser ») la manière dont le contenu est présenté pour satisfaire leurs besoins et préférences. Parmi les exemples, on verra plus tard l’ancien site de la SCNF qui proposait de personnaliser la police, les contrastes, désactiver les animations… Le plus commun est de proposer de régler la taille de la police sur les pages.

De plus, cela peut se révéler utile comme certains utilisateurs ont des besoins contradictoires : certains utilisateurs comprendront mieux une information sous forme de texte et d’autres sous forme de symboles ou d’images.

Les bonnes pratiques

A - Une vue d’ensemble en 7 affiches : qu’en retenir ?

Les affiches de l’UK Home Office illustrent en 7 affiches les bonnes pratiques pour différents types d’utilisateurs :

On retrouve notamment des recommandations valables pour plusieurs utilisateurs :

Parfois, certaines recommandations sont contradictoires :

Il est aussi important de laisser le choix du mode de communication préféré pour les utilisateurs (dans les formulaires de contact notamment), ou de fournir un support suffisant aux utilisateurs pour les aider dans leurs démarches.

B - En HTML, le diable se cache dans les détails…

Finalement, les différents éléments ne sont pas sorciers : il s’agit de se forcer à utiliser les balises et le HTML pour structurer et le CSS pour la forme, comme prévu par l’esprit des deux langages !

C - Et en terme de design, à quoi faire attention ?

D - Une information “Facile À Lire et à Comprendre” (FALC) : que retenir ?

Pour la compréhension des informations, des règles ont été pensé pour notamment faciliter la compréhension aux personnes en situation de handicap (mais pas que, cela est aussi utile pour les personnes dont la langue du texte n’est pas leur langue maternelle). Ces règles sont notamment utilisées sur les sites du gouvernement français pour faciliter la compréhension aux différents utilisateurs. Il existe un logo pour repérer si le texte est FALC et respecte les recommandations.

La liste complète des recommandations dépasse la rédaction de texte, elle interroge aussi le système d’information choisi pour transmettre une information. Retrouvez la liste complète sur ce PDF, à parcourir pour les intéressés. Bien que beaucoup semblent être des règles de bons sens, il peut d’agir de rappels utiles (ex. éviter des documents trop longs).

Parmi elles, on trouve des conseils sur le choix des mots, sur des phrases qui s’adressent directement aux utilisateurs (”vous”)

Un conseil important est qu’il ne faut pas oublier de faire valider les supports par les personnes visées (notamment en cas de situation de handicap) et ne pas le présupposer pour eux ! Plusieurs associations proposent notamment ce genre de relecture.


Comment check si son site est accessible ?

Les problèmes majeurs :

Les outils :

Attention néanmoins, si de nombreux outils existent, il est toujours pertinent de faire vérifier l’accessibilité de notre site par un humain et de le faire tester par les personnes concernées !

Les outils Axe Core pour tester en développement (sur Github).

Il y a aussi le site Accessibility Checker pour vérifier la conformité avec la loi (en France ou à l’étranger) ou le site HTML_Code Sniffer pour la réglementation WCAG.

Des plugins Figma permettent aussi d’accompagner les web designers pour un design inclusif. En voici quelques uns qui me semblent pertinent :

Sur Wordpress, le CMS le plus utilisé, des plugins proposent aussi de résoudre les problèmes courants d’accessibilité.

Les extensions Chrome Tanaguru (audit accessibilité), ou Chrome Lens (simuler un handicap visuel). (NB. à condition qu’elles soient maintenues dans le temps)

Pour aller plus loin :

Le référentiel RGAA propose notamment avec ces 106 critères des tests et des méthodologies, parfaites pour les dev test-driven ! (Cela concerne les images, cadres, liens, couleurs, multimédias, tableaux, liens, scripts, la structure et présentation de l’information, les formulaires, la navigation et la consultation du site). Découvrez la liste complète sur leur site.


Quelques exemples :


Pour aller plus loin

Les bases de WAI-ARIA - mdn

Évaluer l’accessibilité Web - W3C, avec des outils et comment choisir ses outils (en anglais notamment)

https://webaim.org/

https://www.w3schools.com/accessibility/index.php


Bibliographie

https://ukhomeoffice.github.io/accessibility-posters/ (et VF ici par Vincent Valentin, à afficher dans vos bureaux pour y penser !)

https://accessibilite.numerique.gouv.fr/

https://www.w3.org/WAI/tips/developing/

https://www.w3.org/Translations/NOTE-UNDERSTANDING-WCAG20-fr/conformance.html#uc-levels-head

https://developer.mozilla.org/fr/docs/Learn/Accessibility/What_is_accessibility

https://web.dev/articles/accessibility?hl=fr

https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g

https://app.daily.dev/tags/accessibility?ref=roadmapsh

https://falc.unapei.org/

https://www.inclusion-europe.eu/wp-content/uploads/2017/06/FR_Information_for_all.pdf Règles Européenne du FALC

https://blog.lachouette.company/laccessibilité-web-au-sein-d-un-studio-de-design-et-de-développement-numérique-partie-n-2-61206134a296