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

News
22/5/2022
3 min
lettres et formes avec des couleurs, traits et contrastes différentes sur écran blanc et fond bleu
Key points

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

Webflow Localization, cas d'utilisation de Credial
Documentation
Webflow

Webflow Localization : guide et cas pratique de Credial

Webflow Localization : guide et cas pratique de Credial
Visuel illustrant le passage de digidop.fr à digidop.com
News
Digidop

Digidop.fr devient Digidop.com

Digidop.fr devient Digidop.com
Photo de l'équipe Digidop avec Logo Digidop 2024
News
Digidop

Rétrospective d’une année 2024 exceptionnelle et cap sur 2025

Rétrospective d’une année 2024 exceptionnelle et cap sur 2025

Transformez votre site web en un moteur de croissance.

Nous contacter