PDF exports from Figma aren't accessible

Figma is a powerful design tool, but exporting your design as a PDF can create a jumbled document that isn't read correctly by screen readers and won't meet accessibility standards.

Let me explain

Here's a design I created in Figma for a single-page resume with 2 columns. I was going for a cute & colorful y2k aesthetic 🥺

(For this post, I anonymized the info & used cupcake ipsum filler text.)

When I exported this design from Figma as a PDF, the file certainly looked correct. But check out what happens when I copy and paste text from the PDF into the Apple Notes app:

Notice how the sections were copied out of order and some words have random spaces. What's going on here?

Now listen to what happens when VoiceOver tries to read this document. I turned on VoiceOver, clicked onto the PDF in the macOS Preview app, and then used Caps Lock + a keys to tell VoiceOver to read the whole document from top to bottom.

I trimmed this video to keep the file size small. In the video, words were broken up by spaces, which made VoiceOver read individual letters instead of full words. Also, sentences on different lines were merged. In the full VoiceOver test, the content in the left column was split by content from the right column, which was confusing.

More Observations

• Any letter-spacing applied to text will be encoded as spaces in the export, breaking up words and numbers. 😭
• Text was encoded top to bottom, generally, which cause my multi-column layout to be merged in unexpected ways. For example, in my "copy and paste" test screenshot, notice how the left column is split in half by content from the right column. I confirmed the same split in my longer VoiceOver test.
• Overlapping frames caused sentences to be split up in both tests. For example, the title "Name here" is split in half, presumably because bottom of the title's frame slightly overlaps frame below it. This is something I could probably fix in my design file.
• My usage of stylized emojis without the ability to apply aria-hidden (or a similar directive) to those elements in Figma made the VoiceOver experience even worse.
• While there are visual headings, there aren't any encoded headings. So unfortunately the document structure and hierarchy can't be communicated to screen reader users, which makes it harder to understand. As far as I know, there's no way to set heading roles for text in Figma? But please let me know if I'm mistaken here (my email is linked in the footer; just click on the mailbox)
• Keep in mind that I originally made this document to be a resume. So if this PDF export fails a copy-and-paste test and fails a screen reader test, I bet an automated resume scanner (which many big companies and hiring tools use) would have trouble parsing the text and structure of the document as well.

Based on my testing, I think that one way to generate a PDF that is passable would be to restrict your design to a 1 column layout, don't apply any letter-spacing to text, and make sure no frames overlap even a fraction of a pixel. But even if you try with these restrictions, please make sure to double-check and test your document!

In my humble opinion

Don't use Figma to create PDFs.

From what I observed, there are several unexpected ways that your design can generate an inaccessible document. Letter-spacing, multiple columns, and overlapping frames are just 3 things that I noticed, but there could be other issues that I didn't encounter in my specific design (such as: no alt text for embedded images, proper links, and editable form fields).

No matter what tool you use to create PDFs, it's important to test your documents for accessibility. A document may look okay, but the encoding could be messed up. Check with a screen reader. I highly recommend Sara Soueidan's guide for setting up a screen reader testing environment on your computer.

Some further reading: there are several Figma forum posts where folks mention similar accessibility issues with exported PDFs.

~thank you! ✌🏻