FigJam now works with screen readers

Figma has announced screen reader support for FigJam, extending the accessibility work it began last year with screen reader support for Figma prototypes. The update lets screen reader and keyboard-only users read and create content inside a FigJam file, including file structure, shapes with text, stickies, tables, and image alt text. Users can move focus across the canvas and between menus and screens to create, edit, and read content.

Why FigJam came next

FigJam’s collaborative nature made it a natural follow-up to prototype support. “FigJam is really a place where entire teams come together,” says Product Manager KC Oh. “It’s a tool specifically built for collaboration. So, we wanted it to be inclusive of as many people as possible.”

The tool’s interface was also a factor. Unlike Figma’s design tool, which has many layers of menus and interactions, most of FigJam’s features are accessible at the surface level. “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.

Working without a blueprint

Canvas-based creation tools like Figma and FigJam lack the established accessibility paradigms that exist for static websites or simple widgets. With no clear model to follow, the team spent significant time early on figuring out what features users actually needed to operate the tool effectively.

The team again worked with Fable, an agency that connects companies with people who use assistive technologies for user testing. Many beta testers had never used a whiteboard tool, digital or physical, so the team mapped out user journeys to define a core set of features substantial enough for an initial release.

“We learn something new about how screen readers can be used in every beta interview,” says Software Engineer Dorothy Chen. Those lessons extend beyond FigJam, improving shared React components with better ARIA labels and tags. “Once the patterns exist in the code base, other engineers can replicate them going forward,” Chen says.

Keyboard navigation improvements

The work also improved overall keyboard navigation. Users can now tab between objects on the canvas with the Tab key and navigate between text nodes for editing; Shift + Tab moves in reverse. Stamps are now operable by keyboard alone, which opens up a quick trick: select an item, open the stamp tool with E, choose a stamp, and press command + return (or Ctrl + enter on Windows) repeatedly to randomly populate the selection with stamps.

Some interactions aren’t yet supported for screen reader or keyboard navigation, including cursor chat, adjusting stamps, voting, the emote wheel, widgets, and freeform vector nodes like lines, highlights, washi tape, and marker drawings.

The team acknowledges there is more to do. Updated help center guidance is now available for screen reader users and for FigJam file creators. Feedback from users navigating FigJam with a screen reader or keyboard is welcome.

Tips for more accessible FigJam files

  1. Use sections to group content. Sections, not shapes, create a hierarchy that assistive technologies can read. You can nest sections and add titles that surface in screen reader landmark or heading navigation. Shapes are still fine for individual objects, but place them inside sections.
  2. Use numbered lists to describe order. Decorative numbers, stickers, and iconography rely on visual inference and are illegible to screen readers. A straightforward numbered list inside a text box communicates structure accurately.
  3. Provide alt text. You can now add alt text to GIFs and static images in FigJam by selecting an image and opening the toolbar. Alt text should describe what meaningful images convey; it should also be present for decorative images, with an empty value.
  4. Use underscores to communicate fill-in-the-blanks. Pen and pencil vector drawings can’t be read by screen readers. Use underscores or other text characters inside a text box instead, so the screen reader can read the blank space as part of the line.