Des images accessibles pour quand elles importent le plus

    
        
        
         Le daltonisme  - est une véritable préoccupation pour les concepteurs axés sur l'accessibilité. 
 Qui la couleur et le contraste peuvent affecter 
 On estime que  300 millions  de personnes dans le monde sont  couleur aveugles et environ 95% des personnes infligées sont des hommes (1 homme sur 12 contre 1 femme sur 200 est daltonien). Il existe de nombreuses variantes différentes du daltonisme, le daltonisme rouge / vert étant le plus courant, suivi du bleu / jaune et le daltonisme total étant le plus rare. 
 Dans le monde, il y a  246 millions  de personnes avec  basse vision . Les personnes ayant  des déficiences visuelles  telles que glaucome, cataracte, dégénérescence maculaire, rétinopathie diabétique, opacification cornéenne, etc., peuvent avoir des problèmes de contraste de texte. Les personnes malvoyantes et les personnes âgées éprouvent également souvent une vision des couleurs limitée. 
 Les personnes utilisant des écrans monochromes ou dans certaines situations (par exemple un faible éclairage dans une pièce) peuvent avoir  des problèmes de contraste . 
 PSA Color Review 
 Dans le premier exemple, nous passons en revue les PSAs. Les personnes utilisant des feuilles de style de texte uniquement, à couleurs limitées ou dans certaines situations (par exemple, trop de reflets sur un écran) peuvent également avoir des difficultés à discerner les couleurs. du groupe sans but lucratif appelé Ad Council - l'un des producteurs les plus anciens et les plus prolifiques de ce matériel aux États-Unis. Le but de ces « actifs à risque plus élevé » est d'atteindre des populations jugées plus susceptibles de contracter et de devenir gravement malades par le nouveau coronavirus (l'un des groupes qui ont le plus besoin de ces informations). 
 Premièrement, nous voyons la version non modifiée des messages d'intérêt public: 
 Ensuite, nous pouvons voir deux types de daltonisme simulés à l'aide de  l'extension ChromeLens . ChromeLens est une extension Google Chrome qui fournit une suite d'outils pour aider au développement de l'accessibilité du Web et comprend le Lens Vision Simulator, qui transforme les couleurs sur un site Web simulant ce qu'une personne daltonienne pourrait voir. 
 PSA simulé avec Deutéranopie (rouge / vert-cécité): 
 PSA simulés avec Protanomaly (rouge-faible): 
 Filtre de simulation de protanomalie appliqué - rapport de contraste de couleur de 1: 15: 1 avec le texte «Have» sur l'arrière-plan: 
 Bien que ces PSA incorporent une variété de choix de couleurs saisissantes et soient visuellement attrayants (lors des tests le texte sur l'arrière-plan de ces images), de nombreuses combinaisons ne respectent pas les rapports de contraste de couleur  Web Content Accessibility Guidelines  (WCAG). Cela est vrai même pour les versions non éditées de ces conceptions, mais lorsque nous appliquons le simulateur de daltonisme ChromeLens pour la deutéranopie (cécité rouge / verte) (par défaut rouge-faible), les rapports de contraste de couleur s'aggravent encore (1,26: 1 vs 1,07 : 1 et 1: 15: 1). Pour rendre ces PSA plus accessibles, nous voudrions augmenter le contraste afin que les personnes souffrant de troubles de la vision liés aux couleurs puissent lire le texte. 
 PSA Contrast Review 
 Pour en revenir aux «actifs à haut risque» de l'annonce Conseil, nous pouvons voir à quoi ressemblent les messages d'intérêt public pour les personnes dans deux situations de basse vision différentes. 
 Tout d'abord, nous voyons la version non modifiée des messages d'intérêt public: 
 Ensuite, en utilisant le  NoCoffee Vision Simulator nous pouvons voir comment les PSA peuvent ressembler à une personne ayant une basse vision et des cataractes. 
 PSA avec filtre de basse vision simulé appliqué: 
 PSA avec sim filtre de cataracte ultraléger appliqué: 
 Ci-dessous une ventilation de certains rapports de contraste de couleur trouvés sur les PSA entre les différents 
 Original PSA - rapport de contraste de couleur de 1,33: 1 avec le mot "Undergoing" sur l'arrière-plan: 
 PSA avec filtre de simulation de basse vision appliqué - rapport de contraste de couleur de 1,25: 1 avec le mot "Undergoing" sur l'arrière-plan: 
 PSA avec filtre de simulation de cataracte appliqué - rapport de contraste de couleur de 1,06: 1 avec le mot «Undergoing» sur l'arrière-plan: 
 Beaucoup de gens blâment la couleur pour leurs problèmes d'accessibilité de conception, mais ces exemples montrent que  le contraste joue également un rôle clé . Sans changer les couleurs de ces PSA, mais en changeant la perspective de l'utilisateur et en brouillant ou en obscurcissant le texte, nous pouvons voir que le texte sur les images est plus difficile à lire - même si les taux de contraste n'ont pas beaucoup changé (1.33: 1 contre 1,25: 1 et 1,06: 1). Semblable aux exemples de couleurs (pour rendre ces PSA plus accessibles), nous devons augmenter le contraste sur ces images afin que les personnes souffrant de troubles de la vision et des yeux puissent lire le texte. 
 Prochaines étapes pour une couleur et un contraste accessibles 
 les  directives WCAG relatives au rapport de contraste des couleurs  et utilisez des outils tels que  Analyseur de contraste des couleurs  pour vérifier vos conceptions. Vos images avec copie nécessitent un rapport de contraste des couleurs d'au moins 4,5: 1 pour le texte de taille normale et d'au moins 3: 1 pour le texte de grande taille (18 pt et plus). Le rapport de contraste des couleurs de 3: 1 s'applique également aux icônes essentielles. Essayez un outil comme la  palette de couleurs A11y  où vous pouvez rapidement consulter toutes les combinaisons de couleurs accessibles et créer une palette en gardant à l'esprit l'accessibilité. Ou utilisez les fonctions d'accessibilité intégrées au générateur de palette  Coolors . 
 Ensuite, utilisez des arrière-plans de couleur unie (la lecture de texte sur des arrière-plans occupés, des superpositions, des textures ou des dégradés est difficile en général), mais surtout lorsque le texte n'a pas assez de contraste. En choisissant des couleurs aux extrémités opposées du spectre de couleurs et en  en évitant les combinaisons rouge / vert et bleu / jaune vous augmenterez la probabilité que vos rapports de couleur et de contraste soient robustes. Utilisez un outil comme l'extension  ChromeLens  pour revérifier le contraste des couleurs en tenant compte du daltonisme. Faites également attention aux nuances claires - en particulier les gris - qui sont difficiles à voir pour les personnes malvoyantes. Utilisez des outils comme  NoCoffee Vision Simulator  pour simuler les problèmes de basse vision et voir comment votre conception résiste dans ces situations. 
 Au-delà des rapports de contraste de couleur, il est également important de ne pas utiliser la couleur  seule pour transmettre des informations . Par exemple, «les informations de contact peuvent être affichées en rouge» ou «cliquez sur le bouton bleu pour en savoir plus». Il en va de même pour  les caractéristiques sensorielles  telles que la forme, la couleur, la taille, l'emplacement visuel, l'orientation ou le son - elles ne peuvent pas être utilisées seules. Par exemple, si vous avez dit "Veuillez cliquer sur le lien à gauche de l'image pour plus d'informations", un utilisateur AT pourrait avoir du mal à trouver le lien correct. 
 Typographie et mise en page 
 Dans un monde parfait, nous conserverions notre texte et nos images séparés. Cela permettrait aux utilisateurs de manipuler la typographie et la mise en page comme ils le souhaitent: taille de police, espacement / crénage des lettres, justification, marges / remplissage, etc. Mais malheureusement, il existe de nombreux formats pour lesquels ce type de séparation est difficile, voire impossible, tels que les publications sur les réseaux sociaux, les e-mails, les PDF et autres supports de forme fixe. 
 Qui la typographie et la mise en page peuvent affecter 
 La typographie est particulièrement important pour les  15 à 20% de la population mondiale souffrant de dyslexie  - un trouble d'apprentissage dans lequel certaines lettres, chiffres ou combinaisons de lettres peuvent être source de confusion ou semblent basculer / bouger. 
 avec une basse vision peut avoir des problèmes avec un espacement / crénage serré des lettres, transformer des mots comme "grange" en "bam" ou "moderne" en "modem" pendant la lecture. 
 Pour les personnes souffrant de troubles déficitaires de l'attention et en lecture ou en vision handicapées, une configuration complexe est un véritable obstacle. Ces utilisateurs ont du mal à conserver leur place et à suivre le flux du contenu en raison du manque d'espaces et de voies linéaires claires. 
 Examen de la typographie et de la mise en page de PSA 
 Jetons d'abord un coup d'œil à un PSA de Californie  Long Beach Health and Human Services  
 Si nous examinons ce message d'intérêt public d'un point de vue d'accessibilité, quels problèmes de typographie et de mise en page voyez-vous? De quelles manières pourrions-nous améliorer cette image? 
 Message d'intérêt public original: 
 Message d'intérêt public non modifié avec annotation et notes: 
 Si nous nous concentrons sur la typographie et la mise en page, les éléments suivants ressortent: 
 Lignes rouges dessinées à la main 
 Illustrant les multiples «fleuves de l'espace» créés par l'alignement justifié. 
 Pointillé bleu 
 Décrivant six changements de disposition différents. 
 Chiffres roses 
 Soulignant les 14 différents traitements typographiques découverts (en ignorant le logo). Certains changements sont plus évidents comme la famille de polices ou les changements de couleur, d'autres sont plus subtils comme l'alignement, la taille ou les changements de poids dans la typographie. 
 Points d'interrogation verts 
 Que signifie cette équation? Cognitiquement, c'est une chose difficile à vérifier étant donné la disposition étrange. 
 Lignes et points noirs 
 Attendu 12 points d'intérêt visuel dans un test de suivi des yeux UX basé sur l'ordre des blocs de contenu (de haut en bas, à gauche à droite) et le flux d'équation typique  (X + Y = Z) . 
 Regardons un autre PSA et évaluons à nouveau la typographie et la mise en page d'un point de vue d'accessibilité. Cette fois, l'image a été créée par le  Département de la santé du comté de Prince George  dans le Maryland. 
 Message d'origine: 
 PSA non édité avec marquage et notes: 
 Si nous nous concentrons sur la typographie et la mise en page, les éléments suivants se démarquent: 
 Boîtes en pointillé bleu 
 Décrivant neuf différents changements de disposition. 
 Nombres verts 
 Soulignant les 11 traitements typographiques différents découverts (en ignorant les logos). Certains changements sont plus évidents comme la famille de polices ou les changements de couleur, certains sont plus subtils comme l'alignement, la taille ou les changements de poids dans la typographie. 
 Lignes et points noirs 
 10 points d'intérêt visuel attendus dans un suivi des yeux UX test basé sur l'ordre des blocs de contenu (de haut en bas, de gauche à droite) et l'ordre de numérotation (1 à 6) formant un mouvement oculaire de type zig-zag. 
 Jusqu'à présent, nous avons vu quelques exemples où il y a un beaucoup de changements de typographie et les mises en page sont complexes. Examinons maintenant un PSA plus propre. Celui-ci provient de  Prevention Action Alliance  de Columbus, Ohio. 
 Original PSA: 
 PSA non édité avec balisage et notes: 
 Boîtes à points bleus 
 Décrivant trois changements de disposition différents. 
 Chiffres roses 
 Soulignant les quatre traitements de typographie différents découverts (en ignorant les logos). Dans ce cas, une seule famille de polices a été utilisée, avec des variations uniquement sur la taille, la couleur et le poids. 
 Lignes et points noirs 
 Attendu huit points d'intérêt visuel dans un test d'eye-tracking UX basé sur l'ordre de les blocs de contenu (de haut en bas). 
 Le troisième exemple de PSA est plus cohérent en ce qui concerne la typographie et la mise en page, et a plus d'espace blanc global et un chemin visuel linéaire par rapport aux deux premiers exemples. 
 Prochaines étapes pour Typographie et mise en page accessibles 
 Moins, c'est plus quand il s'agit de typographie accessible, donc limitez le nombre de familles et de variantes de polices différentes comme  italique  gras TOUTES MAJUSCULES ou autre méthodes de style qui peuvent rendre le contenu difficile à lire. La recherche n'est pas concluante pour savoir si  les polices serif ou sans-serif sont plus faciles à lire mais si vous choisissez des familles de polices qui ont des formes de lettres clairement définies, il est plus probable que la police sera accessible. Certains contrevenants courants à surveiller lors du choix d'une police inclusive incluent le «I» (ex. Inde), «l» (ex. Laitue) et «1» (ex. Un). De même, les caractères comme «b» et «d» et «q» et «p» peuvent parfois être mis en miroir (de gauche à droite ou de haut en bas), et la lettre «B» et le nombre «8» semblent souvent trop similaires 
  En ce qui concerne la disposition, moins c'est aussi plus . Essayez et répétez les modèles chaque fois que possible et limitez la largeur de toute section bloquée à 80 caractères (ou 40 caractères pour les logogrammes). De même, évitez l'alignement des paragraphes qui crée des espaces ou des «fleuves d'espace» dans le contenu (par exemple un alignement justifié). L'espacement des lignes (interligne) est d'au moins un espace et demi dans les paragraphes, et l'espacement des paragraphes est au moins 1,5 fois plus grand que l'espacement des lignes. L'intégration de toutes ces  directives de mise en page  aidera les personnes souffrant de troubles du déficit de l'attention, de troubles de la lecture et de la vision à se concentrer davantage sur le contenu. 
 Copie et icônes 
 Enfin et surtout, concentrons-nous sur le message PSA réel. On peut soutenir que la copie est l'élément clé pour informer le public des dernières mises à jour de COVID-19 et fournir des informations sur la prévention de la propagation du virus. Mais les icônes dans cette situation servent plus que de la décoration; ces éléments répètent visuellement le même message que la copie. Aucune pression, mais la copie et les icônes doivent être parfaitement ciblées pour atteindre le plus large éventail de personnes. 
 Qui la copie et les icônes peuvent affecter 
 Personnes souffrant de troubles du déficit de l'attention - estimé à  129 millions de personnes dans le monde  - peut avoir des problèmes pour se concentrer sur une copie qui est trop longue, ne casse pas les éléments dans les listes et manque d'espace (pensez: hauteur de ligne, marges de paragraphe, etc.). 
 Pour les personnes souffrant de certains troubles cognitifs, c'est difficile pour comprendre un langage figuratif ou un usage spécialisé comme les phrases «il pleut des chats et des chiens» ou «ce test était un jeu d'enfant». 
 Les personnes ayant des troubles cognitifs, linguistiques et d'apprentissage peuvent avoir besoin d'icônes visuelles, de graphiques et de symboles pour comprendre la copie qui l'accompagne. 
 PSA Copy Review 
 Pour cet exemple, testons la lisibilité de la copie de deux PSA des Centers for Disease Control and Prevention (CDC). La lisibilité est la facilité avec laquelle un lecteur peut comprendre un texte écrit.  La lisibilité  de la copie dépend à la fois du contenu et de la présentation. 
 CDC créé PSA -  Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres : 
 Si nous évaluons la copie du corps principal utilisant des outils d'indicateur de lisibilité comme  Lisable  et  Le test de lisibilité nous voyons que le "Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres" PSA a 388 mots à un niveau moyen de lecture de 9 et un  Flesch Kincaid Reading Ease  1  de 64,6. En plus de ces mesures (pour une copie accessible), nous voulons également examiner le nombre de mots complexes et leur fréquence - dans ce cas, 35 et 9,02% respectivement. 
 1  The  Flesch Kincaid Reading Le niveau de facilité  est sur 100. Plus le nombre est bas, plus la copie est difficile à lire. Pour référence, un score de facilité de lecture de 60 à 70 est considéré comme acceptable pour la copie Web de base. 
  
 Alors que la copie dans la première image était adéquate et se situe dans les plages de lisibilité suggérées pour le Web copie, comparons-le à un autre PSA créé par le CDC sur le même sujet. 
 CDC a créé le PSA -  Arrêtez la propagation des germes : 
 Grand aperçu ) 
 Ce PSA a beaucoup plus d'images et beaucoup moins de texte. Si nous évaluons à nouveau la copie principale, nous voyons que notre copie a maintenant un total de 90 mots avec une note moyenne de 6 et une facilité de lecture Flesch Kincaid de 83,6. Le nombre de mots complexes est maintenant tombé à 4 avec une fréquence de 4,44%. 
Compared to the first PSA, the “Stop the Spread of Germs” PSA one has 298 fewer words and is easier to read by 3rd-grade levels. It has a reading ease level increase of 19 points, and is less complex. Based on these numbers, we can extrapolate that the second PSA is more inclusive than the first when looking at copy alone.
PSA Icon Review
But testing the readability of copy isn’t the only way to measure the effectiveness of a PSA when it comes to message accessibility. Another element we need to look at are the icons accompanying the copy. If we are presented only the icons, will the same message be received?
Let’s now look at a couple of examples. Based on the icons alone, what is the message that the image is trying to convey about riding your bicycle safely during COVID-19?
Edited PSA from the European Cyclists’ Federation:
Original PSA:
This is the unedited PSA. Were you able to figure out the full message? While you might have been able to guess correctly for a couple of icons, were there parts of the message you missed not having the copy?
OK, let’s take a look at another example. This next PSA comes from the Pennsylvania Department of Health. Let’s do the same exercise as before: can you understand the message in this PSA (without the icon copy)?
Edited PSA:
Original PSA:
Now we can see the PSA with copy. Were you able to figure out the full message? While there may have been an icon or two that tripped you up, was it easier to decipher the icons on the second PSA versus the first? Hopefully, this quick exercise helped you understand the critical role icons play in the message.
Next Steps for Accessible Copy and Icons
Be clear and concise. The unofficial rule of thumb is to write for a 9th-grade reading level. This level is based on the assumption that most people reach the 12th-grade reading level, but in times of peak stress, they might not be reading at their highest level. Try and use plain language and avoid technical jargon, fancy words, colloquialisms, and expressions. Likewise, make sure any acronyms, abbreviations, or unusual words are explained in more detail or linked out to additional resources. Tools like Readable and The Readability Test can help you determine the reading level of your copy, while tools like Hemingway Editor or Grammarly can suggest edits to make your copy more inclusive.
Use icons, graphics, and symbols to supplement copy whenever possible. Adding imagery allows you to break down some language and cognitive barriers and not rely on your typography to carry all the weight. Just be sure to choose icons that are common or don’t require a lot of thought.
Wrapping Up
Creating accessible images involves a lot more than just adding alt text. It is important to consider how all image elements — color, contrast, typography, layout, copy, and icons — affect your users as well. By taking a bit more time and building these accessibility principles into your images you will undoubtedly reach more people — on their terms. In uncertain times like these, we need to be sure we are addressing all the ways we can improve our images to be more inclusive in our messaging.
(ra, yk, il)