Il ne fait aucun doute que les produits numériques ont révolutionné le monde. Nous sommes toujours à quelques clics d’informations apparemment sans fin. Nous pouvons tout faire, du paiement de nos impôts à la commande de produits d’épicerie, en passant par l’interaction avec nos gouvernements et l’obtention d’un diplôme en ligne. Malgré cela, toutes les expériences numériques ne sont pas accessibles.
Alors que beaucoup considèrent les personnes handicapées comme un petit sous-ensemble de leurs utilisateurs, c’est un mythe. Près de 1 Américain sur 5 a un handicap. 54% des Américains handicapés vont en ligne. Heureusement, le monde commence à reconnaître que le Web doit être conçu pour tout le monde.
Un site Web accessible est un site conçu et codé, les personnes handicapées peuvent les utiliser. Il est important que les concepteurs pensent à l’accessibilité lorsqu’ils travaillent à la création d’interfaces et d’expériences utilisateur intuitives.
Actuellement, seuls les sites Web du secteur public doivent se conformer aux Web Content Accessibility Guidelines 2.0, qui imposent aux sites Web des normes d’accessibilité similaires à celles définies pour l’environnement bâti. Au cours de la prochaine année, et pour les années à venir, nous verrons des pressions s’exercer sur le secteur privé pour qu’il commence à se conformer.
L’Interaction Design Foundation explique qu’il y a cinq domaines clés d’utilisabilité à prendre en compte : visuel, moteur/capacité, auditif, convulsions et apprentissage. Il y a des gens de tous horizons qui utilisent votre site ou votre application et qui espèrent trouver ce qu’ils veulent aussi rapidement et facilement que n’importe qui d’autre.
Voici quelques éléments pour rendre votre site Web plus accessible.
Autoriser les utilisateurs à redimensionner les pages et le contenu
Les utilisateurs visualisent votre produit à partir de différents écrans sur de nombreux appareils différents. Nous aimons créer des expériences dans lesquelles les utilisateurs peuvent redimensionner le contenu pour s’adapter à leurs besoins. Imaginez ce scénario : un utilisateur saisit des informations dans un champ et la page effectue automatiquement un zoom sur le champ. Dans cette position, l’utilisateur doit avoir la possibilité de faire un zoom arrière ou avant pour s’assurer de l’action qu’il entreprend. Rendre cela facilement réalisable crée une expérience transparente.
Rendre la barre de recherche facile à localiser et à utiliser
Comme nous en avons discuté dans notre présentation des tendances 2019 pour la rencontre Bière et UX, une barre de recherche proéminente et facile à utiliser est quelque chose que les grandes marques utilisent à bon escient.
Un objectif commun de l’expérience utilisateur est de minimiser l’effort nécessaire à l’utilisateur pour accomplir une tâche, par exemple en limitant le nombre de clics nécessaires pour saisir des informations dans une barre de recherche. Par exemple, sur la plateforme de streaming Tidal, un clic sur le symbole de recherche vous mène non seulement à la page de recherche, mais ouvre également le clavier pour que vous puissiez saisir votre requête.
Au lieu de deux clics – cliquez sur l’icône de recherche, cliquez sur la barre de recherche – il anticipe que vous souhaitez rechercher des informations et ouvre automatiquement le clavier.
Ajouter du texte alternatif à chaque image
Les avantages des balises alt s’étendent au-delà du référencement. Le texte alternatif permet aux personnes malvoyantes de comprendre facilement vos images. Ceci est particulièrement important pour les images qui ne sont pas purement décoratives.
Selon Moz, le texte alternatif doit être court. Étant donné que la plupart des lecteurs d’écran coupent le texte à environ 125 caractères, il est conseillé de le conserver à ce nombre ou en dessous. Instagram a fait la une des journaux en 2018 lorsqu’ils ont finalement introduit une fonction de texte alternatif sur leur plateforme. Cette décision, entre autres, a été un signal précoce indiquant que l’interface utilisateur accessible n’est pas une tendance – c’est la norme.
Utiliser les titres de section
Tout comme un livre ou un panneau de signalisation, les produits numériques sont censés fournir des informations d’une manière qui organise, guide et fait passer l’utilisateur à l’étape suivante.
Les titres de section, comme un sous-titre dans un blog ou en haut d’une page, aident les utilisateurs à se souvenir de ce qu’ils lisent. Dans une enquête WebAIM, 67% des personnes interrogées ont déclaré qu’elles préféraient naviguer dans les titres de la page. Cette découverte a été mieux classée que l’utilisation de la fonction “Rechercher”, la navigation à travers les liens de la page et la lecture de la page entière.
Utiliser le contraste des couleurs
Peut-être un élément négligé, l’utilisation du bon contraste de couleur pour assurer une lisibilité maximale est essentielle pour rendre votre interface utilisateur plus accessible. Il y a des moments où vous constaterez que votre texte n’a pas assez de contraste avec l’arrière-plan ou que la taille de votre police ne complète pas son contraste. Lorsque vous cherchez à rendre les couleurs plus accessibles, utilisez les ressources suivantes pour savoir que vous le faites correctement. Nous adorons les ressources telles que le site de Kevin Gutowski, Web Aim et l’application Contrast.
Utiliser le texte du lien dans la navigation du menu
De cette manière, les utilisateurs qui ont des difficultés à trouver des éléments de menu sont pris en compte : ils savent sur quel onglet ils survolent et comprennent où ils se trouvent sur le site. Une solution possible est que lorsqu’un utilisateur survole l’élément de menu d’une page, le lecteur d’écran lit à haute voix ce bouton particulier en lisant le texte du lien.
Intuitivement, l’utilisateur clique sur cet élément et est dirigé vers la page de son choix. Il est également recommandé de fournir des tailles généreuses pour les zones cliquables, pas inférieures à 44px par 44px. La navigation dans les menus est l’une des plus importantes de tout site, quel que soit le cas d’utilisation. Semblable à l’utilisation de texte alternatif pour inclure des descriptions d’images, les textes de lien peuvent aider avec les éléments qui se rapportent à la navigation de l’utilisateur.
