Canva (design)

Headings help organize your document. They make digital content accessible by breaking up longer sections and giving meaningful structure to documents. Headings are not just styled bigger and bolder, but are marked up in the code and can be navigated with assistive technology tools.

How Heading Structure Works

A document’s heading structure acts like an outline, organizing content into different levels of importance. The main title (Heading 1) introduces the overall topic, while subheadings (Heading 2 and below) break the content into sections and details. This hierarchy helps readers scan and understand the relationships between sections. 

Why Heading Order Matters

Heading structures must follow a logical sequence to guide the reader smoothly. Skipping heading levels (like jumping from Heading 1 to Heading 4) disrupts this flow and makes it difficult for readers, especially those using screen readers, to understand the document’s organization. Heading 2 should follow Heading 1, and Heading 3 should only be used within sections introduced by Heading 2.

1. Open the design where you want to set heading levels.
2. Go to File > Accessibility > Edit text semantics.
3. In the Text semantics panel, all text elements in your design appear in a list.
4. Select the three dots ( ••• ) next to any text element to expand the semantics options.
5. Choose from:
   1. Paragraph
   2. Heading 1 - Heading 6
   3. Quote
6.  Choose the option that best fits your text element. For example, Heading 1 is typically used for the main title of your design.

Your PDF export will then include the correct tags. All elements default to Paragraph in new designs.

Alternative text, or alt text, is a short description of an image. Alt text makes images (photos, diagrams, logos) accessible by providing a meaningful text alternative for people who can’t see, access, or process the original image. Alt text is not the same as an image caption, but is added in the document’s code and usually not displayed.

Good alt text is accurate, short, contextual, and not repetitive.

• Accurate
  • Correctly describes the content or purpose of the image
• Short
  • Not longer than it needs to be
  • A few words to a few sentences, usually limited to 150 characters
• Contextual
  • Communicates the purpose of the image in context
  • When writing alt text ask yourself, Why is this here? Not just, What does this show?
• Not repetitive
  • Does not begin with “image of,” because assistive technology already identifies the image as an image
    • Can describe format or genre, such as “photograph of students lounging near Diag,” “pencil drawing of students at a table studying”
  • Does not repeat description provided in the caption or surrounding text

Alt Text Example:

Bad Alt Text: George Washington
Good Alt Text: A painting by artist Emanuel Leutze of George Washington crossing the Delaware River

1. Select the element or image you want to add an alt text.
2. Click on the three dots ( ••• ), then select Alternative text.
3. Type in the description in the text box, then select Save once done.

Tick Mark as decorative if your alt text is added to a decorative element or image and adds no additional context.

Screen readers read content in the order elements appear in your design.

• Reading order is automatically calculated on export.
• Works best for simple, linear layouts.

Users can manually adjust reading order using the Layers panel:

1. Go to your design and click on an element.
2. Go to Position to view all layers.
   1. You may need to toggle between the Arrange tab and Layers tab to view all elements. 
3. Arrange the layers in the order you want them read. The bottom layer is read first.
4. Go to Share, then select Download.
5. Select Match reading order to layers before downloading.

Links let users go to a new page or place on the web or in a digital document. Links make content accessible by making it clear where each link goes, with good link text.

Accessible link text is short, descriptive, understandable, and unique:

• Short — Just a few words, no more than 5 if possible
• Descriptive — Describes where it goes or what it does, so a user knows what will happen in advance
• Understandable — Text that is readable for humans, not a long URL string
• Unique — Not the same as other link text on the same page or document, unless it goes to the same place

Avoid phrases that are meaningless out of context such as “more,” “click here,” or “this article.” These links are confusing to people who are visually scanning content, or browsing content by links only with assistive technologies including screen readers.

Typographical choices such as the size, shape and formatting can have a big impact on all users’ ability to read and understand information, as well as on users with dyslexia or other reading impairments. Additionally, assistive technology may not be able to convey when certain text formatting or symbols are used.

• Fonts should be easy to read, with sans serif fonts (e.g. Tahoma, Arial, Calibri) used for the body text
• Font size should be at least 12pt
• Avoid using ALL CAPS
• Avoid making text full-justified; align text to the left or center instead
• Avoid using underlined text for emphasis, as it may be confused with hyperlinks and can reduce accessibility.
• Information conveyed by text formatting (bold or italics, highlighted or strike-through) or symbols should be available through other accessible means.
  • Bad Example: This example highlights and bolds an important update, which may not be read by assistive technology and doesn’t clarify its significance.
  • Good Example: Important Update: This example adds text to supplement the visual indications of importance which can be read by assistive technology and conveys the significance in a useful way for all users. 

Color

Color makes content accessible by emphasizing visual elements (icons, text, labels) to communicate meaning. Color cannot be used as the only way to communicate meaning or an important change, because not everyone can see color differences.

Contrast

Contrast is the difference between the lightness and darkness of two colors. Good color contrast makes content accessible by making text and controls easier to see and read. Accessible contrast benefits people who have various types of colorblindness, have low vision, are neurodivergent, or are viewing content in different lighting conditions.

Contrast Checker Resources:

When reviewing existing content, visually scan text and controls for low contrast. Any combinations that look low contrast should probably be improved.

To check the contrast value between two colors, use the WebAIM Color Contrast Checker. The checker will calculate the value and tell you if itpasses or fails.

Plain language is writing that is easy to read and understand. Plain language makes content more accessible to everyone, and it can be used in different contexts. 

Make your writing more understandable by being concise, organized, clear, using common words, defining acronyms and avoiding jargon. For additional help use the Hemingway Editor and get a reading level score and other suggestions or Digital.gov’s Plain Language Guide.

Setting the Language in Canva

Select the primary language for your designs to make them more accessible for screen reader users.

1. From your selected design, select File.
2. Select Settings.
3. Select Locale settings.
4. Select dropdown to select your language from the list.
5. Select language to choose the language and confirm the one used in your design.

If you are using Canva, there is a built-in accessibility tool to help you review items like typography, color contrast, and alternative text.

1. Open the design that you'd like to check the Accessibility.
2. From the Editor, select File from the menu, then select Accessibility.
3. Select Check Design Accessibility to open the Design Accessibility window on your editor.

You’ll see a summary of accessibility issues detected that are grouped by category, and include typography, color contrast, and alternative text.

1. Open the design you want to export.
2. Go to Share, then select  Download.
3. From the File type, select PDF Standard.
4. Check Match reading order to layers.
5. Make sure the Flatten PDF checkbox is unchecked. Flattening removes accessibility tags.
6. Select Download. 

Tip: Accessibility tagging isn’t supported for flattened PDFs.

Sharing A Google Doc:

1. Select File. 
2. Select Share.
3. Under General Access select either Restricted, Richland School District #400 or Anyone with Link.
4. Copy the link and click done.

Tip: You can update the permissions to ‘Anyone with the link’ is a ‘Viewer’ if you want to make sure everyone can see your document without making any edits.

Publish as a Web Page:

1. Select File. 
2. Select Share.
3. Adjust the settings under Published content and &settings.
4. Select Publish to the web. 

This will make your document publicly available as a web page that will update whenever you update your original document. To share it, provide the web page URL.

Download as a Word Document:

1. Select File. 
2. Select Download.
3. Select Microsoft Word (.docx). 

Resource:

• Share files from Google drive