Create accessible FigJam boards
Disabilities take many forms and can impact the way we see, hear, speak, touch, and understand the world around us. They can be permanent (like blindness), temporary (like a broken arm or lost voice), or situational (like low visibility while driving). Disability is part of being human. Most people will experience disability at some point in their lives, either temporarily or permanently.
When it comes to creating an inclusive environment in your FigJam boards, it’s important to think beyond the more obvious limitations your peers may be working with. Some may be using screen readers, some may need everything to be in writing, and others may need more time to contribute their ideas in a meeting.
We’ve compiled a few best practices to keep in mind when using FigJam. This isn’t an exhaustive list, and this article will be updated as we continue to find ways of making Figma more accessible for everyone.
Learn how to use FigJam with a screen reader →
Use sections to group content
Organize your FigJam board into sections. This makes it easier for collaborators using a screen reader to navigate and consume the board’s content.
To add a section:
- Click in the bottom toolbar or use the keyboard shortcut ⇧ShiftS.
- Click the location of the board where you’d like the section to go to create a square section, or click and drag to create a custom sized section.
Learn more about using sections →
Tidy up your board
Use tidy up to rearrange and organize objects like stickies and shapes into a uniform grid of rows and columns. This helps collaborators using screen readers navigate and reduces the cognitive load for anyone visually scanning a board.
To tidy things up:
- Select at least three objects on your board.
- Click in the selection's toolbar.
Learn how to align, tidy up, and organize your objects →
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 maybe be 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.
Learn how to create numbered lists in FigJam →
Add alt text to images
Use alt text to describe an image or GIF to anyone using a screen reader or with impaired vision. This text should describe all meaningful images, enabling someone navigating using a keyboard or screen reader to understand what the visual intends to convey.
To add alt text:
- Select the image or GIF.
- Click Alt text.
- Add a description.
- Press Return/Enter.
Learn more about using images in FigJam →
Fill in the blank
If you’re asking participants to fill in the blanks during exercises, use underscores to signal the blanks. This tells someone using a screen reader of the intentional blank instead of seeming like missing text in a sentence.
Music may drown out screen reader
Using the music feature in FigJam may interfere or make it difficult for someone to hear their screen reader.
Color usage
A few things to consider with colors:
- FigJam preset colors for sections and stickies are built with accessibility in mind
- Text in stickies is always black and paired with preset colors, so there’s no need to worry about contrast issues
- When using custom colors with the text tool, text should provide sufficient contrast to the background color
- When using custom colors for sections, they should provide sufficient contrast to their contents
- Avoid alternating between font colors
- Avoid red, pink, and green text, as this can be problematic for individuals with a color vision impairment
- When in doubt, use a color contrast checker readily found online
- For users with light sensitivities, use dark backgrounds
Turn off multiplayer cursors
Multiplayer cursors can be distracting and affect anyone with motion sensitivity. If you don't want to be distracted by other team member's actions, you can hide their cursors from your view.
- Open the Zoom/view options menu (from the zoom level in the toolbar).
- If there is no check next to the Multiplayer cursors option, click to display them.
- If there is a check already showing, click Multiplayer cursors again to hide.
- You can also use the keyboard shortcut ⌥Option⌘Command\ or ControlAlt\ to toggle multiplayer cursors.
Avoid cursor chat
Cursor chat can’t be read by screen readers and can be difficult for someone to read in time before the message disappears. If you’d like to add messages to the board, we recommend using comments.
Learn how to add comments in FigJam →
Use stamps
Stickers are a great way to personalize your FigJam board, but not always legible to a screen reader. If you want to add a reaction to something on the board, use the stamp wheel.
-
Select the Stamp tool. There are a few ways to do this:
- Click in the toolbar.
- Press the keyboard shortcut E.
- Right-click the board and select Stamp.
- Click and select Stamp.
-
Click on your stamp of choice from the stamp wheel.
-
Click on the board or on an object to place the stamp.
Learn more about using stamps →
Text usage
Some things to consider around text usage:
- Avoid large blocks of text: try to break text up into different stickies on the board or consider using bulleted lists
- Use simple fonts: avoid cursive fonts and opt to use the Simple, Bookish, or Technical fonts in FigJam
- Use larger fonts: increase the side of fonts whenever possible so people don’t have to zoom too much to read your text
Learn more about creating and formatting text in FigJam →
Provide instructions
Not everyone you are collaborating with has used a digital whiteboard before. Even if they have, they’re so versatile it may be hard to know exactly what you want collaborators to do in your file. To make things easier and keep your team on task, provide instructions in a dedicated section for each exercise.
Timer usage
Some of your peers may need more time to navigate the board or add their input, so give them the option to contribute to the board asynchronously or add more time to the session.
