Concevoir pour l'accessibilité et l'inclusion

"L'accessibilité est résolue au stade de la conception." C'est une phrase que Daniel Na et son équipe ont entendue à maintes reprises lors d'une conférence. Concevoir pour l'accessibilité signifie être inclusif aux besoins de vos utilisateurs . Cela inclut vos utilisateurs cibles, les utilisateurs en dehors de votre groupe démographique cible, les utilisateurs handicapés et même les utilisateurs de cultures et de pays différents. Comprendre ces besoins est la clé pour créer des expériences meilleures et plus accessibles pour eux.

L'un des problèmes les plus courants lors de la conception pour l'accessibilité est de savoir pour quels besoins vous devez concevoir. Ce n'est pas que nous concevons intentionnellement pour exclure les utilisateurs, c'est juste que "nous ne savons pas ce que nous ne savons pas". Donc, en matière d'accessibilité, il y a beaucoup à savoir.

Comment fait-on pour comprendre la myriade d'utilisateurs et leurs besoins ? Comment pouvons-nous nous assurer que leurs besoins sont satisfaits dans notre conception ? Pour répondre à ces questions, j'ai trouvé qu'il est utile d'appliquer une technique d'analyse critique consistant à visualiser une conception à travers différentes lentilles.

"Une bonne conception [accessible] se produit lorsque vous visualisez votre [conception] sous de nombreux angles différents."

— L'art de la conception de jeux : un livre d'objectifs

Une lentille est « un filtre étroit à travers lequel un sujet peut être considéré ou examiné ». Souvent utilisées pour examiner des œuvres d'art, de la littérature ou des films, les lentilles nous demandent de laisser derrière nous notre vision du monde et de voir le monde à travers un contexte différent.

Par exemple, regarder l'art à travers le prisme de l'histoire nous demande de comprendre le « climat social, politique, économique, culturel et/ou intellectuel de l'époque ». Cela nous permet de mieux comprendre quelles influences du monde ont affecté l'artiste et comment cela a façonné l'œuvre et son message.

Les objectifs d'accessibilité sont un filtre que nous pouvons utiliser pour comprendre comment différents aspects de la conception affectent les besoins des utilisateurs. Chaque lentille présente un ensemble de questions à se poser tout au long du processus de conception. En utilisant ces lentilles, vous deviendrez plus inclusif aux besoins de vos utilisateurs, vous permettant de concevoir une expérience utilisateur plus accessible pour tous.

Les objectifs d'accessibilité sont :

• Lentille d'animation et d'effets
• Lentille de l'audio et de la vidéo
• Lentille de couleur
• Lentille des contrôles
• Lentille de la police
• Lentille d'images et d'icônes
• Lentille du clavier
• Lentille de mise en page
• Objectif d'honnêteté matérielle
• Lentille de lisibilité
• Lentille de structure
• Lentille du temps

Vous devez savoir que tous les objectifs ne s'appliqueront pas à tous les designs. Alors que certains peuvent s'appliquer à chaque conception, d'autres sont plus situationnels. Ce qui fonctionne le mieux dans un design peut ne pas fonctionner pour un autre.

Les questions fournies par chaque objectif ne sont qu'un outil pour vous aider à comprendre les problèmes qui peuvent survenir. Comme toujours, vous devez tester votre conception avec les utilisateurs pour vous assurer qu'elle est utilisable et accessible pour eux.

Lentille d'animation et d'effets

Des animations efficaces peuvent aider à donner vie à une page et à une marque, guider l'attention des utilisateurs et aider à orienter un utilisateur. Mais les animations sont une épée à double tranchant. Non seulement une mauvaise utilisation des animations peut causer de la confusion ou être distrayante, mais elles peuvent également être potentiellement mortelles pour certains utilisateurs.

Les effets de clignotement rapide (définis comme clignotant plus de trois fois par seconde) ou les effets et motifs de haute intensité peuvent provoquer des crises, appelées « épilepsie photosensible ». La photosensibilité peut également causer des maux de tête, des nausées et des étourdissements. Les utilisateurs souffrant d'épilepsie photosensible doivent être très prudents lorsqu'ils utilisent le Web car ils ne savent jamais quand quelque chose pourrait provoquer une crise.

D'autres effets, tels que la parallaxe ou les effets de mouvement, peuvent provoquer des étourdissements ou des vertiges chez certains utilisateurs en raison de la sensibilité vestibulaire. Le système vestibulaire contrôle l'équilibre et le sens du mouvement d'une personne. Lorsque ce système ne fonctionne pas comme il le devrait, il provoque des étourdissements et des nausées.

« Imaginez un monde où votre gyroscope interne ne fonctionne pas correctement. Tout comme être en état d'ébriété, les choses semblent bouger d'elles-mêmes, vos pieds ne semblent jamais tout à fait stables sous vous et vos sens se déplacent plus vite ou plus lentement que votre corps.

- Une introduction aux troubles vestibulaires

Des animations ou des mouvements constants peuvent également distraire les utilisateurs, en particulier ceux qui ont des difficultés à se concentrer. Les GIF sont particulièrement problématiques car nos yeux sont attirés par le mouvement, ce qui permet d'être facilement distrait par tout ce qui se met à jour ou bouge constamment.

Cela ne veut pas dire que l'animation est mauvaise et que vous ne devriez pas l'utiliser. Au lieu de cela, vous devez comprendre pourquoi vous utilisez l'animation et comment concevoir des animations plus sûres. D'une manière générale, vous devriez essayer de concevoir des animations qui couvrent de petites distances, correspondent à la direction et à la vitesse d'autres objets en mouvement (y compris le défilement) et sont relativement petites par rapport à la taille de l'écran.

Vous devez également fournir des contrôles ou des options pour répondre à l'expérience de l'utilisateur. Par exemple, Slack vous permet de masquer des images animées ou des emojis à la fois comme paramètre global et par image.

Pour utiliser l' objectif d'animation et d'effets , posez-vous ces questions :

• Y a-t-il des effets qui pourraient provoquer une crise?
• Y a-t-il des animations ou des effets qui pourraient provoquer des étourdissements ou des vertiges en utilisant le mouvement ?
• Y a-t-il des animations qui pourraient être distrayantes en se déplaçant constamment, en clignotant ou en se mettant à jour automatiquement ?
• Est-il possible de fournir des commandes ou des options pour arrêter, mettre en pause, masquer ou modifier la fréquence d'animations ou d'effets ?

Lentille de l'audio et de la vidéo

La lecture automatique de vidéos et d'audio peut être assez ennuyeuse. Non seulement ils brisent la concentration des utilisateurs, mais ils obligent également l'utilisateur à traquer le média incriminé et à le désactiver ou à l'arrêter. En règle générale, ne lisez pas automatiquement les médias.

"Utilisez la lecture automatique avec parcimonie. La lecture automatique peut être un puissant outil d'engagement, mais elle peut également ennuyer les utilisateurs si un son indésirable est joué ou s'ils perçoivent une utilisation inutile des ressources (par exemple, les données, la batterie) à la suite d'une lecture vidéo indésirable.

— Consignes de lecture automatique de Google

Vous vous demandez probablement maintenant : "Mais que se passe-t-il si je lance automatiquement la vidéo en arrière-plan mais que je la garde en sourdine ?" Bien que l'utilisation de vidéos comme arrière-plan puisse être une tendance croissante dans la conception Web d'aujourd'hui, les vidéos d'arrière-plan souffrent des mêmes problèmes que les GIF et les animations en mouvement constant : elles peuvent être gênantes. En tant que tel, vous devez fournir des commandes ou des options pour mettre en pause ou désactiver la vidéo.

En plus des commandes, les vidéos doivent avoir des transcriptions et/ou des sous-titres afin que les utilisateurs puissent consommer le contenu de la manière qui leur convient le mieux. Les utilisateurs malvoyants ou qui préfèrent lire au lieu de regarder la vidéo ont besoin d'une transcription, tandis que les utilisateurs qui ne peuvent pas ou ne veulent pas écouter la vidéo ont besoin de sous-titres.

Pour utiliser l' Objectif de l'Audio et de la Vidéo , posez-vous ces questions :

• Y a-t-il des éléments audio ou vidéo qui pourraient être gênants en lecture automatique ?
• Est-il possible de fournir des commandes pour arrêter, mettre en pause ou masquer tout fichier audio ou vidéo en lecture automatique ?
• Les vidéos ont-elles des transcriptions et/ou des sous-titres ?

Lentille de couleur

La couleur joue un rôle important dans un design. Les couleurs évoquent des émotions, des sentiments et des idées. Les couleurs peuvent également aider à renforcer le message et la perception d'une marque. Pourtant, le pouvoir des couleurs est perdu lorsqu'un utilisateur ne peut pas les voir ou les perçoit différemment.

Le daltonisme touche environ 1 homme sur 12 et 1 femme sur 200. La deutéranopie (daltonisme rouge-vert) est la forme la plus courante de daltonisme, affectant environ 6 % des hommes. Les utilisateurs atteints de daltonisme rouge-vert perçoivent généralement les rouges, les verts et les oranges comme jaunâtres.

La signification des couleurs est également problématique pour les utilisateurs internationaux. Les couleurs signifient différentes choses selon les pays et les cultures. Dans les cultures occidentales, le rouge est généralement utilisé pour représenter les tendances négatives et les tendances vertes positives, mais l'inverse est vrai dans les cultures orientales et asiatiques.

Étant donné que les couleurs et leurs significations peuvent être perdues en raison de différences culturelles ou du daltonisme, vous devez toujours ajouter un identifiant autre qu'une couleur. Les identifiants tels que les icônes ou les descriptions textuelles peuvent aider à combler les différences culturelles tandis que les modèles fonctionnent bien pour distinguer les couleurs.

Les couleurs sursaturées, les couleurs très contrastées et même la seule couleur jaune peuvent être inconfortables et troublantes pour certains utilisateurs, en particulier ceux du spectre autistique. Il est préférable d'éviter les concentrations élevées de ces types de couleurs pour aider les utilisateurs à rester à l'aise.

Un mauvais contraste entre les couleurs de premier plan et d'arrière-plan rend la visibilité plus difficile pour les utilisateurs malvoyants, utilisant un moniteur bas de gamme ou simplement exposés à la lumière directe du soleil. Tous les textes, icônes et tous les indicateurs de mise au point utilisés pour les utilisateurs utilisant un clavier doivent respecter un rapport de contraste minimum de 4,5:1 par rapport à la couleur d'arrière-plan.

Vous devez également vous assurer que votre conception et vos couleurs fonctionnent bien dans différents paramètres du mode Contraste élevé de Windows. Un écueil courant est que le texte devient invisible sur certains arrière-plans en mode contraste élevé.

Pour utiliser la Lentille de Couleur , posez-vous ces questions :

• Si la couleur était supprimée du dessin, quelle signification serait perdue ?
• Comment donner du sens sans utiliser de couleur ?
• Certaines couleurs sont-elles sursaturées ou ont-elles un contraste élevé qui pourrait rendre les utilisateurs trop stimulés ou mal à l'aise ?
• La couleur de premier plan et d'arrière-plan de tous les textes, icônes et indicateurs de mise au point respecte-t-elle les directives de rapport de contraste de 4,5:1 ?

Lentille des contrôles

Les contrôles, également appelés "contenu interactif", sont tous les éléments de l'interface utilisateur avec lesquels l'utilisateur peut interagir, qu'il s'agisse de boutons, de liens, d'entrées ou de tout élément HTML avec un écouteur d'événement. Des commandes trop petites ou trop rapprochées peuvent causer de nombreux problèmes aux utilisateurs.

Les petites commandes sont difficiles à cliquer pour les utilisateurs qui ne peuvent pas être précis avec un pointeur, comme ceux qui ont des tremblements ou ceux qui souffrent d'une dextérité réduite en raison de l'âge. La taille par défaut des cases à cocher et des boutons radio, par exemple, peut poser des problèmes aux utilisateurs plus âgés. Même lorsqu'une étiquette est fournie sur laquelle on peut cliquer à la place, tous les utilisateurs ne savent pas qu'ils peuvent le faire.

Des commandes trop rapprochées peuvent causer des problèmes aux utilisateurs d'écrans tactiles. Les doigts sont gros et difficiles à préciser. Toucher accidentellement le mauvais contrôle peut causer de la frustration, surtout si ce contrôle vous éloigne ou vous fait perdre votre contexte.

Les contrôles imbriqués dans un autre contrôle peuvent également contribuer aux erreurs tactiles. Non seulement cela n'est pas autorisé dans la spécification HTML, mais cela facilite également la sélection accidentelle du contrôle parent au lieu de celui que vous vouliez.

Pour donner aux utilisateurs suffisamment d'espace pour sélectionner avec précision un contrôle, la taille minimale recommandée pour un contrôle est de 34 x 34 pixels indépendants de l'appareil, mais Google recommande au moins 48 x 48 pixels, tandis que la spécification WCAG recommande au moins 44 x 44 pixels. Cette taille inclut également tout rembourrage du contrôle. Ainsi, un contrôle pourrait visuellement être de 24 x 24 pixels, mais avec 10 pixels supplémentaires de rembourrage de tous les côtés, il passerait à 44 x 44 pixels.

Il est également recommandé de placer les commandes suffisamment éloignées pour réduire les erreurs tactiles. Microsoft recommande un espacement d'au moins 8 pixels tandis que Google recommande que les contrôles soient espacés d'au moins 32 pixels.

Les contrôles doivent également avoir une étiquette de texte visible. Non seulement les lecteurs d'écran ont besoin de l'étiquette de texte pour savoir ce que fait le contrôle, mais il a été démontré que les étiquettes de texte aident tous les utilisateurs à mieux comprendre l'objectif d'un contrôle. Ceci est particulièrement important pour les entrées de formulaire et les icônes.

Pour utiliser la Lentille des contrôles , posez-vous ces questions :

• Certaines commandes ne sont-elles pas assez grandes pour que quelqu'un puisse les toucher ?
• Y a-t-il des commandes trop proches les unes des autres qui permettraient de toucher facilement la mauvaise ?
• Existe-t-il des contrôles à l'intérieur d'un autre contrôle ou d'une région cliquable ?
• Tous les contrôles ont-ils une étiquette de texte visible ?

Lentille de la police

Aux débuts du Web, nous avons conçu des pages Web avec une taille de police comprise entre 9 et 14 pixels. Cela fonctionnait très bien à l'époque, car les moniteurs avaient une taille d'écran relativement connue. Nous avons conçu en pensant que la fenêtre du navigateur était une constante, quelque chose qui ne pouvait pas être changé.

La technologie d'aujourd'hui est très différente de ce qu'elle était il y a 20 ans. Aujourd'hui, les navigateurs peuvent être utilisés sur n'importe quel appareil de n'importe quelle taille, d'une petite montre à un immense écran 4K. Nous ne pouvons plus utiliser des tailles de police fixes pour concevoir nos sites. Les tailles de police doivent être aussi réactives que le design lui-même.

Non seulement les tailles de police doivent être réactives, mais la conception doit être suffisamment flexible pour permettre aux utilisateurs de personnaliser la taille de la police, la hauteur des lignes ou l'espacement des lettres à un niveau de lecture confortable. De nombreux utilisateurs utilisent des CSS personnalisés qui les aident à avoir une meilleure expérience de lecture.

La police elle-même doit être facile à lire. Vous vous demandez peut-être si une police est plus lisible qu'une autre. La vérité est que la police ne fait pas vraiment de différence pour la lisibilité. Au lieu de cela, c'est le style de police qui joue un rôle important dans la lisibilité des polices.

Les styles de police décoratifs ou cursifs sont plus difficiles à lire pour de nombreux utilisateurs, mais particulièrement problématiques pour les utilisateurs dyslexiques. Les petites tailles de police, le texte en italique et tout le texte en majuscule sont également difficiles pour les utilisateurs. Dans l'ensemble, un texte plus grand, des longueurs de ligne plus courtes, des hauteurs de ligne plus hautes et un espacement accru des lettres peuvent aider tous les utilisateurs à avoir une meilleure expérience de lecture.

Pour utiliser le Lens of Font , posez-vous ces questions :

• La conception est-elle suffisamment flexible pour que la police puisse être modifiée à un niveau de lecture confortable par l'utilisateur ?
• Le style de police est-il facile à lire ?

Lentille d'images et d'icônes

On dit : « Une image vaut mille mots. » Pourtant, une image que vous ne pouvez pas voir est sans voix, n'est-ce pas ?

Les images peuvent être utilisées dans une conception pour transmettre une signification ou un sentiment spécifique. D'autres fois, ils peuvent être utilisés pour simplifier des idées complexes. Quel que soit le cas de l'image, un utilisateur qui utilise un lecteur d'écran doit être informé de la signification de l'image.

En tant que designer, vous comprenez mieux le sens ou l'information que l'image véhicule. En tant que tel, vous devez annoter la conception avec ces informations afin qu'elles ne soient pas oubliées ou mal interprétées plus tard. Il sera utilisé pour créer le texte alternatif de l'image.

La façon dont vous décrivez une image dépend entièrement du contexte ou de la quantité d'informations textuelles déjà disponibles qui décrivent les informations. Cela dépend également si l'image est juste pour la décoration, transmet une signification ou contient du texte.

"Vous ne décrivez presque jamais à quoi ressemble l'image, mais vous expliquez plutôt les informations qu'elle contient."

— Cinq règles d'or pour un texte alternatif conforme

Étant donné qu'il peut être difficile de savoir comment décrire une image, il existe un arbre de décision pratique pour vous aider à prendre une décision. De manière générale, si l'image est décorative ou qu'il y a du texte environnant qui décrit déjà les informations de l'image, aucune autre information n'est nécessaire. Sinon, vous devez décrire les informations de l'image. Si l'image contient du texte, répétez également le texte dans la description.

Les descriptions doivent être succinctes. Il est recommandé de ne pas utiliser plus de deux phrases, mais visez une phrase concise lorsque cela est possible. Cela permet aux utilisateurs de comprendre rapidement l'image sans avoir à écouter une longue description.

Par exemple, si vous deviez décrire cette image pour un lecteur d'écran, que diriez-vous ?

Puisque nous décrivons les informations de l'image et non l'image elle-même, la description pourrait être La Nuit étoilée de Vincent van Gogh puisqu'il n'y a pas d'autre contexte environnant qui la décrit. Ce que vous ne devriez pas mettre, c'est une description du style de la peinture ou à quoi ressemble l'image.

Si les informations de l'image nécessitent une longue description, comme un graphique complexe, vous ne devez pas mettre cette description dans le texte alternatif. Au lieu de cela, vous devez toujours utiliser une courte description pour le texte alternatif, puis fournir la description longue sous forme de légende ou de lien vers une autre page.

De cette façon, les utilisateurs peuvent toujours obtenir rapidement les informations les plus importantes, mais ont la possibilité d'approfondir s'ils le souhaitent. Si l'image est celle d'un graphique, vous devez répéter les données du graphique comme vous le feriez pour le texte de l'image.

Si la plate-forme pour laquelle vous concevez permet aux utilisateurs de télécharger des images, vous devez fournir à l'utilisateur un moyen de saisir le texte alternatif avec l'image. Par exemple, Twitter permet à ses utilisateurs d'écrire du texte alternatif lorsqu'ils téléchargent une image dans un tweet.

Pour utiliser la Lentille d'Images et d'Icônes , posez-vous ces questions :

• Une image contient-elle des informations qui seraient perdues si elles n'étaient pas visibles ?
• Comment pourrais-je fournir les informations de manière non visuelle ?
• Si l'image est contrôlée par l'utilisateur, est-il possible de lui fournir un moyen d'entrer la description du texte alternatif ?

Lentille du clavier

L'accessibilité du clavier est l'un des aspects les plus importants d'une conception accessible, mais c'est aussi l'un des plus négligés.

Il existe de nombreuses raisons pour lesquelles un utilisateur utiliserait un clavier au lieu d'une souris. Les utilisateurs qui utilisent un lecteur d'écran utilisent le clavier pour lire la page. Un utilisateur souffrant de tremblements peut utiliser un clavier car il offre une meilleure précision qu'une souris. Même les utilisateurs expérimentés utiliseront un clavier car il est plus rapide et plus efficace.

Un utilisateur utilisant un clavier utilise généralement la touche de tabulation pour accéder à chaque contrôle dans l'ordre. Un ordre logique pour l'ordre des onglets aide grandement les utilisateurs à savoir où la prochaine pression de touche les mènera. Dans les cultures occidentales, cela signifie généralement de gauche à droite, de haut en bas. Des ordres de tabulation inattendus entraînent la perte des utilisateurs et la nécessité de rechercher frénétiquement où se concentre l'attention.

L'ordre de tabulation séquentiel signifie également qu'ils doivent parcourir tous les contrôles qui précèdent celui qu'ils souhaitent. Si ce contrôle est à des dizaines ou des centaines de frappes, cela peut être un véritable problème pour l'utilisateur.

En rapprochant les flux d'utilisateurs les plus importants du haut de l'ordre des onglets, nous pouvons aider nos utilisateurs à être plus efficaces. Cependant, ce n'est pas toujours possible ni pratique à faire. Dans ces cas, fournir un moyen d'accéder rapidement à un flux ou à un contenu particulier peut toujours leur permettre d'être efficaces. C'est pourquoi les liens "passer au contenu" sont utiles.

Un bon exemple de ceci est Facebook qui fournit un menu de navigation au clavier qui permet aux utilisateurs d'accéder à des sections spécifiques du site. Cela accélère considérablement la capacité d'un utilisateur à interagir avec la page et le contenu qu'il souhaite.

Lorsque vous parcourez une conception avec une tabulation, les styles de focus doivent toujours être visibles ou un utilisateur peut facilement se perdre. Tout comme un ordre de tabulation inattendu, ne pas avoir de bons indicateurs de focus fait que les utilisateurs ne savent pas ce qui est actuellement focalisé et doivent scanner la page.

Changer l'apparence de l'indicateur de focus par défaut peut parfois améliorer l'expérience des utilisateurs. Un bon indicateur de mise au point ne repose pas uniquement sur la couleur pour indiquer la mise au point (lentille de couleur) et doit être suffisamment distinct pour permettre à l'utilisateur de le trouver facilement. Par exemple, un anneau de mise au point bleu autour d'un bouton bleu de couleur similaire peut ne pas être visuellement distinct pour discerner qu'il est mis au point.

Bien que cet objectif se concentre sur l'accessibilité du clavier, il est important de noter qu'il s'applique à toutes les manières dont un utilisateur peut interagir avec un site Web sans souris. Les appareils tels que les sticks buccaux, les boutons d'accès aux commutateurs, les boutons de siroter et de souffler et les logiciels de suivi des yeux nécessitent tous que la page soit accessible au clavier.

En améliorant l'accessibilité du clavier, vous permettez à un large éventail d'utilisateurs d'accéder plus facilement à votre site.

Pour utiliser le Lens of Keyboard , posez-vous ces questions :

• Quel ordre de navigation au clavier est le plus logique pour la conception ?
• Comment un utilisateur de clavier peut-il accéder à ce qu'il veut le plus rapidement possible ?
• L'indicateur de mise au point est-il toujours visible et visuellement distinct ?

Lentille de mise en page

La mise en page contribue grandement à la convivialité d'un site. Avoir une mise en page facile à suivre avec un contenu facile à trouver fait toute la différence pour vos utilisateurs. Une mise en page doit avoir une séquence significative et logique pour l'utilisateur.

Avec l'avènement de CSS Grid, il est plus facile que jamais de pouvoir modifier la mise en page pour qu'elle soit plus significative en fonction de l'espace disponible. Cependant, la modification de la disposition visuelle crée des problèmes pour les utilisateurs qui s'appuient sur la disposition structurelle de la page.

La disposition structurelle est ce qui est utilisé par les lecteurs d'écran et les utilisateurs utilisant un clavier. Lorsque la disposition visuelle change mais pas la disposition structurelle sous-jacente, ces utilisateurs peuvent devenir confus car leur ordre de tabulation n'est plus logique. Si vous devez modifier la disposition visuelle, vous devez le faire en modifiant la disposition structurelle afin que les utilisateurs utilisant un clavier conservent un ordre de tabulation séquentiel et logique.

La mise en page doit être redimensionnable et flexible à un minimum de 320 pixels sans barres de défilement horizontales afin qu'elle puisse être visualisée confortablement sur un téléphone. La mise en page doit également être suffisamment flexible pour être agrandie à 400 % (également sans barres de défilement horizontales) pour les utilisateurs qui ont besoin d'augmenter la taille de la police pour une meilleure expérience de lecture.

Les utilisateurs utilisant une loupe d'écran bénéficient lorsque le contenu connexe est à proximité les uns des autres. Une loupe d'écran ne fournit à l'utilisateur qu'une petite vue de l'ensemble de la mise en page, de sorte que le contenu qui est lié mais éloigné, ou qui change loin de l'endroit où l'interaction s'est produite est difficile à trouver et peut passer inaperçu.

Pour utiliser le Lens of Layout , posez-vous ces questions :

• La mise en page a-t-elle une séquence significative et logique ?
• Que doit-il advenir de la mise en page lorsqu'elle est affichée sur un petit écran ou agrandie à 400 % ?
• Le contenu lié ou modifié en raison de l'interaction de l'utilisateur est-il à proximité l'un de l'autre ?

Objectif d'honnêteté matérielle

L'honnêteté matérielle est une valeur de conception architecturale qui stipule qu'un matériau doit être honnête avec lui-même et ne pas être utilisé comme substitut à un autre matériau. Cela signifie que le béton doit ressembler à du béton et ne pas être peint ou sculpté pour ressembler à des briques.

L'honnêteté matérielle valorise et célèbre les propriétés et caractéristiques uniques de chaque matériau. Un architecte qui suit l'honnêteté matérielle sait quand chaque matériau doit être utilisé et comment l'utiliser sans se ternir.

L'honnêteté matérielle n'est cependant pas une règle absolue. Il se situe sur un continuum. Comme toutes les valeurs, vous êtes autorisé à les casser lorsque vous les comprenez. Comme le dit le dicton, ce sont "plus ce que vous appelleriez des "directives" que des règles réelles".

Lorsqu'elle est appliquée à la conception Web, l'honnêteté matérielle signifie qu'un élément ou un composant ne doit pas ressembler, se comporter ou fonctionner comme s'il s'agissait d'un autre élément ou composant. Cela tromperait l'utilisateur et pourrait prêter à confusion. Un exemple courant de ceci sont les boutons qui ressemblent à des liens ou les liens qui ressemblent à des boutons.

Les liens et les boutons ont des comportements et des affordances différents. Un lien est activé avec la touche Entrée, vous amène généralement à une autre page et dispose d'un menu contextuel spécial sur clic droit. Les boutons sont activés avec la touche espace, utilisés principalement pour déclencher des interactions sur la page en cours, et n'ont pas de tel menu contextuel.

Lorsqu'un lien est conçu pour ressembler à un bouton ou vice versa, un utilisateur peut devenir confus car il ne se comporte pas et ne fonctionne pas comme il le semble. Si le "bouton" éloigne l'utilisateur de manière inattendue, il peut être frustré s'il perd des données au cours du processus.

« À première vue, tout semble bien, mais cela ne résistera pas à un examen minutieux. Dès qu'un tel site Web est testé sous contrainte par une utilisation réelle sur une gamme de navigateurs, la façade s'effondre.

— Conception Web résiliente

Là où cela devient le plus problématique, c'est lorsqu'un lien et un bouton ont le même style et sont placés l'un à côté de l'autre. Comme il n'y a rien à différencier entre les deux, un utilisateur peut accidentellement naviguer alors qu'il pensait ne pas le faire.

Lorsqu'un composant se comporte différemment que prévu, cela peut facilement entraîner des problèmes pour les utilisateurs utilisant un clavier ou un lecteur d'écran. Un menu de saisie semi-automatique qui est plus qu'un menu de saisie semi-automatique en est un exemple.

La saisie semi-automatique est utilisée pour suggérer ou prédire le reste d'un mot qu'un utilisateur est en train de taper. Un menu de saisie semi-automatique permet à un utilisateur de choisir parmi une longue liste d'options lorsque toutes les options ne peuvent pas être affichées.

Un menu de saisie semi-automatique est généralement attaché à un champ de saisie et est parcouru avec les touches fléchées haut et bas, en gardant le focus à l'intérieur du champ de saisie. Lorsqu'un utilisateur sélectionne une option dans la liste, cette option remplace le texte dans le champ de saisie. Les menus de saisie semi-automatique sont censés être des listes de texte uniquement.

Le problème survient lorsqu'un menu de saisie semi-automatique commence à acquérir plus de comportements. Non seulement vous pouvez sélectionner une option dans la liste, mais vous pouvez également la modifier, la supprimer ou même développer ou réduire des sections. Le menu de saisie semi-automatique n'est plus une simple liste de texte sélectionnable.

Les comportements ajoutés ne signifient plus que vous pouvez simplement utiliser les flèches haut et bas pour sélectionner une option. Chaque option a maintenant plus d'une action, donc un utilisateur doit être capable de parcourir deux dimensions au lieu d'une seule. Cela signifie qu'un utilisateur utilisant un clavier pourrait devenir confus sur la façon d'utiliser le composant.

Les lecteurs d'écran souffrent le plus de ce changement de comportement car il n'existe aucun moyen simple de les aider à le comprendre. Beaucoup de travail sera nécessaire pour s'assurer que le menu est accessible à un lecteur d'écran en utilisant des moyens non standard. En tant que tel, cela pourrait entraîner une expérience médiocre ou inaccessible pour eux.

Pour éviter ces problèmes, il est préférable d'être honnête envers l'utilisateur et la conception. Au lieu de combiner deux comportements distincts (un menu de saisie semi-automatique et des fonctionnalités de modification et de suppression), laissez-les comme deux comportements distincts. Utilisez un menu de saisie semi-automatique pour compléter automatiquement le nom d'un utilisateur et disposer d'un composant ou d'une page différente pour modifier et supprimer des utilisateurs.

Pour utiliser la lentille de l'honnêteté matérielle , posez-vous ces questions :

• La conception est-elle honnête pour l'utilisateur ?
• Y a-t-il des éléments qui se comportent, ressemblent ou fonctionnent comme un autre élément ?
• Existe-t-il des composants qui combinent des comportements distincts en un seul composant ? Cela rend-il le composant matériellement malhonnête ?

Lentille de lisibilité

Avez-vous déjà pris un livre pour n'avoir que quelques paragraphes ou pages et que vous vouliez abandonner parce que le texte était trop difficile à lire ? Le contenu difficile à lire est mentalement éprouvant et fatigant.

La longueur des phrases, la longueur des paragraphes et la complexité du langage contribuent toutes à la lisibilité du texte. Un langage complexe peut poser des problèmes aux utilisateurs, en particulier ceux qui ont des troubles cognitifs ou qui ne maîtrisent pas la langue.

En plus d'utiliser un langage clair et simple, vous devez vous assurer que chaque paragraphe se concentre sur une seule idée. Un paragraphe avec une seule idée est plus facile à retenir et à assimiler. Il en va de même pour une phrase avec moins de mots.

Un autre facteur contribuant à la lisibilité du contenu est la longueur d'une ligne. La longueur de ligne idéale est souvent comprise entre 45 et 75 caractères. Une ligne trop longue fait perdre la concentration aux utilisateurs et rend plus difficile le passage correct à la ligne suivante, tandis qu'une ligne trop courte fait sauter les utilisateurs trop souvent, provoquant une fatigue oculaire.

"L'esprit subconscient est stimulé lors du saut à la ligne suivante. Au début de chaque nouvelle ligne, le lecteur est concentré, mais cette concentration s'estompe progressivement au fil de la ligne »

— Typographie : un manuel de conception

Vous devez également décomposer le contenu avec des titres, des listes ou des images pour donner des pauses mentales au lecteur et soutenir différents styles d'apprentissage. Utilisez des en-têtes pour regrouper et résumer logiquement les informations. Les en-têtes, les liens, les commandes et les étiquettes doivent être clairs et descriptifs pour améliorer la capacité de compréhension des utilisateurs.

Pour utiliser l' Objectif de lisibilité , posez-vous ces questions :

• Le langage est-il clair et simple ?
• Chaque paragraphe se concentre-t-il sur une seule idée ?
• Y a-t-il de longs paragraphes ou de longs blocs de texte ininterrompu ?
• Tous les titres, liens, contrôles et étiquettes sont-ils clairs et descriptifs ?

Lentille de structure

Comme mentionné dans le Lens of Layout, la disposition structurelle est ce qui est utilisé par les lecteurs d'écran et les utilisateurs utilisant un clavier. Alors que l'objectif de mise en page se concentrait sur la mise en page visuelle, l'objectif de structure se concentre sur la mise en page structurelle, ou le HTML sous-jacent et la sémantique de la conception.

En tant que designer, vous ne pouvez pas écrire la disposition structurelle de vos conceptions. Cela ne devrait pas vous empêcher de réfléchir à la façon dont votre conception sera finalement structurée. Sinon, votre conception peut entraîner une expérience inaccessible pour un lecteur d'écran.

Prenons par exemple une conception pour un support de tournoi à élimination simple.

Comment sauriez-vous si cette conception était accessible à un utilisateur utilisant un lecteur d'écran ? Sans comprendre la structure et la sémantique, vous ne pouvez pas. Dans l'état actuel des choses, la conception entraînerait probablement une expérience inaccessible pour un utilisateur utilisant un lecteur d'écran.

Pour comprendre pourquoi, nous devons d'abord comprendre qu'un lecteur d'écran lit une page et son contenu dans un ordre séquentiel. Cela signifie que chaque nom de la première colonne du tournoi serait lu, suivi de tous les noms de la deuxième colonne, puis de la troisième, puis de la dernière.

"George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger."

Si tout ce que vous aviez était une liste de noms apparemment aléatoires, comment interpréteriez-vous les résultats du tournoi ? Pourriez-vous dire qui a remporté le tournoi ? Ou qui a gagné le match 6 ?

N'ayant plus rien à faire, un utilisateur utilisant un lecteur d'écran serait probablement un peu confus quant aux résultats. Pour pouvoir comprendre la conception visuelle, nous devons fournir à l'utilisateur plus d'informations dans la conception structurelle.

Cela signifie qu'en tant que concepteur, vous devez savoir comment un lecteur d'écran interagit avec les éléments HTML d'une page afin de savoir comment améliorer leur expérience.

• Éléments de repère (en-tête, navigation, main et pied de page)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”