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

News
3 min
Publié le May 22, 2022
Dernière mise à jour le
lettres et formes avec des couleurs, traits et contrastes différentes sur écran blanc et fond bleu
Résumez cet article avec une IA
Points clés de l'article

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 !

Thomas Labonne
Thomas Labonne
Co-fondateur

Articles qui devraient vous intéresser

Florian Bodelot et Thomas Labonne de Digidop devant un visuel Webflow Conf 2026 annonçant leur venue à Boston.
Evénements
Webflow

Webflow Conf 2026 : une édition particulièrement attendue

Webflow Conf 2026 : une édition particulièrement attendue
Graphique de performance historique du fonds
Documentation
Développement

Pages fonds : comment structurer la gamme d’une société de gestion sur son site web

Pages fonds : comment structurer la gamme d’une société de gestion sur son site web
Visuel promotionnel de Webflow Conf 2026 mettant en avant Lucas Clairet, finaliste dans la catégorie « Developer of the Year ». Son portrait en noir et blanc est placé devant un fond graphique abstrait aux couleurs bleu, orange, vert et rose, avec une identité visuelle moderne et contrastée. Le logo vertical de Webflow Conf ’26 apparaît à gauche, tandis que son nom et la mention « Finalist – Developer of the Year » sont affichés dans un encadré noir.
News
Webflow

Lucas Clairet finaliste des Webflow Awards 2026 dans la catégorie Developer of the Year

Lucas Clairet finaliste des Webflow Awards 2026 dans la catégorie Developer of the Year
Les meilleurs projets web
commencent par une conversation
Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.