Accessible

prototypes
in Figma
Learn how to navigate Figma
prototypes using a screen reader

Hit N for next

Contents

What are accessible prototypes?

Choose your own
Getting started
adventure or press

Try it out the N key to navigate

to the next frame.

Additional resources
(Shift + N to navigate backwards)
What are
accessible
prototypes?
Learn how Figma prototypes can be
interpreted by screen readers

Hit N for next

What are
prototypes?
You can create prototypes in
Figma by adding interactive flows
to your designs. These can be
used to mimic behaviors like when
hovering on a button changes its On Click
color, or clicking on the button
brings up an overlay.

Using prototypes is a great way to

help you test and bring your
designs to life.

Learn more about prototyping

What does it
mean for
prototypes to be
accessible?
Figma now offers an accessibility
mode for prototypes which means
screen readers such as VoiceOver
(Mac) and JAWS (Windows) are
able to read information about
designs when you are presenting
them in prototyping view.

Screen reader is now able to read content in Figma designs

 Top layer frames, components, instances, and overlays will become an <article>
How Figma article element. Any text in a Figma file will be wrapped in a <p> tag, with links

prototypes inside of text maintained <a> and lists turned into ordered/unordered lists <ol>,
<ul>, <li>
support screen
readers
Once you turn on accessibility
mode, we translate Figma design Welcome to our Figma Playground Fil
content into HTML that is readable
by a screen reader.
Desig
Collaborat
Check out example on the right
Have Fun

Any shape* with an

image fill will appear Learn More
as an image, and we
populate the alt text
with the layer’s Any element in a design that has an On Click
name <img interaction will be converted into a button <button>
alt=”Layer name”>

*And any non-top-layer-frame that only houses an image

Getting
started Accessibilitysettings
Accessibility settings
Activate your local screen reader and Adaptcontent
Adapt contentforforscreen
screenreaders
readers
turn on accessibility mode in Figma

Hit N for next

Activating and
using your local
screen reader
To get started, first make sure your
local machine has a screen reader
installed and turn it on. Figma
supports the following screen
readers:

Ma
VoiceOver

Window Example VoiceOver screen reader in Mac

JAW
NVDA

Example JAWS software to download for Windows

Turn on
accessibility You can turn on accessibility mode universally
mode Tab until you focus on the ‘Skip to content’ button,
by going to Options > Accessibility settings >
Turn on toggle
then hit Enter to turn on accessibility mode for the
You can turn on accessibility mode
current prototype view
in Figma a couple ways

1 Go into presentation mode

to view your prototype by
clicking on the play button in
the top right corner (beside
the “Share” button.

Quick tip: you can quickly

access this view by pressing:
⌘ + ⌥ + Return (Mac) or

Ctrl + Alt + Enter (Windows).

2 While in prototyping view,

press the Tab key until you
focus on a button called “Skip
to content” and hit Enter.
Navigate your

design in Tip: Tabbing order follows the layer order in your document; if content isn't read in the order you expect,

try opening your document in design and rearranging layers in the left sidebar. For frames with auto layout
prototype view
we will navigate in the order of the layout (either top to bottom or left to right).

Once you’re in prototype view with

accessibility mode turned on, you

should be able to navigate

everything via your keyboard

Tab or Shift+Tab to highlight

focus-able element

Hit Enter or space bar to

activate links and button

Depending on your screen

reader, you can use the

respective modifier key and

arrow keys to traverse across

content

Reference: U.S. QWERTY keyboard (Mac)

Shortcuts for VoiceOver

Shortcuts for JAWS

Tip: When tabbing you will also navigate the Figma UI, once you land on an article try hitting

your modifier key (VoiceOver default is Ctrl + Opt + ArrowKeys) to navigate within.
Shortcuts for NVDA

Try it out
Turn on your screen reader and
accessibility mode and play the next
few slides in prototype view

Hit N for next

Accessible Prototypes in Figma
Semantic Markup
Each text layer is rendered to the DOM as a paragraph <p>.

Frames appear as <article> elements, forming nested sections.

Element with an onclick interactions are rendered as <button> to indicate interactivity.

Links are maintained, for example you can read the help article here.

Navigation
Overview Images Overlays Change to Scrolling Lists
Accessible Prototypes in Figma
Images
Prototypes including shapes with image fill will appear as an image tag with alt-text that matches the shape layer name.

Frames with image fill will only appear as an image if the frame is not a top-level frame and has nothing else inside of it.

Try using your screen reader to read the following images.

Navigation
Overview Images Overlays Change to Scrolling Lists
Accessible Prototypes in Figma
Overlays
Prototypes with an overlay action show a secondary frame “above” main content, emulating pop-up modals.

We treat these overlays the same as frame navigation events—the parent frame is hidden from the screen reader
until the overlay is dismissed.

Click here to launch open overlay

Navigation
Overview Images Overlays Change to Scrolling Lists
Accessible Prototypes in Figma
Change to
Prototypes with “change to” action allow an instance to change to another variant from the same component set.

When changing, focus is managed to ensure that inactive frames are not navigable but focus is retained on the
prototype content.

Initial State: Click to change

Navigation
Overview Images Overlays Change to Scrolling Lists
Accessible Prototypes in Figma
Scrolling
Prototypes may also configure some content as scrollable. We synchronize the positioning of the accessible elements with
the canvas to ensure that the screen reader is able to accurately display the cursor position.

Vertical scrolling is enabled here, start scrolling to read the rest of the list below.

Apple

Banana

Cantaloupe

Dragonfruit

Navigation
Overview Images Overlays Change to Scrolling Lists
Accessible Prototypes in Figma
Lists
For prototypes with lists we generate the respective <ol> ordered and <ul> unordered HTML markups with their
corresponding list items. Try tabbing to the lists below.

Appl
Banan
Grap
Lemon

Appl
Banan
Grap
Lemon

Navigation
Overview Images Overlays Change to Scrolling Lists
 Help Center

More about accessible

Accessible prototypes

prototype Read the article

resources Closed Beta

More resources to help make Figma Sign up to to try FigJam for
more accessible for you and your team
screen readers
Sign up
This is an overlay

Click here to dismiss