Billions de personnes visitent des sites Web chaque jour, certaines sont valides et d’autres ne le sont pas. Comment un concepteur peut-il s’assurer que tout le monde peut accéder et utiliser son site Web ? La réponse est l’accessibilité Web.
Pourquoi l’accessibilité Web est-elle importante ?
L’accessibilité Web consiste à concevoir des sites Web qui peuvent être utilisés par des personnes ayant des handicaps tels que la basse vision, le daltonisme, la cécité, les troubles cognitifs, la surdité ou l’handicap moteur.
L’accessibilité Web est importante car elle rend les sites Web réactifs aux besoins de tous les utilisateurs. À l’heure actuelle, il y a plus d’un milliard de personnes handicapées dans le monde, tandis qu’aux États-Unis, 61 millions de personnes vivent avec un handicap. Lorsque vous concevez des sites Web en tenant compte de l’accessibilité, vous rendez vos créations accessibles aux personnes handicapées.
La conception Web accessible n’est pas seulement un « plus », elle est obligatoire par la loi dans des pays tels que les États-Unis, Israël, le Canada, le Royaume-Uni, entre autres. En fait, 2 000 poursuites pour l’accessibilité des sites Web ont été déposées aux États-Unis en 2019 seulement.
Des études ont montré qu’il existe des arguments commerciaux solides en faveur de la conception de sites Web accessibles, car elle améliore le classement dans les moteurs de recherche, augmente la satisfaction des clients, améliore l’utilisabilité et augmente la portée d’un site Web.
POUR – Les 4 normes d’accessibilité Web
Selon les lignes directrices de l’accessibilité du contenu Web (WCAG) présentées par l’Initiative d’accessibilité des sites Web (WAI) du World Wide Web Consortium (W3C), le contenu Web doit être POUR.
Cela signifie qu’il doit respecter les principes suivants :
Perceptible
Toutes les informations et les composants de l’interface utilisateur doivent être présentés de manière à ce que tous les utilisateurs puissent les comprendre de différentes manières. Il ne doit pas y avoir d’informations invisibles ou difficiles à comprendre.
Voici les directives que votre conception doit suivre pour respecter ce principe :
- Texte alternatif pour tout contenu qui n’est pas du texte, comme les images et les graphiques. Cela permet de transformer le contenu non textuel en d’autres formes, telles que la parole, le braille ou des polices de plus grande taille.
- Fournir des alternatives telles que des sous-titres et des sous-titres pour tous les supports basées sur le temps, tels que les vidéos et les animations.
- Créer un contenu adaptable qui peut être présenté de différentes manières, comme un agencement simple qui n’interfère pas avec sa structure.
- Rendre vos contenus faciles à voir et à entendre en différenciant entre l’avant-plan et l’arrière-plan.
Opérationnel
Ce principe exige que les composants de l’interface utilisateur et la navigation de votre site Web puissent être utilisés facilement sans souris et ne nécessitent pas d’interactions impossibles pour l’utilisateur.
Voici comment rendre votre conception Web opérationnelle :
- Rendre toutes les fonctionnalités accessibles au clavier.
- Accorder aux utilisateurs un temps suffisant pour interagir avec votre contenu.
- Éviter de concevoir du contenu (éléments clignotants) pouvant provoquer des crises.
- Donner aux utilisateurs des moyens de savoir où ils se trouvent, de naviguer sur votre site et de trouver le contenu qu’ils recherchent.
Compréhensible
Vous devez vous assurer que les utilisateurs peuvent comprendre le fonctionnement de l’interface utilisateur de votre site et les informations présentées sur votre site.
Voici comment y parvenir :
- Assurez-vous que le texte de votre site est facile à lire et à comprendre.
- Créez et présentez des pages Web qui fonctionnent de manière prévisible.
- Facilitez la correction des erreurs de saisie sur votre site.
Robuste
Un contenu robuste est un contenu qui peut être interprété correctement par les technologies d’assistance, telles que les lecteurs d’écran. Votre contenu doit continuer à être accessible et compatible avec ces dispositifs d’assistance, même lorsque leurs technologies évoluent.
Pour chacun des principes WCAG, il existe une évaluation de réussite, notée A (minimum), AA (bon) et AAA (excellence).
Ce qui rend les sites Web accessibles ? Cas d’utilisation et exemples
Voici quelques modifications que vous pouvez apporter à vos conceptions Web pour les rendre accessibles.
Contraste des couleurs
Lors de la conception de votre site Web, assurez-vous qu’il y a suffisamment de contraste entre la couleur d’arrière-plan et le texte. Le contraste des couleurs s’applique également aux boutons, au texte sur les images et à d’autres éléments de l’interface utilisateur.
Le contraste des couleurs a un impact significatif sur la facilité de lecture du contenu de votre site Web. Un faible contraste rend la lecture difficile pour les personnes ayant une basse vision. Selon les WCAG, le rapport de contraste acceptable minimal est de 3:1, tandis que le standard recommandé est de 7:1.
Texte alternatif
Pour chaque image et graphique, fournissez un texte alternatif descriptif qui transmet le même sens que la vision du texte. Les lecteurs d’écran lisent ce texte alternatif pour les personnes malvoyantes, alors évitez d’utiliser des descripteurs numériques ou des descripteurs qui n’ont aucun sens.
De plus, pour les médias basés sur le temps, tels que les vidéos ou les enregistrements audio, fournissez des sous-titres et des transcriptions avec des liens visibles. Cela s’applique également aux icônes, aux boutons, aux tableaux et aux graphiques.
Vous pouvez présenter le texte alternatif à l’aide de la balise alt ou utiliser des légendes pour fournir du contexte.
Contenu facile à lire
Les utilisateurs interagissent principalement avec des sites Web grâce au contenu textuel. Il est donc important d’utiliser un langage simple, sans jargon ni mots peu communs. Les WCAG exigent que les sites Web utilisent un langage de niveau « secondaire inférieur » pour le rendre aussi accessible que possible.
Vous pouvez utiliser des outils tels que l’application Hemingway pour déterminer le niveau de lisibilité du texte de votre site Web.
Utilisation appropriée des balises d’en-tête
Les balises d’en-tête facilitent la navigation à travers le contenu Web et elles fournissent des signaux aux lecteurs d’écran sur l’importance, la relation et la hiérarchie des différentes informations.
Commencez par la balise h1 et utilisez les balises de manière cohérente et dans l’ordre correct.
États de focus clairs
Les états de focus facilitent la navigation des personnes utilisant la touche Tab pour se déplacer sur votre site Web. Ils sont utilisés par les lecteurs d’écran, les personnes ayant une mobilité réduite et les utilisateurs expérimentés.
Assurez-vous que vos éléments de menu, vos formulaires, vos liens et vos boutons ont des indicateurs de focus clairs et à fort contraste qui les font ressortir.
États d’erreur utiles
Fournissez des informations utiles et contextualisées aux utilisateurs lorsqu’ils commettent des erreurs. Expliquez-leur également comment corriger ces erreurs et donnez-leur la possibilité d’annuler leurs soumissions.
Présentez les instructions de manière claire et affichez de manière visible les situations où l’action de l’utilisateur est requise.
Étiqueter tous les champs de formulaire
Assurez-vous d’avoir des étiquettes descriptives à côté de chaque champ de formulaire. Évitez également d’utiliser le texte de l’espace réservé comme étiquette de formulaire, car il est souvent peu contrasté et donc difficile à lire. Le texte de l’espace réservé crée également de la confusion car les utilisateurs ne savent pas quoi faire une fois que le texte disparaît.
Les étiquettes de formulaire sont également utiles pour les personnes utilisant des lecteurs d’écran pour comprendre votre formulaire. Les lecteurs d’écran ne lisent que les informations marquées avec la balise label et ignorent le texte de l’espace réservé.
Évitez les animations clignotantes de l’interface utilisateur
Les animations clignotantes de l’interface utilisateur, clignotant plus de 3 fois par seconde, peuvent déclencher des crises ou des réactions physiques chez certaines personnes. Il vaut donc mieux les éviter.
N’utilisez pas seulement la couleur pour transmettre un message
La couleur est un bon moyen de transmettre un message, mais elle ne doit pas être le seul moyen, car certaines personnes sont daltoniennes. Utilisez la couleur en combinaison avec d’autres éléments tels que les astérisques. Pour les graphiques et autres diagrammes, utilisez des labels en plus de la couleur.
Utilisez des polices faciles à lire
Utilisez une taille de police et un style facile à lire. La lisibilité d’une police est souvent déterminée par son style plutôt que par son type. En règle générale, les polices cursives ou décoratives sont difficiles à lire. Utilisez un texte de grande taille, des lignes courtes, des hauteurs de ligne élevées et plus d’espace entre les lettres pour améliorer la lisibilité.
Nouvelles considérations en matière d’accessibilité pour 2020 et au-delà
WCAG 2.2 à être publié en 2020
Le World Wide Web Consortium (W3C) a publié le premier projet de WCAG 2.2 le 27 février 2020. Cette mise à jour vise à améliorer davantage l’accessibilité des personnes handicapées sur les appareils mobiles.
Voici ce que vous devez savoir sur le WCAG 2.2 :
- Il est rétrocompatible avec les WCAG 2.0 et 2.1, ce qui signifie que si votre site Web répond aux critères de la version 2.2, il répond également aux critères des versions précédentes.
- Il inclut de nouveaux critères pour les états visibles de focus, tels que la taille de la zone de focus et le contraste des couleurs.
L’importance croissante de l’interface utilisateur vocale et de la conception des interfaces vocales
Avec de plus en plus de personnes utilisant des appareils commandés par la voix tels qu’Alexa, Siri et Amazon Echo pour leurs besoins de recherche, il est de plus en plus nécessaire de concevoir des interfaces vocales.
Voici comment les concepteurs peuvent rendre leurs interfaces vocales plus accessibles :
- Indiquez aux utilisateurs ce qu’ils peuvent faire.
- Informez les utilisateurs de la fonctionnalité qu’ils utilisent.
- Ne donnez pas trop d’options.
- Fournissez un retour visuel chaque fois que possible.
Ne promettez pas une conformité ADA « complète » ou « à 100 % »
La Americans with Disability Act (1990) a été promulguée pour prévenir la discrimination contre les personnes handicapées. Cependant, cette loi ne mentionne pas explicitement l’accessibilité Web et est donc sujette à différentes interprétations. Cela signifie que en tant que concepteur, vous ne devriez pas promettre une conformité ADA complète, car il n’est pas clair comment l’ADA s’applique à l’accessibilité Web.
Prototypage, conception et développement en ayant l’accessibilité à l’esprit
Pour se conformer pleinement à l’accessibilité de la conception Web, vous avez besoin des meilleurs outils pour vous aider dans le prototypage, la conception et le développement. UXPin offre une plateforme tout-en-un où vous pouvez vérifier la conformité WCAG de vos conceptions et transférer vos conceptions en douceur. Essayez UXPin gratuitement.
