Accessibility Prototyping

How did we conduct
this research?

We built prototypes in 10 design, prototyping and no-code tools and tested them with a screen reader on mobile or desktop.

*

* we split up Figma in 3 tests: desktop app, mobile app and web

Testing a prototype

We often provide a device when we do in person research, but when you want to simulate realistic accessibility research you might want to use the users own device that they are familiar with.

Tool	How to preview
Figma	Figma app
Figma Mobile	Figma mobile app
Figma Web Prototype	Browser
Protopie	Protopie app or browser
Origami	Origami preview app
FlutterFlow	FlutterFlow preview app, browser or installing a native app
Framer	Browser
Webflow	Browser
Draftbit	Draftbit preview app
Bravo Studio	Bravo Vision app
Penpot	Browser
Principle	Principle app or browser

Setting
custom labels

To improve screen reader support, you should be able to add custom hints or alternative texts so every element is also available for screen readers.

Tool	Set custom labels	Set alternative text
Figma	Not supported	Not supported
Figma Mobile	Not supported	Not supported
Figma Web Prototype	Not supported	Not supported
Protopie	Not supported	Not supported
Origami	Not supported	Not supported
FlutterFlow	Supported	Supported
Framer	Supported	Supported
Webflow	Supported	Supported
Draftbit	Not supported	No support for image, but accessibility hint can be set on a parent view
Bravo Studio	Not supported	Not supported
Penpot	Not supported	Not supported
Principle	Not supported	Not supported

Pros and Cons

What is each tool doing well and what could be improved. Keep in mind that design and no-code tools both have different use cases.

Figma Desktop App

Pros

• Design can immediately be used to create a prototype
• Basic support for screen readers

Cons

• Only interactive elements are visible to the screen reader
• Hard to navigate because of the Figma UI
• User needs to install the Figma app and create an account

Figma Mobile App

Pros

• Prototypes can be previewed on both iOS and Android

Cons

• No screen reader support
• Screen is not boing read aloud and elements can’t be selected
• User has to install the Figma app and create an account

Figma Web Prototype

Pros

• Design can immediately be used to create a prototype
• Prototype can be opened on any device
• Prototype can be added as a web app on mobile on the homescreen

Cons

• No screen reader support
• Screen is not being read aloud and elements can’t be selected

Protopie

Pros

• Easy to import an existing Figma prototype via the Figma plugin, design and interactions are sent over
• Advanced options for realistic prototyping
• Preview via the ProtoPie mobile app without having to login by scanning a QR code or connecting via USB

Cons

• No screen reader support

Origami

Pros

• Easy to import Figma designs via the Figma plugin
• Preview via the Origami mobile app without having to login

Cons

• No screen reader support
• Interactions need to be setup using nodes, which is harder to learn than other prototyping tools
• User will have to connect to a device or will have a copy of the Origami file if you send it over without a way to revoke it

FlutterFlow

Pros

• Screen reader support with semantic elements
• Option to add custom accessibility labels and hints
• Preview via the FlutterFlow mobile app or install the SDK

Cons

• Design needs to be manually rebuilt in FlutterFlow (no Figma import)
• No easy way to test on iOS
• User needs to be logged in to the mobile app to view a prototype
• The preview app opens a web view instead of the native app experience, so there might be difference between testing in the preview app and the APK version

Framer

Pros

• Easy to import from Figma using the Figma plugin
• Good screenreader support with possibility to change semantics of elements and add aria labels
• Possibility to add ALT copy to images
• Tab index can be changed
• Easy to share via a link
• Prototype can be previewed in browser or added to the home screen as web app (needs custom code = paid feature)
• Code overrides can improve accessibility support

Cons

• No transitions between pages like on mobile apps
• Accessibility is limited to web accessibility
• “Made in Framer” tag is available for free projects

Webflow

Pros

• Import from Figma using the Figma plugin
• Good screenreader support with possibility to change semantics of elements and add aria labels
• Possibility to add ALT copy to images
• Tab index can be changed
• Easy to share via a link
• Prototype can be previewed in browser or added to the home screen as web app (needs custom code = paid feature)
• Additional aria labels can be added to optimise accessibility

Cons

• Figma plugin needs specific Auto Layout setup in order to work
• Importing from Figma sometimes crashes your project
• Accessibility is limited to web accessibility
• Free projects are limited to 2 pages
• No transitions between pages like on mobile apps

Draftbit

Pros

• Screen reader support seems to be quite good
• Multiple accessibility settings are available
• Easy to preview an app via QR code using the Draftbit app
• Uses native accessibility features

Cons

• Design needs to be manually built, no Figma import
• Not every element has accessibility options, so you have to use a view container around elements to get all accessibility options

Bravo Studio

Pros

• Fully integrated in Figma as Figma is the front-end
• Basic screen reader support
• Easy preview via the Bravo Vision mobile app

Cons

• No way to change the label of elements (example: all icon buttons will just be read out as “Button”)
• You have to be logged in to the mobile app to preview a prototype
• Requires very specific tag setup in Figma in order to make it work
• No accessibility options, so only what’s supported out of the box will be used by the screen reader

Penpot

Pros

• Figma design can exported via the plugin and imported in Penpot
• Prototypes can be opened on any device
• Very basic screen reader support

Cons

• A paragraph is displayed as individual lines via a screen reader making it hard to navigate
• No way to interact with a prototype only reading whats available on the current page
• Image is recognised via screen reader, but not possible to set ALT copy
• Prototype isn’t displayed fullscreen on mobile devices

Principle

Pros

• Figma design can exported via after linking your account
• Web prototypes can be opened on any device

Cons

• Native prototypes can only be opened on Mac or iOS
• No screen reader support