Les règles/ critères d’accessibilité en UX
La disposition croissante de ressources d’information sur le Web est passée d’une simple interface texte à des conceptions dynamiques et interactives. Bien que cette mesure ait permis aux utilisateurs de vivre une expérience plus créative et plus souple, il y a des risques que certains soient exclus parce qu’ils ne peuvent pas utiliser des méthodes d’accès standard. Des études en UX research ont montré que les personnes en situation de handicap sont les plus à risque d’être exclues de l’accès, en particulier les personnes aveugles ou malvoyantes utilisant des technologies d’assistance telles que les lecteurs d’écran. Cet article passe en revue certaines questions clés liées à l’accessibilité en UX, à la détermination des méthodes d’accès, aux principes d’accessibilité et de convivialité et à la façon d’évaluer cela.
L’accessibilité numérique, c’est quoi ?
L’accessibilité numérique signifie que les personnes en situation de handicap ont accès à l’utilisation d’internet. Plus précisément, ces personnes arrivent à interagir facilement et efficacement avec le produit ou le service digital en question.
L’accessibilité numérique repose sur la conception des sites Web flexibles répondant aux différents besoins des utilisateurs. Cette flexibilité augmente également la convivialité générale et permet aux personnes sans handicap d’utiliser des sites Web selon leurs préférences, comme l’utilisation du navigateur qu’elles veulent et l’utilisation de raccourcis clavier.
L’accessibilité numérique, pourquoi est-ce important ?
Des études montrent que, malgré une sensibilisation croissante aux problèmes d’accessibilité numérique, les utilisateurs en situation de handicape se heurtent toujours à des obstacles à l’accès. Voici quelques faits objectifs pour bien comprendre l’importance de l’accessibilité numérique :
- Il est fort probable, dans le cas où votre entreprise opère dans un environnement développé, qu’il y a une obligation légale qui dénit la discrimination contre les personnes handicapées si vous avez un site web. D’ailleurs, la loi française n°2005-102 du 11 février 2005, pour l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées, veut rendre accessibles tous les services de communication publique en ligne de l’État, des collectivités territoriales et des établissements publics qui en dépendent.
Pour en savoir plus : Le Référentiel général d’amélioration de l’accessibilité (RGAA)
- C’est un point positif sur le plan financier, car les personnes handicapées représentent jusqu’à 15% de la population. Si vous les négligez, soyez sûr que l’un de vos concurrents ne le fera pas.
- L’accessibilité numérique permet de bonifier votre SEO.
Les personnes concernées :
Plusieurs utilisateurs d’internet ont des limitations, des incapacités et des invalidités qui constituent une sorte de barrière face à leur accès au web.
Concevoir pour l’accessibilité signifie accepter que, pour les sites Web, il y a :
- Aucun utilisateur standard (consommateur/personne d’information) utilisant le web
- Aucun dispositif standard dédié à la navigation sur le web.
Bien qu’il existe de nombreuses incapacités qui peuvent conditionner l’utilisation du web pour certains utilisateurs, voyons les différentes catégories fréquentes de déficiences :
- Les personnes ayant une basse vision :
Ce sont en effet, les personnes non voyantes, incapables de voir l’information visuelle, ou qui souffrent d’autres anomalies de vision telles que le daltonisme (le manque de perception de beaucoup de couleurs), la basse vision (une personne qui peut avoir besoin de grandes polices ou loupes), et d’autres troubles de la vue qui risquent d’apparaître chez les seniors.
Les personnes aveugles naviguent habituellement à l’aide du clavier seulement et utilisent des lecteurs d’écran, des écrans en braille, des entrées vocales et/ou des loupes d’écran. Parmi les besoins de ce groupe, il y a des équivalents textuels significatifs pour qu’un lecteur d’écran puisse “lire” l’information. Des exemples de la façon de fournir du contenu accessible aux déficients visuels incluent l’utilisation d’attributs “alt” pour les images et de descriptions audio pour les vidéos.
Les personnes qui ont des déficiences de couleur peuvent avoir l’incapacité de distinguer les différences entre certaines couleurs, de sorte qu’elles peuvent avoir besoin d’un contraste plus élevé pour distinguer les couleurs et d’autres façons d’identifier le contenu coloré.
- Les personnes à mobilité réduite
Les personnes ayant une déficience motrice/motrice/dextérité ont de la difficulté à déplacer une ou plusieurs parties du corps. Il peut s’agir :
- Paralysie totale ou partielle
- Traumatismes liés au stress répétitif (MTR)
- Arthrite
- Accident vasculaire cérébral
- SLA (sclérose latérale artérielle; maladie de Lou Gehrig)
- Maladie de Parkinson
- Lésions médullaires
- Paralysie cérébrale
- Perte de membres ou de chiffres
- Faible dextérité (incapacité d’utiliser un dispositif de pointage comme une souris et doit plutôt utiliser un clavier ou un commutateur)
Ce groupe peut éprouver des difficultés à utiliser la souris ou le clavier. Les technologies d’assistance utilisées par les personnes ayant une déficience motrice comprennent d’autres options d’entrée (par exemple les commandes vocales).
Pour rappel, lire : Qu’est-ce qu’une Voice User Interface ?
- Les personnes sourdes ou malentendantes
Une personne sourde est une personne ayant une déficience auditive profonde tandis qu’une personne malentendante est une personne qui ne peut pas entendre les sons de façon fiable.
Les technologies d’assistance utilisées par ce groupe comprennent le sous-titrage et les transcriptions.
- Les personnes ayant une déficience cognitive
La déficience cognitive fait références à : les difficultés d’apprentissage, le trouble déficitaire de l’attention, la dyslexie, la faible compréhension (difficulté à comprendre le contenu, le texte ou autre), le faible niveau de lecture (difficulté à lire le texte), les troubles cognitifs, la perte de la fonction cérébrale, la perte de mémoire à court terme, l’épilepsie, etc..
Les déficiences cognitives impactent la capacité d’accéder à l’information, de la traiter ou de s’en souvenir tout en limitant la capacité de percevoir, de reconnaître, de comprendre, et d’interpréter le sens. Les technologies d’assistance utilisées par ce groupe comprennent des aides à la prédiction de mots, des aides à la compréhension de la lecture et de l’écriture.
Quelques conseils pour un site web plus accessible
Tout d’abord, l’étape cruciale consiste à bien choisir son CMS (Content management system).
Ensuite ;
- Assurez-vous que votre site est compatible avec le clavier
Plus simplement : pour qu’un site Web soit facilement abordable, il doit fonctionner sans l’utilisation d’une souris. C’est parce que de nombreuses technologies d’assistance reposent uniquement sur la navigation via le clavier.
La façon la plus fréquente de naviguer à l’aide d’un clavier est d’utiliser la touche Tab (la touche située juste au-dessus de la touche Verrouiller Maj). Cela permet de se déplacer entre les zones d’une page qui peuvent être « basées sur le clavier », y compris les liens, les boutons …etc.
En conséquence, un designer UX doit s’assurer que le contenu web peut être accessible avec les touches d’un clavier.
- Vérifiez que l’intégralité du contenu est facilement accessible
À part rendre le site en entier accessible avec les touches d’un clavier, il faut également vérifier que son contenu l’est également. Bien que ce ne soit pas un obstacle , ceci peut être limitant dans certains cas.
Pour cela, il faut utiliser des repères ARIA. Ce sont des balises qui structurent le contenu de votre page web de manière claire et nette. Vous pouvez étiqueter tout contenu dynamique comme une zone live, ceci aide les utilisateurs des lecteurs d’écran de mieux assimiler le contenu.
L’attribut ARIA sert également à rendre la navigation plus simple car il facilite le passage direct au contenu principal. Autrement dit, les utilisateurs peuvent atteindre le contenu spécifique directement.
- Ajoutez l’attribut ALT pour toutes les images
L’attribut ALT ou “texte alternatif” sur WordPress est un attribut ajouté à une balise d’image en HTML. Il s’affiche lors d’un souci de téléchargement d’une image.
Cependant, les lecteurs d’écran accèdent aussi au texte de remplacement pour « lire » l’image. Ce champ vous offre alors la possibilité de décrire une image et la mettre dans un contexte pour les utilisateurs qui le manqueraient.
En outre, l’option “alt text” contribue à l’amélioration du référencement du site web, donnant aux moteurs de recherche plus d’informations à parcourir. Pensez à ajouter des descriptions de vos images en insérant vos mots clés.
- Choisissez soigneusement vos couleurs
On entend souvent parler de daltonisme comme s’il s’agissait d’un problème de perception des couleurs noir et blanc. Cependant, plus d’un spectre y sont impliqués dans cette maladie, puisque plusieurs personnes aperçoivent les couleurs d’une façon spécifique relative à ce trouble. Dans ce contexte, il est impératif de vérifier le contraste des couleurs sur votre site web afin de garantir que tous les utilisateurs puissent différencier entre les composantes du site.
Il existe de nombreuses applications en ligne qui peuvent vous aider à combiner les couleurs et tester ces combinaisons à l’instar de WebAIM et Contrast Checker. Ce dernier vous offre la possibilité de passer au monochrome pour tester l’efficacité d’une combinaison donnée.
- Optimisez votre architecture d’informations
L’architecture de l’information est la structuration des informations d’un site web ou d’une application mobile pour faciliter la navigation et la repérabilité.
Pour réussir à avoir une bonne architecture d’informations, il est essentiel de mettre en avant l’accessibilité numérique, pour ce faire :
- Les titres des pages doivent être clairs et faciliter l’orientation de chaque page.
- Vous devez proposer une panoplie de choix de navigation sur votre site web à l’instar d’une table des matières, un plan du site, des liens ou une fonction de recherche.
- Chacune de vos pages web doivent indiquer clairement le changement de langues pour faciliter l’accès aux utilisateurs ayant des lecteurs d’écran, des troubles cognitifs ou des logiciels de traduction en braille.
- Optez pour des simulateurs dans votre architecture d’informations pour permettre à vos utilisateurs d’accéder facilement aux commandes en utilisant seulement un lecteur d’écran.
- Concevez vos formulaires pour l’accessibilité
Les formulaires constituent un ajout très pratique à la majorité des sites, toutefois ils doivent être employés soigneusement. Il faut penser à clarifier les champs en les étiquetant. En effet, un utilisateur n’ayant aucun cas de handicap peut correspondre les étiquettes aux champs relatifs sans difficultés. Par contre, cela risque d’être problématique pour les utilisateurs ayant une insuffisance visuelle par exemple.
- N’utilisez les tableaux que pour les données tabulaires
Les tableaux sont plus pratiques pour présenter les données, ils facilitent en effet l’analyse de ces dernières même pour les utilisateurs qui se servent de la technologie d’assistance. Pour obtenir le maximum d’avantages, vous devez opter pour la simplicité de l’apparence de vos tableaux.
En outre, il est déconseillé d’utiliser des tableaux pour les données non tabulaires. Cela peut être frustrant pour les lecteurs d’écran et les autres dispositifs similaires.
- Activez le texte redimensionnable
La majorité des dispositifs permet de redimensionner le texte, ceci est utile surtout pour les utilisateurs avec une insuffisance visuelle. Cependant,
si votre site ne présente pas cette option, vous risquez de nuire au parcours UX.
La meilleure solution est d’éviter de spécifier la taille du texte au départ et d’opter pour des tailles relatives.
Vous ne devriez jamais désactiver l’évolutivité de l’utilisateur, car il sera difficile pour les utilisateurs de redimensionner le texte.
Pour vérifier la correspondance de votre site à ces conditions, testez soigneusement la taille de vos polices en modifiant le niveau de zoom dans votre propre navigateur.
- Évitez la lecture automatique des médias
La lecture automatique des fichiers multimédias a été un fléau des internautes depuis les jours de MySpace. Avoir un contenu flash qui commence pendant le chargement d’une page est assez ennuyeux, mais c’est aussi problématique en termes d’accessibilité.
Par exemple, il devient compliqué de savoir comment éteindre les médias à l’aide d’un lecteur d’écran, surtout que le bruit soudain peut troubler et même effrayer certains utilisateurs. Il est donc à éviter d’inclure des composants qui démarrent sans l’autorisation de l’utilisateur.
Il est aussi conseillé d’éviter la navigation automatique, cela peut être déconcertant pour un utilisateur qui prend son temps pour assimiler les informations d’une page avant de passer à une autre.
- Créez du contenu en gardant l’accessibilité à l’esprit
Au final, nous abordons le core de votre site : son contenu. Même si la réalisation d’un site web accessible est très importante, il faut tenir compte des mêmes considérations lors de la création de contenu.
Ceci dénote un style d’écriture fluide, l’attribution des noms descriptifs et textes d’ancrage à tous vos liens uniques … etc.
Mot de la fin
Le concept général d’accessibilité, qui s’appliquait auparavant aux espaces physiques, publics et privés, s’applique maintenant au monde numérique, grâce à la popularité généralisée de l’Internet.
Les nouvelles technologies, les litiges, les stratégies commerciales et d’autres continuent de faire avancer la définition de l’accessibilité numérique et l’UX/UI Design y joue un rôle essentiel.
Aujourd’hui, cette définition s’est étendue aux médias numériques, comme les sites Web et les applications mobiles. Internet continue de fournir des solutions numériques à un public plus large, ce qui oblige les UX/UI Designers à intégrer des éléments d’accessibilité numérique.