Voici la deuxième édition de cette veille mensuelle sur l’accessibilité web. En tant qu’UX/UI Designer, je m’intéresse particulièrement aux utilisateurs et à leurs usages. Par ailleurs, dans un objectif de sensibiliser le plus grand nombre à l’accessibilité, je travaille particulièrement ces articles pour éviter le jargon et ainsi être accessible à tous, peut importe le niveau de familiarisation avec l’accessibilité. Et puisqu’une grosse partie des liens sont en anglais, j’accompagne chaque lien d’un petit résumé en français.

Maintenant que les présentations sont faites, place aux liens ! Au programme ce mois-ci : des outils et ressources pour designers, des produits qui deviennent plus (ou moins) inclusifs, des nouvelles bonnes pratiques, des recettes de cuisine et de nombreux retours d’expérience.

Des couleurs accessibles

Colors

Que serait un article sur l’accessibilité sans sa pléthore d’outils pour le contraste des couleurs ? Ce mois-ci, en voici quatre !

J’en ai rêvé à voix haute sur une communauté dédiée à l’accessibilité, Luke l’a fait : Color Contrast Grid est un plugin Figma qui transforme les couleurs d’une palette Figma en grille de combinaisons accessibles. Les combinaisons compatibles sont représentés de la même manière que sur A11Y Rocks.

Du côté de Sketch, ça bouge : la fonctionnalité d’assistants permet d’identifier de manière automatique des problèmes. Ainsi, l’assistant Accessibilité vérifie les contrastes de couleurs des textes et des formes (boutons…).

De mon côté, pour mon travail, j’ai beaucoup utilisé Color.review pour trouver une combinaison de couleur avec un bon contraste. Je le préfère finalement à tanaguru contrast finder qui propose des couleurs automatiquement. Mais maintenant que Color.review est rentré dans mon workflow, il va falloir que je mette à jour mon article sur mes outils préférés pour créer une palette de couleur accessible !

Pour finir, ce mois-ci, j’ai découvert Link Contrast Checker (et son alternative The Contrast Triangle). Ces deux outils permettent de choisir une couleur qui soit à la fois suffisamment lisible sur le fond mais aussi suffisamment contrasté par rapport au texte, notamment dans les cas où les liens ne sont pas soulignés.

Des textes alternatifs pertinents

alt text(1)

Il n’est pas toujours évident d’écrire un bon texte alternatif (pitié, ne regardez pas de trop près les archives de ce blog 🙈).

Alt-texts: the ultimate guide revient sur les bases : quand écrire des textes alternatifs et comment les rédiger ? L’auteur connait son sujet puisqu’il est lui même atteint de troubles de la vision et utilise donc quotidiennement un lecteur d’écran.

En plus synthétique, le W3C propose un arbre de décision de texte alternatif : c’est une bonne ressource pour se rafraîchir la mémoire et choisir le bon alt-text pour une image.

Des fonctionnalités inclusives

Ce mois-ci, deux géants du monde de la vidéo, YouTube et Netflix ont fait des annonces sur des fonctionnalités qui impactent directement l’accessibilité de leurs produits.

D’abord, YouTube annonce son intention d’arrêter le sous-titrage par la communauté. C’est une très mauvaise nouvelle puisque cette fonctionnalité participait à rendre des contenus accessibles aux personnes en situations de handicap auditifs mais aussi à rendre des contenus plus inclusifs (par exemple pour les personnes sachant lire une langue mais pas la comprendre). YouTube se défend en rappelant que la possibilité d’intégrer des sous-titres reste présente, à la charge du créateur de contenu…

Chez Netflix par contre, des nouvelles fonctionnalités de personnalisation voient le jour : les utilisateurs pourront contrôler la vitesse de la vidéo. C’était une demande récurrente de la part des associations militantes :

  • En ralentissant la vidéo (et donc les sous-titres), le confort est amélioré pour les personnes sourdes lisant les sous-titres.
  • D’un autre côté, les personnes aveugles, habituées à un débit de parole rapide, apprécieront accélerer la vidéo.

Netflix reprend ainsi un principe clé du design inclusif en rendant son produit flexible d’utilisation : il s’adapte à un large panel de préférences et de capacités individuelles.

Des nouvelles bonnes pratiques

new criterias

J’en parlais le mois dernier, le W3C travaille sur une nouvelle version du WCAG (une liste de bonnes pratiques d’accessibilité). 9 nouveaux critères font leur apparition dans la version 2.2 parmi lesquels par exemple le Success Criterion 3.2.6 Findable Help : chaque page/application devrait faciliter l’accès à une aide. Cette aide peut évidemment être représenté sous différente forme : numéro de téléphone, email, formulaire, réseau sociaux ou encore FAQ, documentation ou chatbot.

(Si seulement certaines administrations françaises pouvaient en prendre de la graine 🙈)

De la sensibilisation par la nourriture

muffins(2)

Accessibility is delicious est un article qui donne faim recense les analogies culinaires pour sensibiliser à l’accessibilité :

You can’t put the blueberries in the muffin after the muffin is baked.

Cordelia McGee-Tubb.

J’aime beaucoup cette analogie qui rappelle que l’accessibilité n’est pas quelque chose qui se rajoute à la fin : le design inclusif et l’accessibilité doivent être pensées dès le début.

Personnellement, j’aurais utilisé une analogie à base de pépites de chocolats qu’on ne peut pas rajouter après la cuisson de cookies mais cela dépendra des préférences culinaires de chacun 😇 (l’article mentionne d’ailleurs une analogie à base de garama masala qui doit infuser tout au long de la cuisson et qu’on ne peut pas rajouter à la fin du curry.) (Quand je vous dit que cet article donne faim… 🤤)

Si vous êtes plutôt café, l’article Accessibility Testing is like Making Coffee compare les différents outils et techniques permettant de tester l’accessibilité via l’analogie du café : alors, le votre, vous le voulez rapidement, ou en ayant pris le temps d’infuser ?

De l’usabilité dans le design

usability

Stop using Material Design text fields! Dans cet article, Matsuko explique tous les problèmes d’usabilité du design system Material Design de Google et propose des alternatives.

A Guide to Understanding What Makes a Typeface Accessible, and How to Make Informed Decisions décrit les points d’attention à avoir pour le choix d’une police de caractères lisible pour les personnes ayant une mauvaise vue et/ou des difficultés d’apprentissages.

WCAG for designers est une version courte (enfin, manière de parler) des critères WCAG pour en extraire ceux qui intéresseront les designers : couleurs évidemment, mais aussi contenus textuels et layout.

Écrire pour ne pas être lu : une super interview pour découvrir le métier d’UX Writing : travailler ses contenus pour qu’ils soient inclusifs, accessibles et compréhensifs est un travail de longue haleine.

Enfin, non pas un mais cinq liens de qualité, The Paciello Group a publié une série d’articles sur l’UX et l’accessibilité :

  1. Universal Design and Digital Accessibility revient sur les principes du design universel, et comment les normes d’accessibilité numérique s’appuient sur ces principes de design universel.
  2. User Experience and Digital Accessibility montre comment l’accessibilité intervient pour chaque niveau de conception d’une interface : de la stratégie du produit à son interface.
  3. Digital Accessibility and the UX Design Process donne des pistes sur comment impliquer les personnes handicapées dans le processus UX de la définition des besoins à la mise en œuvre des solutions.
  4. Digital Accessibility and the UX Testing Process fait le point sur le respect des bonnes pratiques et les tests utilisateurs.
  5. Usability Testing and Digital Accessibility pour finir donne des rappels sur la manière d’inclure des personnes en situation de handicap dans la recherche utilisateur.

Des retours d’expérience

retour xp(2)

Dans Why is designing for inclusion still treated as optional? Karishma Patel relate son expérience pour donner à l’accessibilité et l’inclusivité la place qu’ils méritent : faire partie intégrante du développement d’un produit et pas être une « fonctionnalité bonus ».

L’équipe de AirBnB s’est appuyé sur la recherche utilisateur pour construire un produit plus inclusif : Closing the Experience Gap.

Le livre de Marina Carlos est disponible ! Je vais m’arranger : comment le validisme impacte la vie des personnes handicapées montre comment le validisme (l’oppression des personnes handicapées) est constamment présent dans le quotidien des personnes en situation de handicap. Marina Carlos apporte aussi un regard politique en expliquant les revendications qu’ont les activistes directement concerné·e·s pour atteindre une société plus inclusive.

En anglais, Sara Hendren vient de publier What a body can do? How we meet the build world. Dans cet essai, elle analyse comment presque tout ce que nous construisons (meubles, rues, bâtiments…) vise à réduire le fossé entre nos corps et le monde, comme le font les technologies d’assistances. L’autrice donne plus de détails dans ce thread. En tout cas, son ouvrage, mélange de retours d’expériences, journalisme et analyses est définitivement ma prochaine lecture !

5 most annoying website features I face as a blind person every single day liste les choses les plus énervantes que subit Holly, quand elle navigue sur Internet.

Et pour finir, des vidéos de deux usagers non-voyants utilisant leur téléphone : Manuel montre comment il envoye des SMS ou détourne l’application Yuka et Kristy rédige un tweet à la vitesse de l’éclair avec un clavier adapté.

 


Voilà pour ce mois-ci. Comme la dernière fois, vos retours sur le fond ou la forme m’intéressent !

Un commentaire sur « Veille accessibilité design – août 2020 »

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s