Badge Webflow Award Winner 2023

De nouvelles fonctionnalités pour améliorer l'accessibilité web sur Figma

Publié le 
22/5/2022
Modifié le 
24/3/2023
Temps de lecture : 5 min
lettres et formes avec des couleurs, traits et contrastes différentes sur écran blanc et fond bleu
Écrit par
Thomas Labonne avec un T-shirt Digidop

Thomas Labonne

Co-fondateur

Parmi les nouveautés Figma 2022 : l'accessibilité. Ce défi du 21eme siècle de rendre le numérique accessible à tous est également celui des designer. Voici comment Figma commencer à rattraper son retard sur ce sujet.

Points clés à retenir

L’accessiblité web est le nouvel enjeux des designers et développeurs. Rendre le web accessible à toutes et tous, signifie permettre à chacun, quelque soit son age, son origine, ou encore ses capacités, d’y accéder sans difficulté. C’est aujourd’hui le défi que se lance Figma, en travaillant sur l’accessibilité des designs. L’idée est ici de permettre à n’importe qui de participer à l’ensemble des étapes de conception et de réalisation d’un design.

Intégration d’un nouveau lecteur d’écran pour le prototypes

Le prototypage du projet est la phase durant laquelle un utilisateur peut visualiser le projet, interagir avec les éléments, le voir de la manière la plus réaliste possible. Les prototypes Figma étaient jusqu’à maintenant seulement visibles à l’oeil nu. Aucun élément de la maquette n’est lisible par les lecteurs d’écran. Ce qui signifie que les prototypes Figma n’étaient pas accessibles pour les personnes malvoyantes. Que ce soient les textes, les images, les icônes, aucun élément n’était visible pour un utilisateur malvoyant.

Pour remédier à ce problème et améliorer l’accessibilité des prototypes, Figma sort une nouvelle fonctionnalité de lecteur d’écran. Cette fonctionnalité permettra par exemple de :

  • Lire les images
  • Lire les textes
  • Naviguer à travers le prototype

Encore en version Beta, ce lecteur d’écran a été un véritable challenge pour Figma, dont les designs ne sont pas construits en HTML. Un véritable frein qui rendait les maquettes illisibles par la plus part des lecteurs d’écran. Figma permet aujourd’hui de convertir les prototypes en une présentation HTML.

Ajout d’un mode sombre : Dark mode

On voit de plus en plus d’outils intégrer une fonctionnalité “Dark mode” à leur interface. Au-delà des gouts, cette fonctionnalité répond également à l’enjeux d’accessibilité, en modifiant les contrastes de couleurs. Un élément important pour un grand nombre d’utilisateurs qui ont besoin d’une représentation visuelle différente dans le design.

Comment activer le dark mode sur Figma ?

Beta pour les sous-titre en direct du chat audio

Uniquement disponible sur l’application Figma, cette fonctionnalité permet d’avoir en direct une restranscription écrite des chats audio de l’équipe.

Evaluation de l’accessibilité de la plateforme

Figma a fait appel à la société Deque, experte en accessibilité digitale, pour faire une évaluation de l’ensemble de la plateforme et trouver des axes d’amélioration. Par exemple l’utilisation d’aria label.

Croissance du nombre de PlugIn liés à l’accessibilité

Figma voit apparaitre de plus en plus de plugin permettant d’améliorer l’accessibilité au moment de la conception des design.

Croissance du nombre de fichiers liés à l’accessibilité

La communauté est de plus en plus active sur ce sujet, et de nombreux fichiers partagés sur l’accessibilité son disponibles sur Figma Community. Ces fichiers traitent tous types de sujets, pour apprendre à créer un design accessible, apprendre à gérer les couleurs, les principales règles de l’accessibilité web, etc.

D’autres enjeux d'accessibilité à venir

Figma est au coeur de l’enjeux d’accessibilité web, et bien que ces fonctionnalités soient un pas en avant, le challenge reste encore de taille. L’outil dit continuer de travailler dans cette voie, pour améliorer encore plus l’accessibilité des utilisateurs à l’avenir, par exemple avec la possibilité d’ajouter des ARIA Labels ou balises Alts sur les composants et éléments graphiques.

Ce n’est que le début !

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop