(Disclaimer: Highline College does not officially recommend or support Canva, or pay for Canva licenses. That said….)

If you are using Canva to create flyers, newsletters, or other documents that will be distributed electronically, it’s important to make sure they are accessible so that everyone who receives them can read them. Historically, this has been difficult or impossible to do well, but Canva has recently introduced some very useful accessibility tools. More complex documents may still need some extra remediation work before being sent out, but for many simpler projects, taking these steps will go a long way to making sure your creations are accessible to everyone!

As you are working on your Canva creations, please remember to design with accessibility in mind.

Here’s a video overview of these features, or scroll down past the video for a text version.

Setting the reading order

When we create documents, we don’t always create them exactly as they will eventually be read, starting at the beginning and working our way down to the end. We might add a piece here, then another piece here, move things around on the page, add more images or text later, and so on. However, by default, each element of a page is saved in the order it was added. This means that even though a sighted user is likely to start at the top of a page and read top-to-bottom, left-to-right, assistive technology reads items in whatever order the document has them arranged, which is often a very different and potentially very confusing experience.

To set the proper reading order, begin by selecting any element of your design and clicking on the “Position” button on the right side of the toolbar that appears at the top of the editing window.

After this opens the “Position” pane on the left side of the Canva window, click on the “Layers” tab to see how all of the elements of your document are layered.

The Layers pane shows each element in your document. It’s important to understand that layers stack on top of each other, just as if you were working with pieces of paper — the first thing you add is at the bottom of the stack, the next thing is the layer on top of that, the next is the layer on top of that, and so on. This means that the reading order actually starts at the bottom of the layers and moves up through the stack, with the top item the last one read.

Scroll down to the bottom of the layers and start working your way up through the stack. As you go through layer by layer, think about whether you’re moving through them in the same way you’d expect to read through the document. Chances are there will be times when you’ll discover that you’re bouncing around the document in a way that doesn’t make sense. When this happens, just drag the layers up and down the stack until they’re in an order (from bottom to top, remember) that matches how you’d expect to read the document.

Adding alt text

Alt text is short for “alternative text“; brief descriptions of the contents of images and graphics so that visually disabled readers get the same context and information as sighted users.

Every graphic element in your design should either have alt text or be marked as “decorative” so that assistive technology knows to ignore it. Marking elements as decorative is best used only for graphics that are purely decorative and don’t convey any content; photos or graphics with text elements should include appropriate alternative text.

To add alt text to a graphic, either right-click on the graphic or use the ellipsis (three dot: …) menu that appears above the graphic when you select it to open the tools menu and scroll down to the “Alternative text” option.

Canva will open an “Alternative text” window with a text box for entering your alt text and a “Mark as decorative” checkbox for marking decorative elements that do not need explanatory alt text. Enter your alt text or mark the element as decorative, click the “Save” button, and move on to the next graphic until they’re all properly set.

Setting text semantics

Text semantics is information about what role each block of text in your document fulfills. For instance, this block of text is a paragraph, while the “setting text semantics” line above this paragraph is a heading. Sighted readers usually get this information from the design of the text: paragraphs will be a standard size and font, headers will usually be larger, bolder, and sometimes in a different font, and so on. Assistive technology users may not be able to get this information visually, so we need to tell Canva what role each block of text in the document has. By doing this, assistive technology users can use their tools to skim through a document from one heading to the next just as sighted users can by looking for visually formatted headings.

Begin by using Canva’s “File” menu to open the “Accessibility” options and choose “Edit text semantics”.

Canva will open the “Text semantics” pane on the left side of the window. This looks similar to the “Layers” pane used to adjust reading order, only this time, it works from the top down: the top item is the first thing read by assistive technology, then the next item, and on down the list.

By default, each item is a paragraph. To change the assigned semantic meaning for an item, click on the ellipsis (…) and choose the appropriate heading level for that item.

When choosing your heading levels, think about the structure of your document like an outline. We recommend having a single Heading 1 for the title of the document, using Heading 2 for all second-level items, Heading 3 for items underneath those, and so on. Once all your headings are set to the appropriate level, it will be much easier for assistive technology users to navigate through the document.

Checking accessibility

The final step in Canva is using the accessibility checker to identify any final fixes that need to be made. From the “File” menu, open the “Accessibility” options and choose “Check design accessibility”.

Canva will open a “Design accessibility” pane on the right side of the document with three sections: typography, color contrast, and alternative text, along with a count of how many potential issues there are to be reviewed.

Typography

Clicking on the “Typography” option will open a list of every type element in your design with a font size smaller than 12 points.

Generally, type should be 12 points or larger for best legibility — however, this is not a hard-and-fast rule. It’s entirely possible, and acceptable, for there to be smaller text in your design. If that is the case, feel free to just leave the text element as it is. If there are sections where the text size can be bumped up a bit, of course, it can help readers with visual disabilities.

Color contrast

The color contrast section checks the color of any text against the background color behind the text to make sure there is enough contrast to be legible. If the text and background color are too similar, Canva will suggest changing the color of the text so it can be more easily distinguished by readers with visual disabilities.

As can be seen in this example, Canva won’t always get this quite right. In this case, Canva thinks there is white text over a grey background, which would be very difficult to see. However, the design actually has a photograph underneath the text, which gives enough contrast so that the text is legible. Always review the suggestions Canva makes to see if the colors need to be changed.

Alternative text

The third section of the accessibility checker is checking every graphic element on the page to see whether it has alternative text defined or has been marked as decorative. Any graphics that are not marked as decorative but do not have alt text will be shown in this list.

For each element in the list, click the “Add alternative text” button and either add appropriate alternative text or check the “Mark as decorative” checkbox.

Wrapping it up

Once you have completed the steps above, you’ll be ready to export your design!

It should be noted that more complex documents, particularly those with data tables, presentations with audio or video elements, or other such more advanced elements may have additional accessibility considerations that may need extra remediation work outside of Canva. For most basic flyers, newsletters, and reports, following the steps above will allow you to create much more accessible documents than have been possible in Canva until now.