University of Auckland logo

Stay informed

Receive updates on teaching and learning initiatives and events.

  1. Home
  2.  — 
  3. Resources for teaching
  4.  — Design for accessibility

Design for accessibility

Checking the accessibility of teaching materials ensures that we are supporting the success of all students.

How do I make content accessible?

Heading styles

Heading styles are pre-formatted headings that structure content in logical order. They enable readers to engage more strategically with your content, making it easy to view and navigate. In particular, for those who use screen readers, visually-impaired and/or dyslexic students), heading styles are essential because the software communicates levels of hierarchy.

DO

Structure content hierarchy

<h1>Bovidae<h1>
<h2>Sheep</h2>
<h3>Ewes</h3>

DON’T

Rely on text size alone

36pt font, bold
24pt font, bold
18pt font

 

Headings in Word

Headings are found in on the Home tab in the Word ribbon

Headings in Canvas

Heading styles are found under the second drop down-menu to the right of font size. drop-down

For example:

Heading one as the page title

[Some content]

Heading two as a section title

[Some content]

Heading 3 as a sub-section title

[Some content]

Plain language

Plain language is easily understood, concrete and descriptive. If used thoughtfully, plain language can convey complex ideas without being overly simplistic.

DO

Use plain language

“It’s raining heavily”

DON’T

Use idioms

“It’s raining cats and dogs”

Resizing images

Never drag the boundaries (handles) to shrink a big image in Canvas. This may seem to work, but it doesn’t make any difference to the file size and can adversely affect the image quality; you might pull the image out of proportion, causing distortion and degradation. This can be frustrating for everyone, not just low-vision users.

Additionally, low-vision users may need to zoom in or enlarge an image, so it is best if the image has not been degraded.

Resizing images in Windows

Open your image in the Photos application pre-installed in Windows and select Resize from the menu.

Click on the see more (three dots in the menu) to view the full menu, then select Resize.

Then select the medium option (this will be greyed out if your image is smaller than the medium image profile).

Select the medium profile (M), the option will be greyed-out if the original image is smaller than the medium profile

Resizing images in MacOS

Use the Preview App on a Mac computer to resize your image.

Alternative text

Screen readers cannot display images but can read aloud text labels that describe them.

Alternative (alt) text is needed to describe the content and function of the image and any text that is part of an image.

Adding alternative text in Canvas can be easily done from the Rich Content Editor.

DO

Describe images

figure of an apple
alt=“an apple”

DON’T

Use meaningless descriptions

figure of an apple
alt=“appl2_small.gif”

 

If the image is purely decorative, leave the alternative text blank: alt=“”

Colour contrast

Colour contrast is the difference between text and background colours. Most people prefer white text on a black background (high contrast) over orange text on a red background (low contrast). This is especially the case for people with low contrast sensitivity or colour blindness, who may struggle to discern meaning when insufficient contrast is provided.

Conversely, some people with high contrast sensitivity (e.g., Irlen Syndrome or visual stress) may struggle with extreme contrast. This can lead to discomfort, such as eye strain and headaches. Therefore, providing balanced colour contrast is important.

DO

Use contrasting colours

Figure of black text on a pale amber background

DON’T

Use pastel shades

Figure of white text on a pale amber background

 

Use WebAIM’s Contrast Checker to test the contrast of foreground and background colours or Wave tool to test the contrast of an entire page.

Colour and screen readers

Colour is a helpful visual signpost of hierarchy and/or meaning; however, screen readers cannot recognise it. It is, therefore, best used in combination with symbols, text or alt text for images, as screen readers cannot read text within images. Using colour alone to denote hierarchy and/or meaning will limit accessibility for those with visual impairments (e.g., colour blindness or low vision).

DO

Use colours along with symbols, text or alt-text

Pie chart with colours, patterns and descriptive labels

DON’T

Rely on colour alone

Pie chart with labels but relying on colour alone

Page layout for documents and files

Page layouts need to be clear, consistent and easily navigated. Font family size and colour should be easily legible. For example, a single column with chunked content is more easily navigated than double columns.

Your content will be scanned by screen readers and accessed by low-vision users. If you create your page layout for these readers, everyone will benefit.

DO

Follow a linear layout

A symbol of a page with a basic layout

DON’T

Build complex page designs

A symbol of a page with a cluttered layout

Video captions and transcriptions

Video can be demanding for many types of learners. Textual descriptions, or captions, can at least help to describe what is happening on screen.

Multiple factors can affect the accessibility of online video, from technical limitations, such as low bandwidth or poor connectivity, to individual preferences and limitations. Many learners prefer textual representations, but for visually impaired learners, these are essential.

DO

Provide captions and transcripts

Sppeech bubble with the letters CC

DON’T

Rely on audio or video alone

speaker icon

 

See more:

Tools for captioning recordings and live lectures

Correcting errors in automated-captions

Tables

A well-constructed table allows screen readers to read out the headings by column, and the data by rows, therefore giving the data meaningful structure. The general rule is to only use tables for tabular data, rather than page layout. Consider using Canvas Design Blocks as an alternative tool for designing page layout.

Structuring tables in Canvas

Within the rich content editor, highlight all the cells in the table that contain headers.

Navigate to the Table menu, then hover your mouse over Cell and then select Cell properties.

Select Header cell from the dropdown options under Cell type.

Then under Scope, select the option to specify whether the cells are a header for a column or row.

The Inclusive Design for Canvas course provides additional accessible table examples.

How do I check for accessibility?

Canvas

Use the UDOIT tool in Canvas. This identifies potential accessibility issues and suggests ways to fix them.

Go to: UDOIT accessibility assistant for Canvas.

Word and PowerPoint

Microsoft offers built-in accessibility checkers for Word and PowerPoint – see the Office Accessibility Checker.

Adobe Acrobat

Similarly Adobe Acrobat provides a built-in checker – see Create and verify PDF accessibility using Acrobat Pro

Inclusive Design for Online Accessibility (PDF)

 Learning difficulties and teaching inclusively (PDF)

Inclusive Design for Canvas course

Canvas design templates

Page updated 17/07/2023 (minor edit)

What do you think about this page? Is there something missing? For enquiries unrelated to this content, please visit the Staff Service Centre

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.