Tips from Figma for making your site more accessible

At Figma, we’re actively working to make design in Figma accessible to all. Here are our top tips for making your site more accessible, along with the ways we’re making Figma easier to navigate for all. 

How to make your site more accessible

• Add alt text to images that need description, or mark it as decorative.

• Set the correct HTML tag.

• Add labels when visible text is missing or unclear.

• Mark purely decorative elements as hidden.

• Use the color contrast tool in the color picker to improve readability.

Our accessibility improvements

Better keyboard controls for the canvas and commenting

Whether you’re adjusting a line in Figma Design or adding connectors to a FigJam diagram, we’ve expanded ways to move around the canvas with the keyboard. Canvas objects are now also accessible to screen readers, improving navigation for all users. We’re also making collaboration and handoff smoother for keyboard-only users with the ability to add, move, and navigate comments and Dev Mode annotations using shortcuts.

Improved screen reader support

We’re improving how Figma works with assistive technology, so screen reader users can navigate files smoothly, hear objects in order, and stay up to date as things change. From more consistent and reliable announcements, to richer object descriptions, to formatted text support that lets screen readers recognize bolded or italicized words, these improvements make content easier to follow and understand.

Enhanced screen contrast

With a simple toggle, users can now increase distinction between text, elements, and their backgrounds in both light and dark modes. Enhanced color contrast makes Figma easier to navigate for everyone by:

• Improving legibility of text and icons

• Making it easier to see how the interface is organized and quickly spot the elements you need

• Helping buttons and outlines stand out more clearly when you hover or interact with them

• Improving visibility in glare and sunlight

• Making it quicker to scan and reorient when multi-tasking

The subtle differences between regular contrast and enhanced color contrast can make a big difference, especially during prolonged screen exposure.

Want to learn more?

Visit our blog post to learn more about the ways we’re improving accessibility in Figma, browse our accessibility help centre, or book a meeting with Figma to dive deeper on your specific use case.