C’est parti pour l’édition du mois de septembre de cette veille orientée design & accessibilité. Au menu ce mois-ci : de la sensibilisation à l’accessibilité et des ressources pour concevoir de manière plus inclusives et éthique.

Se mettre en conformité

Le 23 septembre 2020 était une date butoir importante dans la mise en accessibilité du web européen : tous les sites internets des organismes publics ainsi que tous les sites des entreprises privées ayant un chiffre d’affaire annuel supérieur à 250 millions d’euros ont dorénavant plusieurs obligations légales, dont afficher leur niveau de conformité.

Dans la pratique c’est loin d’être le cas… Côté service public, l’observatoire de la qualité donne un indicateur de « Prise en compte de handicaps » auprès des 250 démarches. Seules 24 d’entre elles ont cet indicateur à « Oui ». Ce nombre est particulièrement faible et ne garanti même pas une conformité totale…

Côté privé, il n’existe pas de chiffres à ma connaissance. Alors pour me donner une idée, j’ai constitué une liste des entreprises privées qui devraient être en conformité : seules trois entreprises ont une page Accessibilité et aucune ne respecte totalement la loi (à savoir, entre autre, afficher le niveau de conformité dès la page d’accueil)…

Tout ça pour dire : y a du travail…

Si vous êtes concernés, mais que vous ne savez pas trop comment vous y prendre, les slides (en attendant la publication du transcript) de Sensibilisation à l’accessibilité que j’ai donné dans le cadre de ma mission chez BetaGouv permettent de répondre à ce questions :

  • Pourquoi concevoir un service accessible ?
  • Quelles obligations légales ?
  • Et maintenant, qu’est-ce que je fais ?

Se (re)sensibiliser à l’accessibilité

En parlant de sensibilisation : j’avoue avoir un petit faible pour ce type de documents. Chaque personne/organisation a toujours une manière différente de présenter, vulgariser ou illustrer des concepts parfois complexes. Ainsi, même en étant familier avec le sujet, on redécouvre des choses.

La Fédération des Aveugles de France a réalisé un ABC de l’accessibilité numérique sous forme de PDF ou d’ePub. En une vingtaine de pages, ce document introduit le sujet de l’accessibilité, le cadre légal et surtout des conseils concrets pour rendre des contenus web accessibles.

Vincent Valentin lui, propose une sensibilisation sous forme de présentation tout en émoji avec Le handicap, tout un symbole. C’est bien présenté, bien illustré et donc à diffuser !

En anglais, sur le site Accessibility for Teams, la section Accessibility for Product Managers développe des conseils pour se sensibiliser et prioriser l’accessibilité dans ses projets.

Enfin, ComicA11y est un chouette proof of concept d’une bande dessinée universelle et accessible à toutes et tous en s’adaptant à son lectorat.

Concevoir des outils et services accessibles

Ce mois-ci, la communauté nous gâte avec deux excellentes ressources qui raviront les designers.

Le Good Design Playbook est un des documents les plus complets à l’usage des designers que j’ai pu lire. C’est d’abord une excellente introduction à l’accessibilité et au design universel.

Le document propose une méthodologie de design inclusive et accessible. Que ce soit pendant la phase d’observation, idéation, prototypage ou évaluation, la boîte à outils contient des méthodes connues de designers (observation, mind map, tri des idées…) (re)pensées pour être spécifiquement inclusives.

Par exemple, les cartes de situations définissent une situation fictionnelle de handicap sensorielle, physique ou cognitive. Ce sont des chouettes alternatives aux personas inclusifs que j’aimerais utiliser pendant des ateliers !

La roue d’accessibilité est aussi très intéressante pour permettre de réfléchir au regroupement des handicaps. Quand on sait que plus d’une personne handicapée sur deux est en situation de pluri handicap, je trouve que cette visualisation très pertinente.

Enfin, en anglais, et sur le même principe que les cartes de situation, le jeu Cards for Humanity (inspiré du jeu Against Humanity) est un outil supplémentaire pour sensibiliser au design inclusif.

En tirant au sort deux cartes (une carte Trait de caractère et une carte Capacité (ou incapacité), chacun peut tester son produit ou son service sous une nouvelle perspective : mon service est-il pertinent pour Genny, 45 ans, un peu paresseux sur les bords (qui n’a pas spécialement envie de s’engager pour mon produit) et dont le français n’est pas la langue première ? Et qu’en est-il pour Joyanna, très anxieuse mais aussi très sûre d’elle (elle aime résoudre les problèmes seules) ?

Réfléchir à l’impact sur ses usagers

PlatformAbuse.org est une base de données qui identifie les préjudices dont peuvent être victime les utilisateurs à cause d’une fonctionnalité.

Par exemple, un produit permettant à ses utilisateurs de s’exprimer dans un champ libre (comme des commentaires) peut conduire à des discours haineux. PlatformAbuse identifie des moyens d’atténuer ce risque (pour des commentaires, ça peut être en permettant de « Signaler un contenu », de contester une décision de modération ou encore d’être transparent sur les décisions de modérations).

En bref, c’est un annuaire de bonnes pratiques précieux pour qui veut concevoir un produit éthique.

Concevoir des composants accessibles

L’article Resources for developing accessible cards/tiles rappelle les points d’attention spécifiques à garder en tête pour concevoir des Cards accessibles.

Le composant Inclusive Dates est un Date picker capable de s’adapter au format choisi par l’utilisateur : « 5 mai », « 30 juin 2020 » ou « 01/12/2020 » sont autant de formats compris par le composant. Le composant est encore au stade de Proof-of-concept, mais je trouve l’idée intéressante pour avoir vu de nombreuses fois des utilisateurs bloqués par la saisie d’une date pendant des tests utilisateurs !

Côté typographie

Luciole est une police conçue spécifiquement pour les personnes malvoyantes. Chaque caractère a été pensé autour d’une douzaine de critères spécifiques (structure des lettres, encombrement des mots, espacement…) pour offrir la meilleure expérience de lecture possible aux personnes malvoyantes.

Plus technique, Understanding Point Sizing and Font Characteristics illustre que la taille d’un texte n’est pas la seule garanti qu’il sera suffisamment contrasté et donc lisible.

Et pour vérifier ensuite

Je suis fan des outils d’accessibilité sous forme de bookmarklets : ils fonctionnent sur tous les navigateurs et sans compétences techniques. 44×44 Pixel Cursor permet de vérifier que la zone cliquable d’un élément (bouton, lien…) est suffisament large pour être atteinte.

Se nourrir de retours d’expérience

Dans Scaling accessibility with a design system, Geri propose un retour d’expérience sur l’audit accessibilité et la mise en conformité d’un design system.

Accessibility Design Research pour le site du WHO documente la recherche utilisateur pour le WHO (World Health Organization, ou Organisation Mondiale de la Santé en français) auprès d’un public aveugle et malvoyant. Le sujet est intéressant, le travail accompli a l’air aussi mais la mise en forme de cette étude de cas est tout sauf accessible 😭 : que ce soit par des immenses JPG sans possibilité de mettre en forme le texte ou par une hiérarchie de l’information qui laisse à désirer. Tristesse.

Trouver les bons outils

Et je finis cette liste par… une liste !

A11yresources est une liste de ressources et d’outils dédiés à l’accessibilité. : plugins, outils, articles, études de cas, design patterns et bien d’autres. Si vous n’en avez pas assez, voilà donc encore beaucoup de choses à explorer !

Voilà pour ce mois-ci ! Bonne lecture et à la prochaine 🙂

2 commentaires sur « Veille accessibilité design – septembre 2020 »

    1. Haha, oui, tu as raison, la phrase que j’ai obtenu est « La page d’où vous venez n’a pas encore fait l’objet d’une déclaration d’accessibilité. », dommage pour la page d’accueil. Ça m’a évoqué une page 404 en mode « circulez, y a rien à voir ». Je vais corriger mon document !

      J'aime

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