Announcing FigJam screen reader support

Last year, we launched screen reader support for Figma prototypes and shared insights from our screen reader beta. We are excited to announce another step in this work: screen reader support for FigJam. We sat down with the accessibility team to talk about the journey from beta to official release and share tips for anyone who’d like to use these updates to make their FigJam files more accessible.

In order to make it possible for screen reader and keyboard-only users to read and create content in a FigJam file, content needs to be legible literally and contextually via hierarchy and location on the canvas. With this latest update, screen reader or keyboard users can now move focus around the canvas, as well as between different menus and screens, to create, edit, and read out content (including file structure, shapes with text, stickies, tables, and image alt text).

“Investing in screen reader coverage means wrestling with interesting product questions, like: What is an optimal model for multiplayer features like cursor chat?” says Product Manager KC Oh. “We’ll learn more as adoption grows.” It also means there are plenty of features we still need to address in the future. At this point, FigJam doesn’t yet support navigation via a screen reader or keyboard for cursor chat, adjusting stamps, voting, using the emote wheel, interacting with widgets, or adjusting freeform vector nodes (lines, highlights, washi tape, and marker drawings).

FigJam’s emphasis on collaboration—bringing everyone on a team together to define ideas, align on decisions, and move work forward—made it a clear choice to tackle after launching screen reader support for Figma prototypes. “FigJam is really a place where entire teams come together,” says Oh. “It’s a tool specifically built for collaboration. So, we wanted it to be inclusive of as many people as possible.” Another deciding factor: the tool’s UI. As a precise design tool, Figma has many more levels of menus and interaction compared to the digital whiteboarding tool. “FigJam was an opportunity to build for a UI where most of the features are accessible at the surface level, while also tackling issues we’ll certainly encounter with Figma Design,” Oh adds.

Moving with intention to get it right

Unlike static websites or simple widgets, which benefit from a plethora of clear ARIA specs and other resources, canvas-based creation tools (like Figma and FigJam) lack the same number of existing accessibility paradigms or best practices to model themselves after. With a nebulous end-state, most of our team’s early work was spent understanding what features were needed to use the tool effectively. This made iteration slower than expected, but the team felt strongly about taking time to make sure they were building something useful for screen reader and keyboard-only users. Our team once again engaged Fable, an agency that connects companies with people who use assistive technologies to facilitate user testing and feedback. Many of the team’s beta testers had never used a digital whiteboard tool (or a physical one), so they didn’t know what patterns to expect. Our team mapped out various user journeys to define a set of core features that felt substantial enough for an initial release.

Better accessibility across the (key)board

With a variety of assistive technologies, screen reader settings, and keyboard setups, there are thousands of different combinations people can use. “We learn something new about how screen readers can be used in every beta interview,” says Software Engineer Dorothy Chen. Many of those lessons are carried over to other parts of the product, and to accessibility considerations being made across Figma. “Some of our React components have really benefited from this work, such as ARIA labels and tags. Once the patterns exist in the code base, other engineers can replicate them going forward,” says Chen.

Additionally, this work has paved the way for better keyboard navigation across the board: Users can now navigate FigJam files using the Tab key to jump between objects on the canvas, as well as between text nodes for efficient editing. Hold Shift + Tab to tab in reverse. (See our Release Notes for April 14, 2023.) The team was able to make stamps operable using only a keyboard, as well—leading to a nifty stamp-bomb feature that anyone can appreciate!

What’s next

To repeat a familiar refrain: We still have a lot of work to do! As we continue to improve access to our own products, we’re also advancing our understanding of what our users need to design accessibly. We’ve also updated our help center with new accessibility guidance for screenreader users and FigJam file creators. We’re always looking for more feedback, so if you use a screen reader or keyboard to navigate your FigJam files, try this new update and let us know what you think.

1. Use Sections to group content

If you’re trying to organize information, use sections instead of shapes for grouping your content together. While the two can look nearly identical (especially if you’re using a rounded rectangle), sections create a hierarchy that is legible to assistive technologies. You can then nest sections within sections, allowing them to be read out successively by a screen reader. Sections also allow you to add a title, which can be surfaced in the Landmarks menu in Apple’s VoiceOver rotor or by pressing “H” for next heading in JAWS or NVDA (if you’re on Windows). Shapes are still useful for the objects themselves, but you should place them inside sections.

2. Use numbered lists to describe order

Instead of using decorative numbers, stickers, or iconography to items in numerical order, use a straightforward numbered list within the text box. Iconography relies on visual inference, while stickers are illegible to screen readers, both making it difficult for someone using assistive technology to parse information about structure. Text-based numbered lists, however, provide accurate information about your content’s structure.

3. Provide ALT Text

You can now add alt text to your GIFs and static images within FigJam! Click on any image to open the toolbar, and type in your alt text. This text should describe all meaningful images, enabling someone navigating using a keyboard or screen reader to understand what the visual intends to convey.

4. Use underscores to communicate fill-in-the-blanks

Avoid using pen and pencil tools to create vectors meant to be read, as screen reader users cannot read them. Instead, use underscores or other text characters within the text box. This allows the screen reader to read the blank space as part of the line of text.

We continue to be incredibly grateful to our community, beta testers, and partners who are helping us to make Figma more accessible. Learn more about navigating FigJam using a screen reader or making your FigJam files accessible.