A propos de l'auteur

Carie Fisher est une développeur et formatrice d'accessibilité numérique passionnée par le code frontal inclusif et la promotion de la diversité dans les technologies.
Plus à propos
Carie

La création d'images accessibles semble être un sujet simple à première vue – il vous suffit d'ajouter du texte alternatif à une image, non? Mais le sujet est beaucoup plus nuancé que certains ne le pensent. Dans cet article, nous passerons en revue les différents types d'images, nous plongerons dans des exemples concrets d'annonces de service public (PSA) inaccessibles, et discuterons des éléments les plus importants lorsque des messages critiques doivent atteindre tout le monde.

Lorsqu'il s'agit d'informer le public sur les problèmes de santé critiques, le timing est tout. Les informations que vous consommez aujourd'hui pourraient vous sauver la vie demain. Et avec plus de 65% de la population apprenants visuels – ce qui signifie qu'ils apprennent et se souviennent mieux grâce à la communication visuelle – le travail de création et de partage d'images accessibles n'a jamais été aussi important. Cela est particulièrement vrai pour les messages d'intérêt public (PSA) visant à fournir au public des informations cruciales et urgentes.

Mais que se passe-t-il lorsque vos utilisateurs ont des déficiences visuelles? Ou la dyslexie? Ou des troubles cognitifs? Comment reçoivent-ils et comprennent-ils ces informations visuelles? Quels éléments rendent une image accessible ou inaccessible?

Types d'images et alts

Avant de disséquer une image et d'examiner chaque élément qui peut rendre ou casser son accessibilité, nous devons d'abord prendre du recul et réfléchir au but de l'image. Est-ce pour informer un utilisateur? Susciter une émotion? L'image agit-elle comme un lien? Ou est-ce purement des yeux?

Il existe un certain nombre de questions qui peuvent vous aider à déterminer la meilleure façon de transmettre les informations d'image à une personne utilisant un dispositif de technologie d'assistance (AT), comme un lecteur d'écran.

"Quel type de message l'image essaie-t-elle de transmettre?"

"Le message est-il simple, complexe, émotionnel ou exploitable?"

L'utilisation d'un outil tel qu'un arbre de décision d'image en ligne ou le tableau simplifié illustré ci-dessous peut vous aider à décider à quelle catégorie votre image appartient. Ou imaginez simplement que votre image a – pouf! – disparu. Alors demandez-vous:

"Est-ce que je comprends le contenu qui reste?"

Si la réponse est oui, c'est décoratif. Sinon, l'image est informative et contextuellement nécessaire. Une fois que vous avez déterminé le type d'image avec lequel vous travaillez, vous devez tenir compte de quelques directives d'accessibilité de base.

Organigramme alt de l'image montrant les étapes pour aider à décider si une image est décorative ou informative et de quel sous-type elle pourrait appartenir
Organigramme alt image (Grand aperçu)

Images décoratives

Si vous décidez que votre image est décorative, l'image doit être masquée par programme. Pour ce faire, vous pouvez utiliser un attribut de texte alternatif vide / nul. Cela envoie un signal aux appareils AT pour ignorer cette image car elle n'est pas nécessaire pour comprendre le contenu ou l'action sur la page. Il existe de nombreuses façons de masquer un texte alternatif, notamment en utilisant un alt vide / nul (par ex. ), en utilisant ARIA (par ex. , , ou ), ou en implémentant l'image comme arrière-plan CSS.

Remarque: Un attribut de texte alternatif vide / nul n'est pas identique à un attribut de texte alternatif manquant. Si l'attribut de texte alternatif est manquant, le périphérique AT peut lire le nom du fichier ou le contenu environnant afin de donner à l'utilisateur plus d'informations sur l'image. Tandis que aria-hidden = "true" est une option pour masquer les images, soyez prudent lorsque vous l'appliquez car cela supprimera l'élément entier de l'API d'accessibilité.

Dans l'exemple ci-dessous, nous voyons une lettre géante "S" et un dessin d'un chat noir aux yeux verts utilisés pour rendre la casquette de baisse un peu plus amusante sur un article de .

Capture d'écran de l'article avec le capuchon S et un curieux chat noir aux yeux verts
Capture d'écran de l'article avec capuchon S et illustration de chat (Grand aperçu)

Lorsque nous supprimons l'illustration de la casquette, quels changements? Certes, il existe des différences visuelles, mais aucune information n'est perdue.

Capture d'écran de l'article sans lettrine ni illustration
Capture d'écran de l'article sans lettrine ni illustration (Grand aperçu)

Dans cet exemple de capitalisation, les deux aria-hidden = "true" et un alt vide / nul ont été utilisés pour cacher les images des appareils de technologie d'assistance. Bien que ce type de redondance ne soit pas nécessaire pour le rendre accessible – il n'est pas non plus nocif dans cette situation particulière puisque les lettrines

ne contient aucune information supplémentaire que nous aurions besoin d'exposer à un utilisateur AT. Rappelez-vous juste: en matière de code accessible, plus n'est pas toujours mieux.

Au-delà de la dissimulation programmée de votre image – il n'y a pas beaucoup plus à considérer en ce qui concerne les images décoratives. Si vous dites "Mais attendez, qu'en est-il de X?" ou "Et Y?" alors vous devrez peut-être revenir aux outils d'arbre de décision d'image et réévaluer votre image – elle pourrait ne pas être 100% décorative après tout. L'un des types d'images les plus difficiles à classer a tendance à être les images basées sur les émotions / l'humeur, car ce sous-type est un peu subjectif. Ce qu'une personne considère comme décoratif, une autre personne peut le considérer comme informatif, alors utilisez votre meilleur jugement.

Images informatives

Si vous décidez que votre image est informative, il y a beaucoup plus de choses à considérer. Pour que les appareils AT comprennent le message ou l'intention d'une image, les images informatives doivent avoir un texte alternatif discernable par programme. En règle générale, cela est accompli en utilisant le alt = "[some description]" , mais il existe de nombreuses autres façons d'ajouter des informations sur l'image en fonction de son sous-type, de son type et de son contexte (par exemple, complexe vs simple, SVG vs img). Mais avoir un texte alternatif ne suffit pas – il doit également être significatif. Par exemple, si votre image consiste à vous sentir en sécurité à la maison, mais que vos informations alternatives indiquent «maison» – cela transmet-il le message complet?

Un exemple d'image informative est le logo suivant. Si nous posons la même question qu'auparavant (le contexte ou le contenu change-t-il si cette image manque?), Alors la réponse est «oui». Dans cet exemple, le logo est à la fois informatif et exploitable car il est à la fois une image et un lien. Nous pouvons voir dans l'extrait de code que est le titre du lien et le texte alternatif de l'image est . Lorsque nous allumons un appareil AT – comme un lecteur d'écran – nous devrions entendre les deux informations transmises.

Logo de
Logo (Grand aperçu)

Entendre à la fois la phrase «retour à la page d'accueil» et «» dans une fonction est OK car chaque phrase est unique et connectée à un but différent.

Pour des expressions textuelles alternatives plus complexes, effectuer le test téléphonique. Par exemple, si vous appelez un ami et dites «limace violette» et raccrochez, votre ami serait probablement confus, mais pourrait aussi penser à une limace violette – mais dans quel contexte? Si vous appeliez un ami et lui disiez «la limace violette mange mes hortensias», cela donnerait une image plus vivante – sans ajouter beaucoup de caractères ou d'efforts supplémentaires.

Bien sûr, un utilisateur AT devra écouter votre texte alternatif, alors n'allez pas trop loin. C'est pourquoi il est suggéré de limiter votre texte à 150 caractères. Si vous devez ajouter plus de contexte à l'image (par exemple une image complexe), il existe d'autres modèles ou méthodes plus descriptifs que vous pouvez utiliser pour ajouter plus de détails.

World Beyond Image Alts

Maintenant que nous avons couvert les types d'images et les bases des attributs de texte alternatifs, regardons au-delà et considérons quelques éléments d'image supplémentaires:

Dans chaque exemple de PSA du monde réel, nous allons regarder l'image à travers l'objectif d'un autre type de handicap – en gardant à l'esprit que les simulateurs sont des outils et peuvent ne pas représenter la véritable expérience d'un individu. Pourtant, en utilisant de tels outils, nous pouvons commencer à créer de l'empathie dans nos conceptions et à vraiment considérer les différentes façons dont nos images sont consommées.

Remarque: Pour être clair, les exemples suivants sont uniquement à des fins d'illustration et d'éducation et ne sont pas destinés à appeler ou autrement porter un jugement sur les conceptions en question. En outre, il peut y avoir plusieurs problèmes dans un PSA, mais nous nous concentrerons uniquement sur un type de problème par exemple. Il y aura de nombreuses possibilités d'amélioration dans le domaine des communications numériques lorsque la poussière se déposera sur le COVID-19 et l'accessibilité n'est qu'un autre domaine à considérer.

Couleur et contraste

Le cœur battant du design est sans doute la couleur, et si la couleur est le cœur du design, le contraste est le muscle. Sans de bons niveaux de contraste des couleurs, des éléments tels que des mots, des icônes et d'autres formes graphiques sont difficiles à discerner et le design peut rapidement devenir inaccessible. Mais que se passe-t-il lorsque vous percevez la couleur et le contraste différemment des autres – le même message et la même intention se manifestent-ils? Comment pouvons-nous atteindre les personnes ayant des problèmes de détection des couleurs? 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 daltonienet 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, 246 millions de personnes basse vision. Les personnes ayant des déficiences visuelles telles que le glaucome, les cataractes, la dégénérescence maculaire, la rétinopathie diabétique, l'opacification de la cornée, etc., peuvent avoir des problèmes de contraste du texte. Les personnes malvoyantes et les personnes âgées ont é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 problème de contraste. 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 du mal à discerner les couleurs.
Examen des couleurs PSA

Dans le premier exemple, nous examinons les messages d'intérêt public 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. L'objectif de ces «actifs à haut risque» est d'atteindre des populations considérées comme 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).

Tout d'abord, nous voyons la version non éditée des messages d'intérêt public:

Annonces de service public non modifiées bleu sarcelle, rose saumon et fard à joues créées par le CDC et le Conseil de la publicité qui ont des problèmes de contraste de couleur
CDC + Ad Council PSAs originaux sur COVID-19 (Grand aperçu)

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 (cécité rouge / verte):

PSA avec filtre de couleur Deutéranopie (cécité rouge / verte) appliqué
Filtre de couleur PSA avec Deutéranopie (cécité rouge / verte) (Grand aperçu)

PSA simulés avec protanomalie (rouge-faible):

PSA avec filtre couleur Protanomaly (rouge-faible) appliqué
PSA avec filtre couleur Protanomalie (rouge-faible) appliqué (Grand aperçu)

Vous trouverez ci-dessous une ventilation de certains rapports de contraste de couleur trouvés sur les PSA entre les différents simulateurs de daltonisme.

PSA d'origine – rapport de contraste des couleurs de 1,26: 1 avec le texte «Have» sur l'arrière-plan:

PSA d'origine - rapport de contraste de couleur de 1,26: 1 avec le texte «Have» sur le fond avec du PSA de couleur saumon
PSA d'origine – rapport de contraste des couleurs de 1,26: 1 avec le texte «Have» sur l'arrière-plan (Grand aperçu)

Filtre de simulation de deutéranopie appliqué – rapport de contraste de couleur de 1,07: 1 avec le texte «Have» sur l'arrière-plan:

Filtre de simulation de deutéranopie appliqué - rapport de contraste de couleur de 1,07: 1 avec le texte «Have» sur l'arrière-plan avec du PSA vert lime
Filtre de simulation de deutéranopie appliqué – rapport de contraste de couleur de 1,07: 1 avec le texte «Have» sur l'arrière-plan (Grand aperçu)

Filtre de simulation de protanomalie appliqué – rapport de contraste de couleur de 1: 15: 1 avec le texte «Have» sur l'arrière-plan:

Filtre de simulation de protanomalie appliqué - rapport de contraste de couleur de 1: 15: 1 avec le texte «Have» sur l'arrière-plan avec du PSA de couleur beige-orange
Filtre de simulation de protanomalie appliqué – rapport de contraste des couleurs de 1: 15: 1 avec le texte «Have» sur l'arrière-plan (Grand aperçu)

Bien que ces messages d'intérêt public intègrent une variété de choix de couleurs saisissantes et soient visuellement attrayants (lors du test du texte en arrière-plan dans ces images), de nombreuses combinaisons ne satisfont pas aux ratios de contraste des couleurs des 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), la protanomalie (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.

Examen du contraste PSA

Pour en revenir aux «actifs à haut risque» du Conseil de la publicité, nous pouvons voir à quoi ressemblent les messages d'intérêt public pour les personnes dans deux situations différentes de basse vision.

Tout d'abord, nous voyons la version non éditée des messages d'intérêt public:

Annonces de service public non modifiées bleu sarcelle, rose saumon et fard à joues créées par le CDC et le Conseil de la publicité qui ont des problèmes de contraste de couleur
CDC + Ad Council PSAs originaux sur COVID-19 (Grand aperçu)

Ensuite, en utilisant l'outil NoCoffee Vision Simulator, nous pouvons voir comment les messages d'intérêt public peuvent ressembler à une personne ayant une basse vision et des cataractes.

PSA avec filtre simulé de basse vision appliqué:

PSA avec filtre basse vision appliqué
PSA avec filtre de basse vision simulé appliqué (Grand aperçu)

PSA avec filtre de cataracte simulé appliqué:

PSA avec filtre à cataracte appliqué
Messages d'intérêt public avec filtre de cataracte appliqué (Grand aperçu)

Vous trouverez ci-dessous une ventilation de certains rapports de contraste de couleur trouvés sur les PSA entre les différents simulateurs de basse vision.

PSA d'origine – rapport de contraste des couleurs de 1,33: 1 avec le mot «En cours» sur l'arrière-plan:

PSA d'origine - rapport de contraste de couleur de 1,33: 1 avec le mot «en cours» sur le fond avec PSA de couleur bleu sarcelle
PSA d'origine – rapport de contraste des couleurs de 1,33: 1 avec le mot «En cours» sur l'arrière-plan (Grand aperçu)

PSA avec filtre de simulation de basse vision appliqué – rapport de contraste de couleur de 1,25: 1 avec le mot «en cours» 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 avec PSA de couleur bleu sarcelle
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 (Grand aperçu)

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:

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 avec PSA de couleur bleu sarcelle
PSA avec filtre de simulation de cataracte appliqué – rapport de contraste de couleur de 1,06: 1 avec le mot "En cours" sur l'arrière-plan (Grand aperçu)

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 ayant une basse vision et des troubles oculaires puissent lire le texte.

Prochaines étapes pour une couleur et un contraste accessibles

Passez en revue les lignes directrices du rapport de contraste des couleurs WCAG et utilisez des outils comme l'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 passer en revue toutes les combinaisons de couleurs accessibles possibles et créer une palette en gardant à l'esprit l'accessibilité. Ou utilisez les fonctionnalités 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 éviter 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 des couleurs, 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 garderions 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 médias à forme fixe.

Qui peut affecter la typographie et la mise en page
  • La typographie est particulièrement importante pour environ 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.
  • Les personnes malvoyantes peuvent avoir des problèmes avec l'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 du déficit de l'attention et de troubles de la lecture ou de la vision, une disposition complexe est un véritable obstacle. Ces utilisateurs ont du mal à garder 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 message d'intérêt public de Long Beach Health and Human Services en Californie.

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?

PSA d'origine:

Message d'intérêt public de Long Beach Health and Human Services
Message d'intérêt public de Long Beach Health and Human Services (Grand aperçu)

Message d'intérêt public non modifié avec majoration et notes:

Message d'intérêt public de Long Beach Health and Human Services marqué avec des notes de conception d'accessibilité
Message d'intérêt public de Long Beach Health and Human Services marqué avec des notes de conception d'accessibilité (Grand aperçu)

Si nous nous concentrons sur la typographie et la mise en page, les éléments suivants se démarquent:

Lignes rouges dessinées à la mainIllustrant les multiples «fleuves de l'espace» créés par l'alignement justifié.
Boîtes en pointillé bleuDécrivant six changements de disposition différents.
Chiffres rosesMise en évidence des 14 traitements typographiques différents découverts (en ignorant le logo). 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.
Points d'interrogation vertsQue signifie même cette équation? Sur le plan cognitif, c'est une chose difficile à vérifier étant donné la disposition étrange.
Lignes et points noirsAttendu 12 points d'intérêt visuel dans un test d'eye-tracking UX basé sur l'ordre des blocs de contenu (de haut en bas, de gauche à droite) et le flux d'équation typique (X + Y = Z).

Examinons un autre PSA et évaluons à nouveau la typographie et la mise en page du point de vue de l'accessibilité. Cette fois, l'image a été créée par le ministère de la Santé du comté de Prince George dans le Maryland.

PSA d'origine:

PSA du ministère de la Santé du comté de Prince George
Message d'intérêt public du ministère de la Santé du comté de Prince George (Grand aperçu)

Message d'intérêt public non modifié avec majoration et notes:

Message d'intérêt public du ministère de la Santé du comté de Prince George marqué avec des notes de conception d'accessibilité
Message d'intérêt public du ministère de la Santé du comté de Prince George marqué de notes de conception d'accessibilité (Grand aperçu)

Si nous nous concentrons sur la typographie et la mise en page, les éléments suivants se démarquent:

Boîtes en pointillé bleuDécrivant neuf changements de disposition différents.
Chiffres vertsMise en évidence des 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 noirs10 points d'intérêt visuel attendus dans un test de suivi des yeux UX 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 beaucoup de changements de typographie et les mises en page sont complexes. Examinons maintenant un PSA plus propre. Celui-ci est de la Prevention Action Alliance de Columbus, Ohio.

PSA d'origine:

Message d'intérêt public de la Prevention Action Alliance
Message d'intérêt public de la Prevention Action Alliance (Grand aperçu)

Message d'intérêt public non modifié avec majoration et notes:

Message d'intérêt public de la Prevention Action Alliance marqué de notes de conception d'accessibilité
Message d'intérêt public de la Prevention Action Alliance marqué de notes de conception d'accessibilité (Grand aperçu)
Boîtes en pointillé bleuDécrivant trois changements de disposition différents.
Chiffres rosesMise en évidence des quatre différents traitements typographiques 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 noirsAttendu huit points d'intérêt visuel dans un test d'eye-tracking UX basé sur l'ordre des 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 une voie visuelle linéaire par rapport aux deux premiers exemples.

Prochaines étapes pour une typographie et une mise en page accessibles

Moins c'est plus quand il s'agit de typographie accessible, donc limitez le nombre de familles de polices différentes et les variations telles que italique, audacieux, TOUTES MAJUSCULES ou d'autres 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 mise en page, 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 déficitaires de l'attention, de lecture et de déficience visuelle à 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
  • Les personnes souffrant de troubles du déficit de l'attention – estimées à 129 millions de personnes dans le monde – peuvent avoir des problèmes pour se concentrer sur une copie trop longue, ne divise pas les éléments en listes et manque d'espace (pensez: hauteur de ligne, marges de paragraphe, etc.).
  • Pour les personnes atteintes de certains troubles cognitifs, il est difficile de comprendre le langage figuratif ou l’utilisation spécialisée comme les phrases «il pleut des chats et des chiens» ou «ce test était un jeu d’enfant».
  • Les personnes souffrant de 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.
Examen de copie PSA

Pour cet exemple, testons la lisibilité de la copie de deux messages d'intérêt public 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 a créé PSA – Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres:

CDC a créé PSA - Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres
CDC a créé PSA – Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres (Grand aperçu)

Si nous évaluons la copie du corps principal à l'aide d'outils d'indicateur de lisibilité comme Readable et The Readability Test, nous constatons que le PSA «Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres» contient 388 mots à un niveau de lecture moyen de 9 et une facilité de lecture Flesch Kincaid1 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 le Facilité de lecture Flesch Kincaid niveau 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.

Résultats des tests pour le PSA - Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres
Résultats des tests pour le PSA – Ce que vous devez savoir sur COVID-19 pour vous protéger et protéger les autres (Grand aperçu)

Bien que la copie de la première image soit adéquate et se situe dans les plages de lisibilité suggérées pour la copie Web, comparons-la à un autre PSA créé par le CDC sur le même sujet.

Le CDC a créé PSA – Stop the Spread of Germs:

Le CDC a créé PSA - Stop the Spread of Germs
CDC a créé PSA – Stop the Spread of Germs (Large preview)

Ce message d'intérêt public contient 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 désormais tombé à 4 avec une fréquence de 4,44%.

Résultats des tests pour le PSA - Arrêtez la propagation des germes
Résultats des tests pour le PSA – Stop the Spread of Germs (Large preview)

Par rapport au premier PSA, le PSA «Stop the Spread of Germs» contient 298 mots de moins et est plus facile à lire par les élèves de 3e année. Il a une augmentation du niveau de facilité de lecture de 19 points et est moins complexe. Sur la base de ces chiffres, nous pouvons extrapoler que le deuxième PSA est plus inclusif que le premier lorsque l'on regarde la copie seule.

Examen des icônes PSA

Mais tester la lisibilité de la copie n'est pas le seul moyen de mesurer l'efficacité d'un PSA en matière d'accessibilité des messages. Un autre élément que nous devons examiner est les icônes accompagnant la copie. Si l'on ne présente que les icônes, le même message sera-t-il reçu?

Voyons maintenant quelques exemples. Sur la base des seules icônes, quel est le message que l'image essaie de transmettre sur la conduite de votre vélo en toute sécurité pendant COVID-19?

PSA édité par la Fédération Européenne des Cyclistes:

PSA édité de la Fédération européenne des cyclistes cachant le texte et affichant uniquement les icônes
PSA édité de la Fédération européenne des cyclistes (Grand aperçu)

PSA d'origine:

Message d'intérêt public original de la Fédération européenne des cyclistes montrant le texte et les icônes associées
PSA original de la Fédération européenne des cyclistes (Grand aperçu)

Il s'agit du PSA non édité. Avez-vous pu comprendre le message complet? Bien que vous ayez pu deviner correctement quelques icônes, y avait-il des parties du message que vous avez manqué de ne pas avoir la copie?

OK, regardons un autre exemple. Ce prochain message d'intérêt public vient du Pennsylvania Department of Health. Faisons le même exercice que précédemment: pouvez-vous comprendre le message dans ce message d'intérêt public (sans la copie de l'icône)?

PSA édité:

PSA modifié du Pennsylvania Department of Health masquant le texte et affichant uniquement les icônes
PSA modifié du Pennsylvania Department of Health (Grand aperçu)

PSA d'origine:

Message d'intérêt public original du Pennsylvania Department of Health montrant le texte et les icônes associées
PSA original du Pennsylvania Department of Health (Grand aperçu)

Maintenant, nous pouvons voir le PSA avec copie. Avez-vous pu comprendre le message complet? Bien qu'il y ait peut-être eu une icône ou deux qui vous a fait trébucher, était-il plus facile de déchiffrer les icônes du deuxième PSA par rapport au premier? J'espère que cet exercice rapide vous a aidé à comprendre le rôle essentiel que jouent les icônes dans le message.

Prochaines étapes pour la copie accessible et les icônes

Soyez clair et concis. La règle empirique officieuse est d'écrire pour un niveau de lecture de 9e année. Ce niveau est basé sur l'hypothèse que la plupart des gens atteignent le niveau de lecture de 12e année, mais en période de stress maximal, ils peuvent ne pas lire à leur niveau le plus élevé. Essayez d'utiliser un langage simple et évitez le jargon technique, les mots fantaisistes, les expressions familières et les expressions. De même, assurez-vous que tous les acronymes, abréviations ou mots inhabituels sont expliqués plus en détail ou liés à des ressources supplémentaires. Des outils comme Readable et The Readability Test peuvent vous aider à déterminer le niveau de lecture de votre copie, tandis que des outils comme Hemingway Editor ou Grammarly peuvent suggérer des modifications pour rendre votre copie plus inclusive.

Utilisez des icônes, des graphiques et des symboles pour compléter la copie autant que possible. L'ajout d'images vous permet de briser certaines barrières linguistiques et cognitives et de ne pas compter sur votre typographie pour supporter tout le poids. Assurez-vous simplement de choisir des icônes qui sont courantes ou qui ne nécessitent pas beaucoup de réflexion.

Emballer

La création d'images accessibles implique bien plus que l'ajout de texte alternatif. Il est important de considérer comment tous les éléments d'image – couleur, contraste, typographie, mise en page, copie et icônes – affectent également vos utilisateurs. En prenant un peu plus de temps et en intégrant ces principes d'accessibilité dans vos images, vous atteindrez sans aucun doute plus de personnes – selon leurs conditions. 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.

Smashing Editorial(ra, yk, il)