inclusivité

La conception inclusive pour le web

Avec l'évolution des usages, de plus en plus de services sont disponibles sur internet. Cependant, un très grand nombre de sites web sont encore loin de proposer une conception inclusive, adaptée aux utilisateurs-trices ayant des déficiences visuelles, auditives, motrices ou encore cognitives.

spinner

Comment rendre les sites internet plus accessibles pour les utilisateurs qui souffrent de handicap ?


L'accessibilité numérique ne se limite pas à proposer une typographie contrastée ou encore à utiliser les balises ALT et TITLE. Rendre les sites internet plus accessibles consiste davantage à utiliser le langage HTML pour qu'il est un objectif et un réel sens, plutôt que de s'en servir uniquement pour aboutir à un résultat purement esthétique.
Une intégration pensée pour répondre à un objectif d'inclusivité permettra aux navigateurs de proposer de manière optimisée les contenus recherchés par le plus grand nombre d'utilisateurs et ainsi, faciliter l'accès aux utilisateurs handicapés.

Avant d’aller plus loin, sachez que le W3C partage des recommandations pour la conception de sites web accessibles. Pour en savoir davantage, je vous invite à consulter ces recommandations pour plus de détails : Tips for Getting Started (W3↗︎).

Handicap moteur

En France, on estime qu’un million cinq cent mille personnes souffrent d'un handicap moteur (source: Handi-Pacte↗︎). Ces personnes peuvent être des utilisateurs qui rencontrent des difficultés avec l’utilisation d’une souris, objet qui demande de la précision, ou encore d’un clavier, par exemple lorsqu’il est nécessaire de maintenir plusieurs touches simultanément pour effectuer une opération.

Pour ces problématiques, des optimisations devraient être proposées grâce à une conception plus inclusive des sites internet. Les imagemaps par exemple (W3Schools↗︎) ne sont pas recommandées, car elles demandent une utilisation unique de la souris. Pour les sites qui présentent une solution de cartographie, il est conseillé de proposer une alternative pour permettre d’accéder à une information, voire à une page grâce à un contrôle via le clavier ou encore la voix et la vue.

Handicap visuel

En France, 1,7 million de personnes sont atteintes d’un trouble de la vision (source : Aveugles de France↗︎). Les problèmes d'accessibilité les plus importants concernent les utilisateurs aveugles ou qui ont d'autres handicaps visuels. En effet, la grande majorité des pages des sites sont très visuelles. Par exemple, il est courant de voir des sites qui présentent des associations de couleurs de premier plan et d’arrière-plan qui rendent les pages pratiquement illisibles pour les utilisateurs daltoniens.

N’en déplaise à nos amis référenceurs, les pages qui présentent du contenu sont relativement accessibles pour les utilisateurs qui souffrent de déficience visuelle, car le texte peut être lu par un lecteur d’écran. Néanmoins, la quantité de contenu reste problématique, car, tout comme pour n’importe quel utilisateur qui recherche une information en particulier, plus le texte est important, plus il est difficile de trouver le contenu précisément recherché. C’est pourquoi, le balisage est essentiel et le respect de la structure sémantique – un seul H1 pour le titre de la page, puis des H2 pour les parties principales et des H3 pour les sections plus précises - permettra d’avoir une vue d’ensemble et ainsi, accéder rapidement à la section souhaitée en demandant simplement au lecteur d’écran de l’atteindre directement grâce à la lecture des titres en premier lieu.

Je l’ai abordé en introduction, mais les attributs ALT sont également importants pour fournir un texte alternatif aux images. Au-delà d’avoir un nommage correct des visuels, il est conseillé d’aller plus loin en intégrant un texte descriptif de l’image en question. Objectif : verbaliser de manière utile le rôle ou le sens du visuel. Par exemple pour l’image ci-dessous, le contenu pourrait être “”.

La taille et le choix de la typographie ont également leur importance. En effet, de nombreux utilisateurs peuvent avoir une vue réduite, ils ont donc généralement besoin de polices de plus grandes tailles pour visualiser les contenus. C’est pourquoi il est recommandé d’encoder les tailles des textes en relative plutôt qu’en absolu. Le style intégré en pourcentage permettra ainsi au texte de s’adapter en fonction du choix des utilisateurs de le visualiser en plus grand, sans que cela n’altère l’apparence initiale de la page du site. Pour tester le rendu visuel, il est recommandé de tester les UI avec la taille par défaut des polices pour le contenu, soit 12, 14 ou 16 points en fonction des fonts et de tester la projection avec les tailles 18, 20 ou 24 points afin de se rendre compte que l’aspect fonctionne toujours avec cette adaptation liée à l’accessibilité.

Handicap auditif

En France métropolitaine, 5 182 000 personnes ont un handicap auditif, dont 303 000 souffrent d'une déficience auditive profonde ou totale (source : Direction de la recherche, des études, de l'évaluation et des statistiques↗︎).
Les utilisateurs ayant une déficience auditive sont moins impactées par les problématiques d’accessibilité, car il est rare qu’un site internet propose aujourd’hui des effets sonores. Cependant, l’attention est à porter sur les contenus que peuvent proposer les sites. Les vidéos par exemple doivent être accessibles grâce à des sous-titres, ceci pour permettre de profiter du contenu.

Déficiences cognitives

Un constat actuel : internet n’est pas accessible pour toutes et tous. Certains utilisateurs ont des troubles cognitifs qui rendent l’utilisabilité d’un site internet plus complexe. Un exemple, les personnes plus jeunes auront plus de facilité à comprendre rapidement où et comment trouver l’information par rapport à des personnes plus âgées. Il est donc nécessaire de réfléchir à une navigation simple - non simpliste - pour permettre aux utilisateurs de tous niveaux de facilement parcourir le site et accéder aux informations recherchées.

Parmi les éléments qui peuvent facilement être mis en place : le fil d’ariane. Il permet d’indiquer aux utilisateurs où ils se situent par rapport à la page d’accueil du site. Le plan de site peut lui aussi être consulté par des utilisateurs qui ont des difficultés à comprendre l’architecture de l’information.
Un autre exemple avec un fonctionnel que l’on peut retrouver sur de nombreux sites : le moteur de recherche. Dans la plupart des interfaces utilisateurs, ce moteur est plus contreproductif. La raison ? Il demande aux personnes de renseigner des mots clés comme termes de recherche. Cependant, les utilisateurs ayant des problèmes d’orthographe, voire les utilisateurs de langues étrangères, ne pourront pas accéder au contenu souhaité, car une orthographe parfaite est très souvent requise.

Une solution pour éviter cet écueil : inclure un vérificateur d’orthographe pour proposer des suggestions de recherche correctes ou similaires. Cela permettra d’obtenir des résultats pertinents et offrira un confort de navigation non important.

Conclusion sur la conception inclusive pour le web

Proposer un site internet inclusif à 100% reste utopique, car il faut prendre en considération l'ensemble des éléments, tant la connaissance des utilisateurs que les différentes expertises techniques. Malgré les compromis qui sont fait lors de la conception globale, il est cependant essentiel d'intégrer les fondamentaux pour permettre d'offrir une expérience utilisateur la meilleure possible et pour le plus grand nombre de personnes.

Page suivante

WIP