6 façons simples d'améliorer l'accessibilité du web

Pratiquement tout le monde sait que l'expérience utilisateur (UX) est une considération importante lors de la création d'un site web ou d'une application. Personne ne veut utiliser une application non intuitive avec une interface utilisateur (UI) terrible.

Mais qu'en est-il de l'expérience utilisateur des personnes handicapées ?

Depuis le début des années 2000, le mouvement d'accessibilité web plaide pour un design web qui prend en compte les besoins des personnes handicapées. Certaines entreprises ont été poursuivies en justice pour avoir maintenu des sites web inaccessibles, les plaignants invoquant des dispositions de l'Americans with Disabilities Act.

L'accessibilité web est un domaine d'étude en pleine croissance, et les professionnels y prêtent attention. L'accessibilité web devient de plus en plus importante pour les entreprises et les développeurs, et certains designers UX ont commencé à intégrer le design accessible dans leur travail.

Cependant, l'accessibilité web et ses pratiques restent un mystère pour la plupart des gens.

Quelles sont les pratiques d'accessibilité ? Comment un site web est-il construit en tenant compte de l'accessibilité ? Quelles technologies les personnes handicapées utilisent-elles pour accéder à Internet, et comment pouvons-nous construire des sites web en tenant compte de ces technologies ?

Comment améliorer l'accessibilité web

Avant de travailler sur l'accessibilité d'un site web, considérez d'abord les types de déficiences pour lesquels vous optimisez. En général, les considérations d'accessibilité visent à répondre aux besoins des personnes ayant les déficiences suivantes :

• Déficiences visuelles (basse vision, cécité partielle ou totale, daltonisme)
• Déficiences auditives (surdité, malentendance, acouphènes, hyperacousie)
• Déficiences motrices ou dextérité (paralysie, paralysie cérébrale, blessures par effort répétitif telles que le syndrome du canal carpien)
• Déficiences cognitives qui affectent les compétences en résolution de problèmes, la mémoire et l'attention, les handicaps développementaux ou les difficultés d'apprentissage comme la dyslexie

Il y a une prise de conscience culturelle croissante de l'accessibilité web. Cependant, il y a encore beaucoup d'ambiguïté autour des technologies d'assistance qui aident les personnes handicapées à utiliser Internet.

Comprendre ces outils est essentiel pour mettre en œuvre des stratégies d'accessibilité réussies. Comment pouvez-vous créer des pratiques efficaces si vous ne connaissez pas la technologie autour de laquelle vous construisez et avec laquelle vous intégrez ?

Dans certains cas, les personnes handicapées n'ont besoin d'aucun logiciel ou matériel spécifique pour accéder efficacement à Internet. Au lieu de cela, pour que leurs besoins en matière d'accessibilité soient satisfaits, elles ont besoin que les propriétaires de sites web ou les créateurs de contenu fournissent des outils ou d'autres considérations.

Types de technologies d'assistance

La technologie d'assistance est le terme générique pour les dispositifs et outils d'assistance, d'adaptation et de réhabilitation utilisés par les personnes handicapées. Dans le contexte de l'accessibilité web, la technologie d'assistance est le logiciel et le matériel utilisés par les personnes handicapées pour accéder à Internet et l'utiliser.

La mise en œuvre de la méthodologie d'accessibilité web devient plus facile si vous considérez les besoins spécifiques des personnes handicapées. Il n'existe pas de solutions universelles, et différentes approches doivent être adoptées pour offrir une expérience utilisateur optimale en fonction du handicap.

Technologie d'assistance pour les personnes ayant des déficiences visuelles

Les personnes ayant des déficiences visuelles comme une basse vision ou la cécité peuvent nécessiter un logiciel de lecteur d'écran. Le logiciel de lecteur d'écran traduit les affichages de sites web en informations non visuelles via des convertisseurs texte-parole, des signaux sonores et des affichages Braille rafraîchissables. Le logiciel de grossissement d'écran est, comme son nom l'indique, un programme autonome qui agrandit les affichages numériques pour offrir une visualisation plus facile aux personnes ayant une basse vision.

Technologie d'assistance pour les personnes ayant des déficiences motrices

Les déficiences motrices ou de dextérité impliquent une perte partielle ou totale de la fonction d'une partie du corps, et peuvent inclure la perte du contrôle moteur grossier ou fin d'une personne. Cela peut inclure la paralysie, la paralysie cérébrale et les blessures par effort répétitif comme le syndrome du canal carpien.

Les personnes ayant des déficiences motrices ou de dextérité peuvent nécessiter un dispositif d'entrée alternatif, plutôt qu'un clavier et une souris traditionnels, pour utiliser et naviguer sur un ordinateur. Les dispositifs d'entrée alternatifs incluent des dispositifs de suivi de mouvement ou oculaire, des pointeurs de tête et des dispositifs d'entrée à commutateur unique. Plus tard, nous discuterons des choix de conception que les propriétaires de sites web peuvent faire pour faciliter l'expérience des personnes utilisant ces dispositifs.

Technologie d'assistance pour les personnes ayant des déficiences cognitives ou des troubles d'apprentissage

Contrairement aux déficiences visuelles ou motrices, les déficiences cognitives ou d'apprentissage ne sont pas souvent prises en compte dans les techniques et guides d'accessibilité web. Bien que la plupart des outils pour aider les personnes ayant des déficiences cognitives ou d'apprentissage soient construits du côté du développeur ou du designer web, des outils existants peuvent aider au développement de tels programmes personnalisés.

Les lecteurs de texte sont des programmes logiciels qui répètent le texte à l'écran avec une voix synthétisée. Pour plus de clarté, certaines options mettent en surbrillance le mot prononcé. Cependant, les lecteurs de texte ne sont généralement pas capables de lire des textes compliqués (comme les menus) ou des éléments non textuels (comme les images).

1. Utilisez correctement le balisage HTML

Que le designer web entre manuellement ou non le HTML, il est important de placer les en-têtes dans un ordre qui a du sens. Les lecteurs d'écran qui articulent les informations sur une page web utilisent les en-têtes comme points de repère.

Courtesy of Prototypr.io

Si le HTML d'une page est désordonné ou si les en-têtes ne sont pas utilisés correctement, les utilisateurs accédant à un site web avec un lecteur d'écran auront des difficultés à naviguer.

L'élément H1 doit être utilisé pour les idées principales d'une page avec des en-têtes subséquents (H2, H3, etc.) suivant un schéma logique basé sur le sujet. Cela aide les utilisateurs à comprendre la page et la relation entre les éléments qui s'y trouvent.

Les liens doivent également décrire avec précision la page vers laquelle les utilisateurs seront dirigés. Les liens qui se contentent de lire "Cliquez ici" ou "En savoir plus" ne disent rien aux utilisateurs sur le contenu de la page web.

2. Incluez un texte alternatif d'image succinct et descriptif

Le texte alternatif est souvent oublié lorsque des images sont ajoutées aux pages web. Après tout, la plupart des gens n'utilisent le texte alternatif que lorsqu'ils recherchent des images dans un moteur de recherche ou effectuent une recherche d'image inversée.

Mais pour les personnes utilisant des lecteurs d'écran, le texte alternatif est tout ce sur quoi elles peuvent compter pour en savoir plus sur une image affichée. Les utilisateurs peuvent être confus si le texte alternatif d'une image n'est pas modifié ou n'est pas nécessairement représentatif de ce que l'image représente. Cela est particulièrement préjudiciable si l'image est essentielle à la compréhension de la page web.

Dans cet esprit, il est bon de ne pas utiliser d'images comme éléments de navigation ou comme seul contenu d'un blog. Lors de la rédaction du texte alternatif, assurez-vous que la description est précise mais pas trop verbeuse. Cela aidera également à l'optimisation des moteurs de recherche (SEO). L'utilisation d'un HTML propre et réfléchi aide à la fois le SEO et l'accessibilité web, vous pouvez donc faire d'une pierre deux coups.

3. Considérez les options CAPTCHA

Un complètement automatisé public Test de Turing pour différencier les computers et les humains, souvent abrégé en CAPTCHA, est un outil judicieusement — bien que terriblement — nommé. Les CAPTCHAs sont particulièrement courants sur les écrans de connexion pour vérifier que la personne qui se connecte est bien un humain et non un robot spammeur.

Les CAPTCHAs présentent souvent aux utilisateurs une image de lettres déformées qui doivent être saisies dans une zone de texte avant de permettre aux utilisateurs de continuer. Aussi utiles qu'ils soient pour prévenir le spam, ils posent un certain nombre de problèmes pour les personnes ayant des besoins en matière d'accessibilité.

Les CAPTCHAs peuvent être particulièrement déroutants pour ceux qui ont une dyslexie ou certaines difficultés cognitives. Certaines images CAPTCHA ne prennent pas en compte les personnes daltoniennes, qui peuvent ne pas être en mesure de différencier les lettres de l'arrière-plan. Les images CAPTCHA sont également illisibles par les lecteurs d'écran, mais ajouter la bonne réponse au texte alternatif sur la page pourrait annuler l'objectif du test.

Si les CAPTCHAs sont indispensables pour votre site web, assurez-vous qu'ils ont des options accessibles comme des tests basés sur l'audio ou le reCAPTCHA v3 de Google, qui permet aux utilisateurs de passer un test CAPTCHA simplement en cliquant sur une case.

4. Rendez le contenu vidéo accessible

Bien que les personnes ayant une déficience auditive puissent généralement utiliser Internet avec peu de difficultés, les propriétaires de sites web devraient prendre en compte les obstacles que ces utilisateurs rencontrent. Par exemple, si un site web fournit des signaux sonores sans signaux visuels d'accompagnement, les utilisateurs ayant une déficience auditive ne pourront pas interagir avec le site.

Un des obstacles les plus notables pour les personnes ayant une déficience auditive est l'absence de sous-titres. Les vidéos sans sous-titres peuvent être complètement inaccessibles pour ceux qui ont une déficience auditive. Pour ceux qui téléchargent une vidéo sur une plateforme comme YouTube ou Facebook, il peut être facile de se fier aux sous-titres générés automatiquement, mais ils sont souvent inexacts et ne fournissent pas de sous-titres contextuels pour la musique ou les effets sonores.

Les descriptions audio aident également les utilisateurs ayant une déficience visuelle à suivre les vidéos sans audio et à mettre en valeur les personnes qui n'ont pas de rôles parlants. Il est également essentiel d'ajouter des transcriptions des vidéos pour ceux qui utilisent des lecteurs d'écran ou de texte.

5. Décidez des choix de couleurs accessibles

En général, les choix de couleurs pour les sites web impliquent ce qui est le plus tendance en UX. Cela signifie généralement beaucoup de bleu non offensant, définitivement original. Mais la couleur est une considération importante dans l'accessibilité web. En particulier, les designers peuvent vouloir prendre en compte les besoins des utilisateurs daltoniens.

Pour m'aider à démontrer, regardez cette photo de Monty, le seul et unique de G2, profitant de la skyline de Chicago.

Les utilisateurs atteints de daltonisme rouge-vert (deutéranopie) auront du mal à distinguer les rouges, les verts, les bruns et les oranges. Si un designer décide de mettre du texte rouge sur un fond brun, les utilisateurs daltoniens ne pourront probablement pas le lire.

Et la deutéranopie n'est qu'un type de daltonisme. Bien que cela puisse sembler difficile de tenir compte de chaque type de daltonisme qui existe, de nombreux outils gratuits sont disponibles pour les créateurs de sites web pour tester les couleurs sur une page web. D'autres outils peuvent générer des palettes de couleurs accessibles qui peuvent simplifier la prise de décision.

6. Assurez-vous que le site web peut être navigué uniquement à l'aide du clavier

Pour les personnes utilisant des dispositifs d'entrée alternatifs, naviguer sur des sites web à défilement infini avec des mises en page asymétriques peut être un cauchemar. Bien que ces choix de design soient tendance, ils sont incroyablement inaccessibles pour ceux qui dépendent de dispositifs d'entrée alternatifs ou utilisent uniquement un clavier.

Les choix de design tendance incluent des barres de navigation ou des options qui n'apparaissent que lorsqu'un curseur survole un certain bouton. Souvent, mettre en surbrillance un bouton déroulant désigné à l'aide du clavier ne suffit toujours pas pour activer le menu déroulant. Cela signifie que les utilisateurs utilisant uniquement le clavier n'ont aucun moyen d'accéder à ces options de page web.

Ajouter des liens de saut au début d'une page web peut également permettre aux utilisateurs utilisant uniquement le clavier et aux utilisateurs de lecteurs d'écran de sauter du contenu sans naviguer sur une page web complète à chaque fois.

Rendre votre site web plus accessible

Ajouter des améliorations d'accessibilité n'est pas toujours facile, surtout lorsqu'il s'agit de les équilibrer avec les pratiques de design modernes et les techniques UX pour les personnes sans handicap. Cependant, l'UX et l'accessibilité web ne sont certainement pas incompatibles.

Les designers ont de nombreuses options créatives pour offrir d'excellentes expériences aux utilisateurs avec ou sans déficiences. Tant que l'accessibilité est une considération dès le départ, la mise en œuvre des pratiques d'accessibilité peut être facile et ne doit pas être préjudiciable au processus global de design UX.