Design for accessibility
Identifying and fixing accessibility issues within Canvas Courses, using UDOIT Advantage, is a key component of Canvas Baseline Practices.
The Canvas Baseline Practices Project (CBP) builds on the University’s 2016 ‘Canvas Minimum Presence’ document and forms part of the Curriculum Framework Transformation at Waipapa Taumata Rau, supporting the University’s vision for best practice.
Why is this important?
The University has an obligation to meet the needs of all students, including the thousands of students who identify as having a disability*. Checking the accessibility of teaching materials, Canvas page structure and content will improve the overall student experience. Improving consistency, coherency and accessibility in Canvas pages will enhance student learning across the board.
*4125 students in 2023
What’s next?
From the UDOIT scan results of 2000+ Canvas courses, we now have a clear picture of Canvas course accessibility across the University and trends. The top five accessibility issues are explored below.
Top 5 accessibility issues
1. Headings
Heading styles are pre-formatted heading types/formats that structure content in logical order, making it easy to view and navigate. Heading styles are also essential for screen reading software as the software communicates levels of hierarchy to users.
DO
Use inbuilt headings to create 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
Fixing UDOIT issues
Problem 1: Heading Levels Should Not Be Skipped
Meaning
Don’t rely on text size and font alone for headings. Use the inbuilt heading function and follow the hierarchy laid out e.g. h1 – page header, h2 – section header, h3 – subsection header, etc.
How to fix it
This problem cannot be resolved in the UDOIT tool. Edit the page with the issue and ensure heading styles aren’t skipped.
Problem 2: Headings Should Contain Text
Meaning
This typically refers to an issue where a heading element (like <h1>, <h2>, etc.) is empty or does not contain any text content. An empty heading does not provide any information or structure, diminishing the user experience for those relying on assistive technologies such as screen readers.
How to fix it
In UDOIT Advantage, click the Review button for more information. Type your new heading into the text field and click Save, or use the checkbox to delete the heading if it is no longer required.
Getting it right
In Canvas
For example:
Heading 1 as the page title
[Some content]
Heading 2 as a section title
[Some content]
Heading 3 as a subsection title
[Some content]
In Microsoft Office
The ribbon in Microsoft Office products contain predefined styles for various types of text and include heading styles.
In Adobe Acrobat
If the inbuilt heading styles have been used correctly in Microsoft Office and Adobe InDesign, generating a PDF from these documents should result in a formatted document with correct heading hierarchy.
To check or fix the heading hierarchy, first navigate to All tools, then to Prepare for accessibility.
First it is recommended to autotag the content. Tagging identifies the individual components as paragraph text, headings, figures/images etc.
To begin autotagging, select Autotag document.
Select Reading order to check that the contents of the PDF have been tagged correctly.
If any components have been incorrectly tagged, use the Reading Order panel to select the section and correct the tag.
Once you have completed tagging content, close the Reading order panel. It is recommended to also run an Accessibility check which can be found under the Prepare for accessibility menu.
2. Links
Link text is text that links users to a new page or resource (internally or externally). A meaningful name tells people where they are going. Long-linked text that goes across lines does not always open properly and can be confusing. Links should be short and descriptive (written in a way that makes sense out of context and says exactly what the link is about or what the user is meant to do with it).
DO
Write descriptive links
Course schedule
New students
DON’T
Write vague links
Click here
https://www.auckland.ac.nz/en/students/newstudents.html
Fixing UDOIT issues
Problem 1: Link Has Nondescript Text
Meaning
The link is not appropriately named/doesn’t describe the content it is linked to. Links should clearly describe the content they are linking to e.g. ‘Class Timetable’ rather than ‘timetable.html’ or ‘click here’.
How to fix it
In UDOIT Advantage, click the Review button for more information. Replace the current link text in the text field or click the checkbox to remove the link, then click Save
Problem 2: Links Should Contain Text
Meaning
The link is empty; it contains no text, only an image.
How to fix it
In UDOIT Advantage, click the Review button for more information. Add new link text to the UDOIT tool or alt text to links containing only images and click Save. This will provide a description for users of screen readers.
Problem 3: Adjacent Links Found
Meaning
The content contains adjacent words that are linked individually to the same URL. This can cause confusion for screen readers.
How to fix it
To combine adjacent links in the Canvas rich content editor, first click on each link and remove the link.
Then, highlight all the text previously linked and create a single new link.
Getting it right
In Canvas, Microsoft Office and Adobe Acrobat
When creating links, consider where they are going and label them correctly at the time e.g. this link is going to Teachwell so it has been named TeachWell in the course content, rather than asking users to click here.
Tips to avoid problems
- Keep linked phrases short, 3-5 words.
- Links should describe what they are linking to.
- Links should be in contrasting colour to be mindful of learners with low vision or colour blindness.
- Avoid linking headings.
- Never use a URL for the link text—screen readers will read out the URL verbatim e.g. www.canvas…
3. Colour
The use of colour is an important consideration in course content development in Canvas.
DO
Ensure colours have sufficient contrast
Use font styles along with colour
This is important.
DON’T
Use pastel shades
Use colour alone to denote hierarchy and/or meaning
This is important.
Fixing UDOIT issues
Problem 1: Avoid Using Colour Alone for Emphasis
Meaning
When emphasising text, you may use colour (with sufficient contrast). However, you should also apply some other form of emphasis, such as bold or italics. This ensures that screen reader users are aware of the text’s importance.
How to fix it
In UDOIT Advantage, click the Review button for more information. Check the boxes for the change(s) to resolve this issue and click Save.
Problem 2: Insufficient Text Colour Contrast With the Background
Meaning
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.
How to fix it
In UDOIT Advantage, click the Review button for more information. Change the colour of the text and/or the background until the contrast ratio indicator in the UDOIT tool changes to a valid ratio.
Getting it right
In Canvas
Choose a font colour and background colour that provides good contrast. The accessibility checker in Canvas’ rich content editor can scan your content as you create it. One of its features is to report when there is a contrast issue with the text.
In Microsoft Office
Ensure your document uses text colour and background colours that have sufficient contrast. If you have any concerns with the contrast ratio, use the Accessibility Checker to check your document.
4. Alt 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.
DO
Describe images
alt=”an apple”
DON’T
Use meaningless descriptions
alt=”appl2_small.gif”
Fixing UDOIT issues
Problem 1: Alternative Text Should Not Be the Image Filename
Meaning
The alternative text of an image is the filename (the file’s original name), instead of descriptive alternative text (text that describes the picture).
How to fix it
In UDOIT Advantage, click the Review button for more information. Enter a short description for your image. If the image is purely decorative, check the box labelled Mark image as decorative and click Save.
Problem 2: Image Elements Should Have an "alt" Attribute
Meaning
All images should have alternative text or have been marked as decorative.
How to fix it
In UDOIT Advantage, click the Review button for more information. Add new alt text to the text field in the UDOIT tool and click save.
Problem 3: Alternative Text Is More Than the Maximum Allowed Characters
Meaning
The alternative text is too long. It should be 150 characters or less.
How to fix it
In UDOIT Advantage, click the Review button for more information. Edit the alt text in the text field so it is 150 characters or less and click Save.
Problem 4: Alt Text For Images Within Links Should Not Be Empty
Meaning
Hyperlinked images should contain alt text.
How to fix it
In UDOIT Advantage, click the Review button for more information. Add new alt text into the text field and click save.
Problem 5: Decorative Images Should Have Empty Alternative Text
Meaning
If an image is just for decoration, it should not have an alt text description.
How to fix it
In UDOIT Advantage, click the Review button for more information. Check the box labelled Mark image as decorative and click save.
Getting it right
In Canvas
In the Canvas rich content editor, click on any image and select Image options. Enter a short description for your image. If the image is purely decorative, check the box labelled Decorative Image and click Done.
Tips to avoid problems
- Keep alt text short, no more than 150 characters.
- For images containing text such as graphs and diagrams, provide supporting text and relevant data before or after the image. Alternatively you may also provide screen readable versions as a document or PDF.
In Microsoft Office
Click on an image, navigate to the Picture Format menu and select Alt Text in the ribbon. The Alt Text panel will appear on the right prepopulated with an auto-generated description. Edit this, or check the box labelled Mark as decorative.
Follow the link for more detailed support for adding alternative text.
In Adobe Acrobat
If the alt text has been added correctly in Microsoft Office and Adobe InDesign, generating a PDF from these documents should result in accessible images.
To check or fix the alt text in Acrobat, first navigate to All tools then to Prepare for accessibility.
Next, select Set Alternate Text. Acrobat will scan your document for all images.
Once the scan is complete, a dialog box will appear allowing the addition of alt text or setting the image as a Decorative figure.
Once you have completed adding alt text, click Save & Close. It is recommended to also run an Accessibility check which can be found under the Prepare for accessibility menu.
5. Tables
Tables are often used in Canvas courses to organise information, such as timetables and assignments.
A well-constructed table involves defining header cell types and the cell scope. This 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.
DO
Use tables for tabular data
DON’T
Use tables for layout
Fixing UDOIT issues
Problem 1: No Table Headers Found
Meaning
Table headers provide a description of the table structure. Tables without properly identified header cells can be hard to interpret and navigate for students who rely on screen readers.
How to fix it
In UDOIT Advantage, click the Review button for more information. Select the header option (column header, row header or both) for your table and click save.
Problem 2: No Row or Column Scope Declarations Found in Table Headers
Meaning
Table headings contained in the table have no defined scope attribute. Adding a scope helps screen readers determine whether the headers are for rows or a columns.
How to fix it
In UDOIT Advantage, click the Review button for more information. Select the option that defines the scope for your table headers and click save.
Problem 3: "Pre" Elements Should Not Be Used for Tabular Data
Meaning
Using pre elements in HTML preserves the layout and spacing (including tabs) which allows for ‘content that looks like a table’. However, screen readers and browsers perceive this as text rather than structured data. Creating a properly formatted table in Canvas indicates header cells and data cells and defines their relationship.
How to fix it
This issue cannot be resolved in the UDOIT tool. Edit the Canvas page, create a new table and copy the data in to the table .
Problem 4: Table Without Content Detected
Meaning
The UDOIT tool has found an empty table
How to fix it
This problem cannot be resolved in UDOIT. Edit the page in Canvas and populate the table with data or delete the table.
Getting it right
In Canvas
Canvas table cell properties
In the Canvas rich content editor, follow the menu Table > Cell and click on Cell properties.
Setting cell headers
Highlight the cells in the table which contain headers. Then follow the instructions above to open the Cell properties.
Under Cell type, select Header cell then continue to set the scope of the headers or click Save.
Setting cell scope
Setting the scope of table headers assists screen readers determine the direction of the table.
The scope is set in Cell properties. The options include Row – for headers of a single row, Column – for headers of a single column, Row group – for headers of multiple rows and Column group – for headers of multiple columns.
In Microsoft Office
Navigate to the Insert menu to insert a table. Select the table and follow the Table Design menu, choosing one of the Table Styles and customising the Table Style Options ensure your table is accessible.
Follow the link for more details about creating accessible tables.
In Adobe Acrobat
If the inbuilt heading styles have been used correctly in Microsoft Office and Adobe InDesign, generating a PDF from these documents should result in a formatted document with correct heading hierarchy.
To check or fix the heading hierarchy, first navigate to All tools then to Prepare for accessibility.
First it is recommended to autotag the content. Tagging identifies the individual components as paragraph text, headings, figures/images etc.
To being autotagging, select Autotag document.
Select Read order to check the contents of the PDF have been tagged correctly.
If any components have been incorrectly tagged, using the Read Order panel to select the section and correct the tag.
Right click on table cells, select Table Cell Properties to define the cell type and the scope.
Once you have completed tagging content, close the Reading order panel. It is recommended to also run an Accessibility check which can be found under the Prepare for accessibility menu.
How do I make content accessible?
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.
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.
Then select the medium option (this will be greyed out if your image is smaller than the medium image profile).
Resizing images in MacOS
Use the Preview App on a Mac computer to resize your image.
Colour and screen readers
Colour can limit the accessibility for those with visual impairments (e.g., colour blindness or low vision), so it is best used in combination with symbols, text or alt text for images.
DO
Use colours along with symbols, text or alt-text
DON’T
Rely on colour alone
Page layout for documents and files
Page layouts need to be clear, consistent and easily navigated. Font size and colour should be easily legible. For example, a single column with chunked content is more easily navigated than double columns.
DO
Follow a linear layout
DON’T
Build complex page designs
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
DON’T
Rely on audio or video alone
See more:
How do I check for accessibility?
Canvas
Word and PowerPoint
Microsoft offers built-in accessibility checkers for Word and PowerPoint – see the Office Accessibility Checker.
Adobe Acrobat
To check the accessibility of a PDF including heading hierarchy, open the PDF in Adobe Acrobat (not Adobe Reader) and click All tools.
You may need to click View more to show all the tools.
Find and select Prepare for accessibility.
See also
Inclusive Design for Online Accessibility (PDF)
Learning difficulties and teaching inclusively (PDF)
Inclusive Design for Canvas course
UDOIT accessibility assistant for Canvas
Page updated 05/10/2023 (swapped Canvas Design Templates for UDOIT)