14 façons simples de rendre votre site Web plus accessible

Il n'y a rien de nouveau à promouvoir l'idée que l'accessibilité devrait être une considération clé au début de tout projet de conception. En réalité, des budgets et des délais serrés peuvent souvent rendre les fonctionnalités importantes nécessaires pour rendre nos produits numériques entièrement accessibles, négligées ou considérées comme «quelque chose à ajouter plus tard».

Le résultat final est que si les meilleures pratiques d'accessibilité générales sont mises en œuvre, de nombreux éléments plus fins de l'accessibilité ou de la conception inclusive peuvent souvent être négligés. Heureusement, comme vous le verrez, bon nombre de ces oublis peuvent être résolus avec un minimum d’efforts, et l’un d’entre eux Générateur de site Web les choix aideront aussi.

La prise en compte de quelques-uns de ces points peut permettre à un pourcentage supplémentaire de votre public de mieux interagir avec vos produits numériques d'une manière qu'ils n'auraient pas pu autrement faire.

01. Souvenez-vous du texte alternatif

Dans un monde où le téléchargement d'actifs visuels sur Internet est aussi courant que de commencer la journée avec un café - À lui seul, Instagram estime que 100 millions d'images sont ajoutées quotidiennement à sa plateforme - nous pouvons facilement ignorer le besoin de texte alternatif sur les images et les vidéos lors de l'ajout de contenu à nos propres sites Web et applications.

Considérez le pourcentage de votre public qui peut utiliser des lecteurs d'écran pour consommer votre contenu; si vous êtes quelque chose comme GOV.UK, vous ne couvre peut-être pas 29% de vos utilisateurs . Lors du choix de vos visuels, assurez-vous de prendre en compte le texte alternatif qui les accompagnera afin de fournir un contexte par rapport au reste des éléments de la page. Vous vous occuperez des lecteurs d'écran, des utilisateurs affichant uniquement du texte et des états de chargement ayant échoué.

Nommer vos calques d'image dans vos fichiers de conception avec leurs étiquettes de texte alternatif vous mettra au défi de vraiment remettre en question la pertinence des images que vous sélectionnez, car vous les lirez pour ce qu'elles sont.

02. Considérez attentivement les animations

Animation de l

Le menu Arche 68 vous emmène faire un tour

Celles magnifiques sites de parallaxe et les pages Web GIF-tastic que vous avez conçues ont certainement poussé l'expérience de narration en ligne sans fin, mais avec 35% des personnes de plus de 40 ans souffrant d'un trouble vestibulaire, il y a une chance que les utilisateurs souffrent de nausées et de mouvements. maladie en allant trop lourd sur l'animation. Le Menu de la première page de l'Arche 68 est une expérience étonnante dans la typographie animée, mais peut laisser même les estomacs les plus forts se sentir un peu étourdis après une minute ou deux de défilement.

Pour résoudre ce problème, vous pouvez envisager de fournir la possibilité de désactiver les animations de défilement ou de fournir une alternative statique pour afficher votre contenu. Mou offre la possibilité de masquer les images animées et les émojis, démontrant que le mouvement peut être une amélioration facultative plutôt qu'une fonctionnalité indispensable pour tous les utilisateurs.

Vous avez un site complexe à prendre en charge? Ces hébergement Web les services vous aideront.

03. Pensez à d'autres langues

Texte en anglais et en français affiché, soulignant comment les hauteurs de ligne peuvent avoir un impact énorme lors de la traduction dans différentes langues

Accents qui se chevauchent lors de la traduction de l'anglais vers le français avec une hauteur de ligne serrée

Tous les projets sur lesquels vous travaillez ne nécessiteront pas la traduction du contenu dans plusieurs langues, mais rappelez-vous que l'accessibilité et l'inclusivité vont au-delà de la nécessité de répondre aux besoins des personnes ayant une déficience visuelle ou auditive.

Rendre vos lignes trop serrées peut causer toutes sortes de problèmes lors de la traduction en français, par exemple, car les accents de caractères tels que l'accent grave (à, è, ù) peuvent se chevaucher et se perdre, ce qui donne une signification entièrement différente - par exemple = «À» contre à = «A». D'autres langues comme l'arabe se lisent de droite à gauche et auront donc un impact important sur la façon dont les blocs de texte sont rendus et, par conséquent, sur la façon dont les flux de page seront lus.

Lors de la conception pour un public mondial, vos modèles et systèmes de conception ont de meilleures chances d'être mis à l'échelle si vous considérez la myriade de façons dont les langues alternatives peuvent affecter la mise en page des caractères au début du processus de conception. Essayez de simuler vos fichiers de conception dans une ou deux langues alternatives pour voir s'ils résisteront à la traduction. cela facilitera les choses si cette exigence est ajoutée ultérieurement.

04. Restez simple

Compte tenu de l'estimation que environ un pour cent de la population britannique est sur le spectre autistique , il est important de considérer les mots au pied de la lettre. Les émojis et les copylines originales sont très amusants et aident à donner de la personnalité aux marques, mais lorsque vous abordez des sujets sérieux, écrire dans un anglais simple aidera à nier toute ambiguïté pour les utilisateurs, en particulier lorsqu'ils les aident à prendre des décisions importantes. Soyez conscient de la diversité de votre public et du ton dans lequel vous souhaitez que la copie soit lue pour garder votre message sur le point.

05. Utilisez des couleurs et des formes simples

Capture d

Le Plug-in Spectrum pour Chrome vous permet de simuler différents niveaux de daltonisme

Les formes et les couleurs sont si importantes pour diverses raisons et peuvent avoir un effet considérable sur l'expérience utilisateur. Lorsque nous considérons le spectre autistique, le daltonisme et d'autres difficultés visuelles, vos choix de couleur peuvent être extrêmement difficiles à différencier ou même à reconnaître.

On considère que les arrangements de couleurs vives et à contraste élevé peuvent être difficiles et accablants pour les utilisateurs autistes à traiter; leur attention peut être facilement perdue, alors essayez d'utiliser des couleurs et des formes simples. De même, un utilisateur daltonien s'appuiera fortement sur des couleurs contrastées. Environ un homme sur 12 et une femme sur 200 dans le monde sont affectés par le daltonisme . Des choix comme le rouge et le vert, le vert et le bleu, le bleu et le violet et le vert et le brun peuvent être gênants.

Essayez d'utiliser un outil de test des couleurs comme le Spectre du plugin Chrome . Cela vous permet d'analyser vos pages Web et de simuler des scénarios de daltonisme. Vous pouvez également utiliser Vérificateur de contraste de Userway pour tester vos couleurs de texte et d'arrière-plan et voir si elles sont conformes WCAG 2.0 AA ou AAA.

06. Autonomiser l'utilisateur

Imaginez une expérience numérique qui vous donne la possibilité de consommer du contenu de la manière qui répond le mieux à vos besoins. Avec Harry Potter, vous pouvez lire le livre, regarder le film ou écouter le livre audio. Ces trois méthodes permettent aux fans de profiter de l'histoire de la manière qui leur convient et qui inclut ceux qui sont sourds, dyslexiques ou malvoyants.

Reveal News fait cela avec brio avec un certain nombre de ses articles longs en ligne, l'histoire de l'enquête sur les abus sexuels Viol pendant le quart de nuit en étant un excellent exemple. Il offre des options pour lire, regarder ou écouter la même histoire dans la même interface.

La prochaine fois que vous planifiez votre stratégie de contenu, il peut être utile de considérer les multiples façons dont elle peut être diffusée, car non seulement vous bénéficierez aux personnes handicapées, mais vous offrirez en fait un moyen beaucoup plus flexible pour tous les utilisateurs d'en profiter. votre offre (et assurez-vous de garder vos fichiers de contenu en sécurité stockage en ligne ).

07. Offrez plusieurs options

La communication peut être difficile pour les utilisateurs ayant des difficultés visuelles ou auditives. Il se peut qu'un utilisateur soit malentendant ou sourd et ait besoin de la possibilité de répondre à une demande par écrit, ou qu'il ait une déficience visuelle, auquel cas un appel téléphonique peut être le moyen de contact préféré. Fournir des préférences de communication peut être une considération très importante pour réussir à interagir avec les personnes confrontées à ces défis, alors gardez toujours cela à l'esprit lors de la conception de votre prochaine page de contact.

08. Offrez des personnalisations

Il est si facile de comprendre comment une marque doit être visualisée en ligne. Parfois, vos marques, votre typographie et votre couleur peuvent ne pas suffire ou faire simplement obstacle à une expérience accessible. Idéalement, vous devriez permettre aux utilisateurs de personnaliser leurs préférences d'affichage, de changer les thèmes (clair / foncé ou variations de couleur) et la taille du texte.

À étude par E-Check a conclu que 70% des sites Web enfreignent potentiellement la loi et courent un risque potentiel important sur le plan commercial, des relations publiques ou juridique. Il existe de nombreux facteurs, mais offrir à l'utilisateur une expérience personnalisable peut l'aider à mieux visualiser le contenu.

Prenons le site Web Guide Dogs comme exemple, où les utilisateurs peuvent modifier la taille du texte sur tout le site Web et même changer le mode de couleur. Il est connu que le contraste est très important pour les utilisateurs avec des restrictions visuelles, donc fournir des thèmes alternatifs peut être vraiment utile.

09. Pensez à la tabulation

Capture d

Il est facile de se perdre en essayant de naviguer sur Pinterest uniquement avec un clavier

Plus de 50% du trafic Internet provient désormais d'appareils mobiles , mais en tant que concepteur, vous êtes probablement toujours équipé d'un clavier et d'une souris, tout comme la moitié restante de la population. De cette population, il y a un certain nombre de personnes ( environ 7 pour cent des adultes qui travaillent ) avec une «difficulté sévère de dextérité», les rendant dépendants d'un clavier seul pour naviguer dans les menus et les pages Web de leur ordinateur. L'impact que cela a sur la conception est double.

Le premier concerne la mise en page: les utilisateurs disposant d'un onglet clavier peuvent-ils parcourir votre page dans l'ordre dans lequel vous vouliez que le contenu soit lu? Avez-vous déjà essayé de parcourir la grille de maçonnerie de Pinterest? Il est presque impossible de déterminer où vous vous trouvez dans le flux de la page, car le focus saute.

La deuxième préoccupation pour la tabulation est la représentation visuelle réelle de l'état de mise au point. La plupart des navigateurs ont des états de focus par défaut prêts à l'emploi, mais certains sites Web comme Smashing Magazine ont fait un effort supplémentaire pour créer leur propre style qui adopte une ligne rouge pointillée épaisse plutôt que les boîtes bleu clair génériques de Chrome ou Safari, qui ne fonctionnent pas. si bien si vos arrière-plans ou boutons sont eux-mêmes bleu clair.

Pour vraiment répondre aux besoins des utilisateurs de clavier uniquement, il vaut la peine de prendre le temps de réfléchir à la manière dont chacun des composants de votre système de conception ou de votre guide de style apparaîtra dans son état ciblé, puis de travailler avec vos développeurs pour les perfectionner dans le navigateur.

10. N'oubliez pas les bots

Les êtres humains ne sont pas les seuls à lire des sites Web; les robots aussi. Pensez aux appareils à commande vocale et à ces petits robots intelligents de Google qui explorent le Web à chaque heure de veille. Les sites Web sont scannés et analysés par de nombreuses technologies, y compris des logiciels d'assistance. Les lecteurs d'écran ne sont que l'un des nombreux types de ce logiciel d'assistance et sont utilisé par 90% des personnes ayant divers niveaux de déficience visuelle .

La façon dont votre site Web est structuré est vraiment importante. Le formatage du contenu et du texte alternatif est ce qui est principalement lu par les lecteurs d'écran. Pensez à la façon dont le HTML est ordonné et si le flux de contenu correspond à votre propre expérience visuelle de la page Web.

11. Obtenez la bonne longueur de ligne et la bonne quantité de texte

L'engagement est nécessaire pour capter l'intérêt d'un public, mais il est facile d'oublier que les mots sont importants pour garder votre utilisateur concentré. Le défi est d'écrire suffisamment pour être informatif, tout en continuant à lire un travail assez léger. Les grandes zones textuelles peuvent être assez intimidantes.

Ce n’est pas seulement la quantité de texte que vous avez; c'est la façon dont vous l'affichez qui peut souvent rendre la lecture difficile pour certains utilisateurs. La longueur de ligne de votre texte peut vous aider. Si une ligne de texte est trop longue, les yeux du lecteur auront du mal à se concentrer, car la longueur de la ligne rend difficile de déterminer où la ligne commence ou se termine. Il peut également être difficile de continuer sur la ligne correcte dans les grands blocs de texte.

De plus, si une ligne est trop courte, l’œil devra revenir trop souvent, brisant le rythme du lecteur. Les lignes plus courtes ont également tendance à stresser les lecteurs, les faisant commencer par la suivante avant de terminer celle en cours. Pour y parvenir, on considère que 50 à 60 caractères par ligne assureront une lecture confortable.

Jeter un coup d'œil à Moyen pour une masterclass sur la façon dont la lecture peut être un plaisir.

12. Évitez les invites angoissantes

Capture d

Le compte à rebours de Ticketmaster en plein débit

Nous connaissons tous les messages clignotants 'En forte demande!' Et 'Dernière chance!' Sur Booking.com. Nous sommes également parfaitement conscients du compte à rebours dans le coin de l'écran lors de la commande de billets sur Ticketmaster. On ne peut qu'imaginer la hausse des taux de conversion due à ces fonctionnalités, mais que se passe-t-il si ces expériences provoquent une véritable anxiété chez certains utilisateurs?

Plus d'une personne sur 10 est susceptible de souffrir d'un «trouble anxieux invalidant» à un certain stade de leur vie et en tant que concepteurs, nous devons faire ce que nous pouvons pour éviter de contribuer à ce problème. Il existe un certain nombre de modèles UX qui visent à pousser les utilisateurs à prendre des mesures, en particulier les processus de réservation, où les délais d'expiration sont inévitables. En guise de progrès, nous pouvons chercher à répondre aux besoins de ceux qui mettront plus de temps à utiliser nos applications en les informant gentiment qu'un délai est en place et en leur donnant la possibilité de prolonger le temps nécessaire le cas échéant.

Lors de la conception de votre prochain flux de réservation, assurez-vous d'inclure le scénario de délai d'attente dans la séquence et de vous efforcer de créer une interface qui permet aux utilisateurs de terminer, plutôt que de les envoyer dans la panique.

13. Ajouter des vérifications et des contrôles

Monzo

Monzo propose trois niveaux de vérification lors des paiements

Pour les personnes souffrant d'anxiété, il n'y a rien de pire que de s'interroger sur la validité des informations ou des données soumises par inadvertance dans l'éther numérique. Arriver à la fin d'un long formulaire ou d'un processus de réservation riche en informations importantes et en appuyant sur «suivant», pour découvrir que vos données ont été soumises sans possibilité de les annuler, peut être une expérience stressante, en particulier lorsque de l'argent est impliqué.

Lors de la conception de flux qui entraînent un appel à l'action à la fin, il convient de garder à l'esprit que de nombreux utilisateurs, y compris ceux qui souffrent d'anxiété, apprécieront la possibilité de vérifier à nouveau qu'ils ont tout rempli correctement. Monzo fait cela avec brio lors de l'envoi de paiements, offrant aux clients trois couches de vérification dans une interface bien rangée.

À la dernière étape du virement bancaire, vous pouvez effectuer une vérification finale du montant à envoyer, du code de tri et du numéro de compte du destinataire, ainsi que de devoir saisir le code PIN de votre carte pour confirmer la transaction.

14. Confirmer la fin d'un parcours utilisateur

Il faut beaucoup d'énergie pour comprendre les parcours des utilisateurs et offrir la meilleure expérience utilisateur, mais vous pouvez vous retrouver en deçà dans certains scénarios. Lorsqu'un utilisateur arrive à la fin d'un processus, d'une interaction ou d'une soumission, l'écran final doit confirmer ses actions et l'informer de la suite, même s'il s'agit simplement d'un message qui dit quelque chose comme 'Revenons à la page d'accueil'. Toute forme de confirmation peut être vraiment gratifiante pour l'utilisateur et réduire les angoisses qu'il peut avoir.

Cet article a été initialement publié dans numéro 314 du magazine net; abonnez-vous ici.

Image principale: Terrasse Shypka

Lire la suite: