Fermer

avril 9, 2018

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 entendirent encore et encore lors d'une conférence. Concevoir des moyens d'accessibilité pour être inclusif aux besoins de vos utilisateurs . Cela inclut vos utilisateurs cibles, les utilisateurs en dehors de votre groupe cible, les utilisateurs handicapés et même les utilisateurs de différentes cultures et pays. 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 concevions intentionnellement pour exclure les utilisateurs, c'est juste que " nous ne savons pas ce que nous ne savons pas ." Donc, quand il s'agit d'accessibilité, il y a beaucoup à savoir.

Comment pouvons-nous 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 de visualisation d'un design à travers différentes lentilles.

Un objectif est "un filtre rétréci par lequel un sujet peut être considéré ou «Souvent utilisées pour examiner des œuvres d'art, de littérature ou de cinéma, les lentilles nous demandent de laisser derrière nous notre vision du monde et de voir le monde dans un contexte différent.

Par exemple, regarder l'art à travers 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 mondiales ont influencé l'artiste et comment cela a façonné l'œuvre et son message. 19659006] Les lentilles d'accessibilité sont un filtre que nous pouvons utiliser pour comprendre comment les différents aspects de la conception affectent les besoins des utilisateurs. Chaque objectif présente une série de questions à vous 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:

Vous devriez savoir que chaque lentille ne s'appliquera pas à tous les designs. Alors que certains peuvent s'appliquer à chaque design, 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 sont simplement un outil pour vous aider à comprendre quels problèmes peuvent survenir. Comme toujours, vous devriez tester votre design avec les utilisateurs pour s'assurer qu'il est utilisable et accessible.

Lentille d'animation et d'effets

Des animations efficaces peuvent aider à donner vie à une page et à une marque un utilisateur. Mais les animations sont une épée à double tranchant. Non seulement les animations malveillantes peuvent être source de confusion ou de distraction, mais elles peuvent également être mortelles pour certains utilisateurs.

Les effets clignotants rapides (définis comme clignotants plus de trois fois par seconde) ou les effets et motifs de haute intensité peuvent provoquer des crises. connu sous le nom ' épilepsie photosensible .' La photosensibilité peut également causer des maux de tête, des nausées et des vertiges. 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 causer une crise

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

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

Troubles

Les animations ou les mouvements constants peuvent également distraire les utilisateurs, en particulier les utilisateurs qui ont de la difficulté à se concentrer. Les GIF sont particulièrement problématiques car nos yeux sont attirés vers le mouvement, ce qui rend facile d'être 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 devriez comprendre pourquoi vous utilisez l'animation et comment concevoir des animations plus sûres . En règle générale, vous devriez essayer de concevoir des animations qui couvrent de petites distances, correspondre à la direction et à la vitesse des autres objets en mouvement (défilement compris) et être relativement petites par rapport à la taille de l'écran.

pour l'utilisateur. Par exemple, Slack vous permet de masquer des images animées ou emojis à la fois comme paramètre global et par image.

Pour utiliser la Lentille d'animation et d'effets posez-vous ces questions:

  • Y a-t-il des effets qui pourraient causer une crise?
  • Y at-il des animations ou des effets qui pourraient provoquer des étourdissements ou des vertiges?
  • Y a-t-il des animations qui pourraient distraire?
  • Est-il possible de fournir des commandes ou des options pour arrêter, mettre en pause, masquer ou modifier la fréquence des animations ou des effets?

Objectif de l'audio et de la vidéo

Lecture automatique de vidéos et d'audio peut être assez ennuyeux. Non seulement ils brisent la concentration des utilisateurs, mais ils forcent aussi l'utilisateur à traquer le média incriminé et à le mettre en sourdine ou à l'arrêter. En règle générale, ne pas lire les médias par autoplay.

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

Google Autoplay guidelines

Vous vous demandez probablement: "Mais que faire si je lance la vidéo en arrière-plan mais la conserve en sourdine?" Alors que utilise des vidéos en arrière-plan souffrent des mêmes problèmes que les GIF et les animations en mouvement constant: ils peuvent être gênants. En tant que tel, vous devez fournir des contrôles ou des options pour suspendre ou désactiver la vidéo.

Avec les contrôles, les vidéos doivent avoir des transcriptions et / ou sous-titres afin que les utilisateurs puissent consommer le contenu. 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 ou ne veulent pas écouter la vidéo ont besoin de sous-titres.

Pour utiliser la lentille posez-vous ces questions:

  • Y a-t-il de l'audio ou de la vidéo qui pourrait être ennuyeux en autoplaying?
  • Est-il possible de fournir des contrôles pour arrêter, mettre en pause ou masquer
  • Est-ce que les vidéos ont des transcriptions et / ou des sous-titres?

Lens Of Color

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

La cécité des couleurs touche environ 1 homme sur 12 et 1 femme sur 200 . Deutéranopie (daltonisme rouge-vert) est la forme la plus commune de daltonisme, affectant environ 6% des hommes. Les utilisateurs qui ont un daltonisme rouge-vert voient généralement les rouges, les verts et les orangés jaunâtres.


 Tableau de référence de la cécité des couleurs pour la deutérophanie, la protanopie et la tritanopie
La deutéranopie (coloration daltonienne) est fréquente. jaune et vert à paraître beige. La protanopie (cécité rouge) est rare et fait apparaître les rouges foncés / noirs et les oranges / verts comme jaunes. La tritanopie (daltonisme bleu-jaune) est très rare et les bleus apparaissent plus verts / sarcelles et les jaunes apparaissent violets / gris. ( Source ) ( Grand aperçu )

Le sens des couleurs est également problématique pour les utilisateurs internationaux. Les couleurs signifient des choses différentes 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 c'est le contraire dans les cultures orientales et asiatiques

Parce que les couleurs et leurs significations peuvent être perdues daltonisme, vous devez toujours ajouter un identificateur non-couleur. Les identificateurs tels que les icônes ou les descriptions de texte peuvent aider à combler les différences culturelles tandis que les modèles fonctionnent bien pour distinguer les couleurs.


 Six étiquettes de couleur. Cinq utilisent un motif tandis que le sixième ne le fait pas
Les étiquettes amies de Trello utilisent des motifs différents pour distinguer les couleurs. ( Grand aperçu )

Les couleurs sursaturées, les couleurs contrastées et même la couleur jaune peuvent être inconfortables et déstabilisantes pour certains utilisateurs en particulier ceux qui sont sur le spectre de l'autisme. Il est préférable d'éviter de fortes concentrations de ces types de couleurs pour aider les utilisateurs à rester à l'aise.

Un contraste médiocre entre les couleurs de premier plan et d'arrière-plan rend plus difficile à voir pour les utilisateurs malvoyants. lumière directe du soleil. Tous les textes, icônes et indicateurs de mise au point utilisés pour les utilisateurs utilisant un clavier doivent présenter un rapport de contraste minimum de de 4,5: 1 à la couleur de fond.

Vous devez également vous assurer que votre design et vos couleurs fonctionnent bien. différents paramètres de Windows High Contrast mode . Un piège commun est que le texte devient invisible sur certains arrière-plans en mode contraste élevé.

Pour utiliser le Objectif de couleur posez-vous ces questions:

  • Si la couleur a été retirée du design,
  • Comment est-ce que je pourrais donner un sens sans utiliser de couleur?
  • Y a-t-il des couleurs sursaturées ou à contraste élevé qui pourraient rendre les utilisateurs excessifs ou inconfortables?
  • les icônes, et les indicateurs de focus respectent les directives de rapport de contraste de 4.5: 1

Lentille de Contrôles

Contrôles, également appelés «contenu interactif », sont des éléments d'interface utilisateur avec lesquels l'utilisateur peut interagir, ils sont des boutons, des liens, des entrées ou tout élément HTML avec un écouteur d'événement. Les contrôles qui sont trop petits ou trop rapprochés peuvent causer beaucoup de problèmes aux utilisateurs.

Les petits contrôles 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 de une dextérité réduite due à 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 si une étiquette est fournie sur laquelle on pourrait cliquer à la place, tous les utilisateurs ne savent pas qu'ils peuvent le faire

Les contrôles trop rapprochés peuvent causer des problèmes aux utilisateurs d'écrans tactiles. Les doigts sont gros et difficiles à préciser. Si vous touchez accidentellement un mauvais contrôle, vous risquez d'être frustré, surtout si ce contrôle vous fait fuir ou vous fait perdre votre contexte.


 Le tweet qui dit que le logiciel est fait est comme si la pelouse était tondue. Jim Benson
Lorsque vous touchez un tweet d'une seule ligne, il est très facile de cliquer accidentellement sur le nom ou la poignée de la personne au lieu d'ouvrir le tweet parce qu'il n'y a pas assez d'espace entre eux. ( Source ) ( Grand aperçu )

Les contrôles imbriqués dans un autre contrôle peuvent également contribuer aux erreurs de contact. Non seulement cela n'est pas autorisé dans la spécification HTML mais il est également facile de sélectionner accidentellement le contrôle parent au lieu de celui que vous vouliez

Pour donner aux utilisateurs suffisamment de place pour sélectionner un contrôle, la taille minimale recommandée pour un contrôle est 34 par 34 pixels indépendants du périphérique, mais Google recommande au moins 48 par 48 pixels tandis que la spécification WCAG recommande au moins 44 par 44 pixels . Cette taille inclut également tout rembourrage que le contrôle a. Ainsi, un contrôle pourrait visuellement être de 24 pixels sur 24 pixels, mais avec 10 pixels de rembourrage supplémentaires sur tous les côtés, il serait de 44 pixels sur 44.

Il est également recommandé de placer les contrôles suffisamment loin pour réduire les erreurs tactiles. Microsoft recommande au moins 8 pixels d'espacement, 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 le contrôle fait, mais il a été démontré que les étiquettes de texte aident tous les utilisateurs à mieux comprendre le but 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 les questions suivantes:

  • Y a-t-il des contrôles pas assez grands pour toucher quelqu'un? des commandes trop proches les unes des autres, ce qui faciliterait le mauvais contact?
  • Y a-t-il des contrôles dans un autre contrôle ou dans une région cliquable?
  • Est-ce que toutes les commandes ont une étiquette de texte visible? Au tout début du Web, nous avons conçu des pages Web avec une taille de police comprise entre 9 et 14 pixels . Cela a bien fonctionné à l'époque alors que 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 la petite montre à l'énorme écran 4K. Nous ne pouvons plus utiliser des tailles de police fixes pour concevoir nos sites. Les tailles de police doivent être aussi sensibles que la conception elle-même.

    Les tailles de police doivent être suffisamment flexibles pour permettre aux utilisateurs de personnaliser la taille de la police, la hauteur de la ligne ou l'espacement des lettres. . De nombreux utilisateurs utilisent le CSS personnalisé qui leur permet d'avoir une meilleure expérience de lecture .

    La ​​police elle-même devrait ê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é. C'est plutôt 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 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 élevées et un espacement accru des lettres peuvent aider tous les utilisateurs à mieux lire.

    Pour utiliser le Lens of Font posez-vous ces questions: ] La conception est-elle suffisamment flexible pour que l'utilisateur puisse modifier la police à un niveau de lecture confortable?

  • Le style de police est-il facile à lire?

Lentille d'images et d'icônes

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 un design pour transmettre un sens ou un sentiment spécifique. D'autres fois, ils peuvent être utilisés pour simplifier des idées complexes. Quel que soit le cas pour l'image, un utilisateur qui utilise un lecteur d'écran doit être informé de la signification de l'image.

En tant que concepteur, vous comprenez mieux la signification ou l'information que l'image véhicule. En tant que tel, vous devez annoter le dessin avec cette information afin qu'il ne soit pas oublié ou mal interprété plus tard. Cela sera utilisé pour créer le texte alt pour 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écrit l'information. Cela dépend aussi si l'image est juste pour la décoration, donne un sens, ou contient du texte.

"Vous ne décrivez presque jamais à quoi ressemble l'image, à la place vous expliquez l'information que l'image contient."

Cinq règles d'or pour le texte alternatif conforme

Depuis savoir comment décrire une image peut être difficile, il y a un arbre de décision pratique pour aider à décider. De manière générale, si l'image est décorative ou qu'il y a un texte qui décrit déjà l'information 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 aussi le texte dans la description.

Les descriptions doivent être succinctes. Il est recommandé de ne pas utiliser plus de deux phrases, mais viser 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?


 La nuit étoilée de Vincent van Gogh
Source ( Grand aperçu )

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

Si l'information de l'image nécessite une longue description, comme un graphique complexe, vous ne devriez pas mettre cette description dans le texte alt. Au lieu de cela, vous devriez toujours utiliser une courte description pour le texte alt, puis fournir la description longue comme légende ou lien vers une page différente .

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

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

Pour utiliser le Objectif d'Images et d'Icônes posez-vous ces questions: [19659019] Est-ce qu'une image contient des informations qui seraient perdues si elle n'était pas visible?

  • Comment pourrais-je fournir l'information de manière non-visuelle?
  • Si l'image est contrôlée par l'utilisateur, est-il possible de fournir
  • Lens Of Keyboard

    L'accessibilité au clavier est parmi les aspects les plus importants d'un design accessible, mais il est aussi parmi les plus négligés.

    Il y a beaucoup de 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 avec des tremblements peut utiliser un clavier, car il fournit une meilleure précision qu'une souris. Même les utilisateurs expérimentés utiliseront un clavier parce qu'il est plus rapide et plus efficace.

    Un utilisateur utilisant un clavier utilise généralement la touche de tabulation pour naviguer dans chaque commande en séquence. Un ordre logique pour l'ordre des onglets aide grandement les utilisateurs à savoir où la prochaine touche les prendra. Dans les cultures occidentales, cela signifie généralement de gauche à droite, de haut en bas. Les commandes de onglets inattendues entraînent la perte d'utilisateurs et la nécessité d'effectuer une analyse frénétique pour déterminer où l'accent a été mis.

    L'ordre séquentiel des onglets signifie également qu'ils doivent parcourir tous les contrôles antérieurs à celui qu'ils souhaitent. Si ce contrôle est éloigné de dizaines ou de centaines de touches, cela peut être un réel problème pour l'utilisateur.

    En faisant en sorte que les flux d'utilisateurs les plus importants se trouvent plus en haut de l'ordre, nous pouvons aider nos utilisateurs efficace et efficiente. Cependant, ce n'est pas toujours possible ni pratique à faire. Dans ces cas, fournir un moyen de passer rapidement à un flux ou un contenu particulier peut tout de même leur permettre d'être efficace. C'est pourquoi les liens "skip to content" sont utiles.

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


     facebook
    Facebook fournit un moyen pour tous les utilisateurs de clavier de sauter à des sections spécifiques de la page, ou d'autres pages de Facebook, ainsi qu'un menu d'aide à l'accessibilité. ( Grand aperçu )

    Lors de la tabulation d'un dessin, les styles de mise au point doivent toujours être visibles ou un utilisateur peut facilement se perdre. Tout comme une commande de tabulation inattendue, ne pas avoir de bons indicateurs de focus entraîne des utilisateurs ne sachant pas ce qui est actuellement focalisé et devant 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 dépend pas uniquement de la couleur pour indiquer la mise au point (objectif de couleur) et doit être assez distinct pour permettre à l'utilisateur de le trouver facilement. Par exemple, un anneau de mise au point bleu autour d'un bouton bleu de même couleur peut ne pas être visuellement distinct pour discerner qu'il est focalisé.

    Bien que cet objectif se concentre sur l'accessibilité du clavier, il est important de noter avec un site web sans souris. Les dispositifs tels que les bâtonnets, les boutons d'accès au commutateur, les boutons de siphon et les logiciels de suivi oculaire exigent tous que la page soit accessible au clavier.

    En améliorant l'accessibilité au clavier, vous permettez à un large éventail d'utilisateurs d'accéder à votre site. 19659007] Pour utiliser le Lens of Keyboard posez-vous les questions suivantes:

    • Quel ordre de navigation au clavier est le plus logique pour le design?
    • Comment un utilisateur de clavier peut-il obtenir ce qu'il veut?
    • L'indicateur de mise au point est-il toujours visible et visuellement distinct?

    Lens Of Layout

    La mise en page contribue énormément à 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 devrait avoir une séquence significative et logique pour l'utilisateur.

    Avec l'avènement de CSS Grid, il est plus facile que jamais de changer la mise en page pour qu'elle soit plus significative en fonction de l'espace disponible. Cependant, changer 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 employé par des lecteurs d'écran et des utilisateurs utilisant un clavier. Lorsque la mise en page visuelle change mais pas la mise en page 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 maintiennent un ordre de tabulation séquentiel et logique.

    La ​​mise en page doit être redimensionnable et flexible jusqu'à 320 pixels sans défilement horizontal barres afin qu'il puisse être vu confortablement sur un téléphone. La mise en page doit également être suffisamment flexible pour être agrandie à 400% (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 contenu connexe est à proximité les uns des autres . Un agrandisseur d'écran fournit seulement à l'utilisateur une petite vue de la mise en page entière, donc le contenu qui est lié mais lointain, ou les changements loin de l'endroit où l'interaction s'est produite est difficile à trouver et peut passer inaperçu. le fait de cliquer sur un bouton ne met pas à jour l'interface « />

    Lorsque vous effectuez une recherche sur CodePen, le bouton de recherche se trouve dans le coin supérieur droit de la page. Cliquer sur le bouton révèle une grande entrée de recherche sur le côté opposé de l'écran. Un utilisateur utilisant une loupe d'écran aurait du mal à remarquer le changement et penserait que le bouton ne fonctionne pas. ( Grand aperçu )

    Pour utiliser le Lentille de mise en page posez-vous les questions suivantes:

    • La mise en page a-t-elle une suite logique et logique? à la mise en page quand il est vu sur un petit écran ou zoomé à 400%?
    • Est-ce que le contenu est lié ou change en raison de l'interaction de l'utilisateur à proximité les uns des autres

    Lens of Material Honesty

    [19459077L'honnêtetématérielleestunevaleurdeconceptionarchitecturale qui stipule qu'un matériau doit être honnête envers lui-même et ne pas être utilisé comme un substitut à un autre matériau. Cela signifie que le béton devrait ressembler au 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 uniques et les caractéristiques 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 repose sur un continuum . Comme toutes les valeurs, vous pouvez les casser quand vous les comprenez. Comme le dit le dicton, ils sont "plus ce que vous appelleriez" des directives "que des règles réelles."

    Lorsqu'il est appliqué au design web l'honnêteté matérielle signifie qu'un élément ou un composant ne doit pas regarder, se comporter, ou fonctionner comme s'il s'agissait d'un autre élément ou composant. Cela risquerait de tromper l'utilisateur et pourrait entraîner de la confusion. Les boutons qui ressemblent à des liens ou des liens qui ressemblent à des boutons en sont un exemple courant.

    Les liens et les boutons ont des comportements et des affordances différents . Un lien est activé avec la touche d'entrée, vous amène généralement à une page différente, et a un menu contextuel spécial sur un 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 menu contextuel.

    Lorsqu'un lien est stylisé pour ressembler à un bouton ou inversement, un utilisateur peut devenir confus comme il le fait ne pas se comporter et fonctionner comme il semble. Si le «bouton» déconnecte l'utilisateur de façon inattendue, il peut devenir frustré s'il perd des données dans le processus.

    «À première vue, tout va bien, mais il ne résiste pas à l'examen. Dès qu'un tel site est soumis à un test de stress par utilisation réelle sur différents navigateurs, la façade s'effondre. "

    Web design résilient

    Là où cela devient le plus problématique, c'est quand un lien et un bouton stylé le même 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 quand ils ne le pensaient pas.


     Trois liens et / ou boutons affichés en ligne avec le texte
    Pouvez-vous dire lequel d'entre eux vous emmènera? de la page et qui ne sera pas? ( Grand aperçu )

    Lorsqu'un composant se comporte différemment que prévu, il 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 tape. Un menu de saisie semi-automatique permet à un utilisateur de sélectionner une grande liste d'options lorsque toutes les options ne sont pas affichées

    Un menu de saisie semi-automatique est généralement attaché à un champ de saisie et est piloté par les touches fléchées vers le haut et vers le bas. ]en gardant le focus dans le champ de saisie. Lorsqu'un utilisateur sélectionne une option dans la liste, cette option remplacera le texte dans le champ de saisie. Les menus de saisie semi-automatique sont censés être des listes de texte.

    Le problème se pose lorsqu'un menu de saisie semi-automatique commence à acquérir plus de comportements. Vous pouvez non seulement sélectionner une option dans la liste, mais aussi 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.


    Avec l'ajout de boutons d'édition, de suppression et de profil, ce menu de saisie semi-automatique est matériellement malhonnête. ( Grand aperçu )

    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 traverser deux dimensions au lieu d'une seule. Cela signifie qu'un utilisateur utilisant un clavier pourrait devenir confus sur la façon de faire fonctionner le composant.

    Les lecteurs d'écran souffrent le plus de ce changement de comportement car il n'y a pas de moyen facile 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 secondaire ou inaccessible pour eux.

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

    Pour utiliser le Objectif d'honnêteté matérielle posez-vous ces questions:

    • Le design est-il honnête avec l'utilisateur?
    • Y a-t-il des éléments qui se comportent, se ressemblent ou fonctionnent comme un autre élément?
    • Y a-t-il des composants qui combinent des comportements distincts en un seul composant? Est-ce que cela rend le composant matériellement malhonnête?

    Objectif de lisibilité

    Avez-vous déjà pris un livre seulement pour obtenir quelques paragraphes ou pages et que vous voulez abandonner parce que le texte était trop difficile à lire? Le contenu difficile à lire est mentalement fatiguant et fatigant.

    La ​​longueur de la phrase, la longueur du paragraphe et la complexité du langage contribuent tous à 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 parlent pas couramment 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 à digérer. La même chose est vraie 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 mise au point aux utilisateurs et rend plus difficile le passage à la ligne suivante, tandis qu'une ligne trop courte amène les utilisateurs à sauter trop souvent, ce qui provoque une fatigue des yeux.

    "L'esprit subconscient est activé lorsque vous passez à la ligne suivante. At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line”

    — Typographie: A Manual of Design

    You should also break up the content with headings, lists, or images to give mental breaks to the reader and support different learning styles. Use headings to logically group and summarize the information. Headings, links, controls, and labels should be clear and descriptive to enhance the users ability to comprehend.

    To use the Lens of Readabilityask yourself these questions:

    • Is the language plain and simple?
    • Does each paragraph focus on a single idea?
    • Are there any long paragraphs or long blocks of unbroken text?
    • Are all headings, links, controls, and labels clear and descriptive?

    Lens Of Structure

    As mentioned in the Lens of Layout, the structural layout is what is used by screen readers and users using a keyboard. While the Lens of Layout focused on the visual layout, the Lens of Structure focuses on the structural layout, or the underlying HTML and semantics of the design.

    As a designer, you may not write the structural layout of your designs. This shouldn’t stop you from thinking about how your design will ultimately be structured though. Otherwise, your design may result in an inaccessible experience for a screen reader.

    Take for example a design for a single elimination tournament bracket.


    Eight person tournament bracket featuring George, Fred, Linus, Lucy, Jack, Jill, Fred, and Ginger. Ginger ultimately wins against George.
    Large preview

    How would you know if this design was accessible to a user using a screen reader? Without understanding structure and semantics, you may not. As it stands, the design would probably result in an inaccessible experience for a user using a screen reader.

    To understand why that is, we first must understand that a screen reader reads a page and its content in sequential order. This means that every name in the first column of the tournament would be read, followed by all the names in the second column, then third, then the last.

    “George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.”

    If all you had was a list of seemingly random names, how would you interpret the results of the tournament? Could you say who won the tournament? Or who won game 6?

    With nothing more to work with, a user using a screen reader would probably be a bit confused about the results. To be able to understand the visual design, we must provide the user with more information in the structural design.

    This means that as a designer you need to know how a screen reader interacts with the HTML elements on a page so you know how to enhance their experience.

    • Landmark Elements (header, nav, main, and footer)
      Allow a screen reader to jump to important sections in the design.
    • Headings (h1h6)
      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:


    The tournament bracket
    The tournament with descriptive headings and winner information (shown here with grey background). (Large preview)

    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 Structureask 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 Timeask 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.”

    Smashing Editorial(il, ra, yk)




    Source link