Badge Webflow Award Winner 2023

New features to improve web accessibility on Figma

Among the new features of Figma 2022: accessibility. This 21st century challenge of making digital technology accessible to all is also a challenge for designers. Here is how Figma is starting to catch up on this subject.

Published on 
22/5/2022
-
Amended on 
24/3/2023
-
5 min
letters and shapes with different colours, lines and contrasts on a white screen and blue background

L'web accessibility is the new challenge for designers and developers. Making the web accessible to everyone means allowing everyone, whatever their age, origin or ability, to access it without difficulty. This is the challenge that Figma has set itself today, by working on the accessibility of designs. The idea here is to allow anyone to participate in all the stages of conception and realization of a design.

Integration of a new screen reader for the prototype

Project prototyping is the phase in which a user can visualise the project, interact with the elements, and see it as realistically as possible. Until now, Figma prototypes were only visible to the naked eye. No element of the model is readable by screen readers. This means that the Figma prototypes were not accessible to visually impaired people. Whether it was text, images or icons, none of the elements were visible to a visually impaired user.

To remedy this problem and improve the accessibility of prototypes, Figma is releasing a new screen reader functionality. This functionality will allow for example to :

  • Read the images
  • Read the texts
  • Navigating through the prototype

Still in Beta version, this screen reader was a real challenge for Figma, whose designs are not built in HTML. This was a real hindrance and made the mock-ups unreadable by most screen readers. Figma now makes it possible to convert prototypes into an HTML presentation.

Addition of a dark mode: Dark mode

More and more tools are integrating a "Dark mode" functionality into their interface. Beyond taste, this feature also addresses accessibility issues, by changing colour contrasts. This is important for many users who need a different visual representation in the design.

How to activate the dark mode on Figma?

Beta for live subtitles in audio chat

Only available on the Figma application, this feature provides a live written transcript of the team's audio chats.

Evaluation of the accessibility of the platform

Figma called on the company Deque, experts in digital accessibility, to evaluate the entire platform and find areas for improvement. For example, the use of aria label.

Growth in the number of accessibility-related plug-ins

Figma is seeing more and more plugins appear to improve accessibility at the design stage.

Growth in the number of accessibility-related files

The community is becoming more and more active on this topic, and many shared files on accessibility are available on Figma Community. These files cover all kinds of topics, from learning how to create an accessible design, to learning how to manage colours, to the main rules of web accessibility, etc.

Other accessibility issues to come

Figma is at the heart of the web accessibility issue, and although these features are a step forward, the challenge is still great. The tool says that it will continue to work in this direction, to further improve accessibility for users in the future, for example with the possibility of adding ARIA Labels or Alts tags on components and graphical elements.

This is just the beginning!

Ready to take your website to the next level?

Improve your online visibility thanks to Digidop's experience, excellence and reactivity!

Stay in touch with Digidop news!