High Impact Accessibility Issues
Digital Accessibility Issue: Using font size or bolding to create headings instead of Canvas's built-in heading styles. Every page needs a top level header which is Canvas is h2.
Impact: Screen reader users rely on heading structure for navigation, and improper structure disrupts this. Users not using assistive technology rely on header structure to understand the content being displayed. So let's make it make sense!
Solution: Utilize Canvas's Rich Content Editor to apply proper heading levels (Heading 1, Heading 2, etc.) to create a logical hierarchy. Nest headings by their rank (or level). The most important heading has the rank 1 (h1) in HTML files or rank 2 (h2) in course content, the least important heading rank 6 (h6). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section. Skipping heading ranks can be confusing and should be avoided.
Digital Accessibility Issue: Uploading scanned or untagged PDFs and documents that are not optimized for screen readers. This includes uploading Word documents and PDFs that are missing titles in the metadata properties (e.g., title element missing).
Impact: Screen reader users cannot access the content within these files.
Solution: Ensure documents are properly formatted with headings, tags, logical reading order, document title, and alternative text before uploading.
Utilize these accessibility checklists:
For issues with the "Title Element is Missing", use these directions to remediate:
- Word for Windows title element (File -> Info -> Properties; add the document's title, not the file name, in Properties)
- Word for MacOS title element (File -> Properties -> Summary; add the document's title, not the file name, in the Summary tab)
- PDF document title (2 things to do):
- (Menu -> Document Properties -> Description tab and then add title) and also
- (Menu -> Document Properties -> Initial View and then select Document title instead of File name for the screen reader to read the proper title)
Digital Accessibility Issue: Using quiz question types that are difficult for screen reader users, such as drag-and-drop or matching.
Impact: Screen reader users may be unable to complete these types of questions.
Solution: Provide alternative versions of quizzes or use accessible question types.
Digital Accessibility Issue: Using text and background colors with low contrast, making it difficult to read.
Impact: Students with visual impairments or low vision may struggle to read the text.
Solution: Use color contrast analyzers to ensure sufficient contrast between text and background.
Digital Accessibility Issue: Posting videos or audio content without captions or transcripts.
Impact: Students with hearing impairments cannot access the audio content.
Solution: Provide accurate captions for videos and transcripts for audio content. Auto generated captions must be manually checked for accuracy.
Digital Accessibility Issue: Adding URLs as the link text and or using non descriptive link text such as "click here" or "learn more."
Impact: Vague link text makes it challenging to navigate web pages effectively. Users may open incorrect links or struggle to find the information they need. Screen reader users often navigate by listening to a list of links. Non-descriptive text like "click here" or "read more" provides no context, making it impossible to understand the link's destination.
Solution: Links should be descriptive of the content they're linking to, such as 'Class Schedule' rather than 'schedule.html' or 'click here.'
Digital Accessibility Issue: Failing to provide descriptive alt text for images, or using generic phrases like "image." Alternative Text Should Not Be the Image Filename.
Impact: Screen reader users cannot understand the context of visual content.
Solution: Provide concise, descriptive alt text that conveys the image's purpose and relevant details. If an image is purely decorative, mark it as such.
Digital Accessibility Issue: Using color alone to indicate important information, such as deadlines or required actions.
Impact: Students with color blindness or visual impairments may miss crucial details.
Solution: Supplement color cues with text labels, symbols, or patterns.
Medium Impact Accessibility Issues
Digital Accessibility Issue: When a screen reader comes across an image, it will need the alt text so it can be read aloud by the screen reader or the alt text will appear in place of the image.
Impact: Images without alternative text (alt text) pose a significant accessiblity barrier as screen readers cannot interpret these images for users wtih visual impairments.
Solution: Insert alt text onto the image or mark the image as decorative (if it is only decorative).
Digital Accessibility Issue: The “title” element in a document’s properties refers to metadata information that is important for students using assistive technologies. This is not the same as the file name or the title in the document (usually a Heading 1). You will need to take extra steps to add a title.
Impact: A missing or empty <title> element matters for accessibility because it's the first thing screen readers announce, giving users context for the page, and it appears in browser tabs, bookmarks, and history, so without it, users (especially those with visual or cognitive impairments) get lost, confused, and can't easily navigate or identify content, requiring them to read the whole page to figure it out.
Solution:
- In MS Word files,
- Select File
- Select Info, (For Macs, select Properties)
- Enter a title and set the language.
- For PDF files, use Adobe Acrobat,
- Select File
- Select Properties, (For Macs, select Document Properties)
- Select the Description tab
- Enter the title in the Title field
Digital Accessibility Issue: Assistive technologies rely on the tags to understand the structure of a PDF file. Examples of tags are headings, paragraphs, lists, images, etc.
Impact: Without tags, assistive technology users cannot understand and navigate a PDF file. For those who do not use assistive technology, a similar experience would be a PDF file that only contains a single block of text.
Solution: For PDFs made from documents you own (such as Word, PowerPoint), make those original documents accessible and share them in their original file formats, or even as a Page in a Canvas course site, rather than in PDF format.
In Adobe Acrobat:
- Click on Prepare for Accessibility in the left menu.
- Select Automatically tag PDF to add tags to the document.
- When the Accessibility tags window displays on the right, check the tags. You need a <H1> tag near the top of the document for a screen reader to navigate the PDF.
Digital Accessibility Issue: The document is a scanned image, which means the entire document, including text, graphs, images, lists, is a single image on each page. Because of this, assistive technologies are unable to navigate the document.
Impact: "Image-based File Detected" matters for accessibility because these files (like scanned PDFs or photos of text) are just pictures, making them unreadable by screen readers and inaccessible to those who turn off images for focus or slow connections, creating content gaps.
Solution: For PDFs made from documents you own (such as Word, PowerPoint), make those original documents accessible and share them in their original file formats, or even as a Page in a Canvas course site, rather than in PDF format. Avoid using scanned PDFs to share course content.
Digital Accessibility Issue: Creating course pages that do not have any headings. All pages must at least have a top level header (h1).
Impact: Missing headers are difficult for screen readers to understand the logic of the content. All users need headings to understand the structure of the page content.
Solution: Add headings to the page to organize the content for sighted and screen reader users. The headings should represent an accurate outline of the content. Headings need to be in logical hierarchy order. All pages must start with a top level h1 heading. Followed by h2, h3. Headings may go back up one level and will remain in compliance.
Digital Accessibility Issue: Lack of table headers including row and column headers.
Impact: Table headers provide a description of the table structure for sighted and screen reader users.
Solution: Ensure all tables have appropriate row and column headers.
Digital Accessiblity Issue: Use of bold, italics and/or color to communicate importance and/or page structure rather than using headings.
Impact: Users cannot easily understand how the content is structured which decreases usability and comprehension.
Solution: Bold and Italics are used to emphasize text, whereas headings are used to define the structure of the document. Headings like h1-h6 are extremely useful for non-sighted users to navigate the structure of the page, and formatting a paragraph to just be big or bold, while it might visually look like a heading, does not make it one.
Digital Accessibility Issue: Linking to and/or embedding files by using the file name as the link rather than a descriptive link text.
Impact: File names may not be descriptive as to what the file actually is and this is confusing for the user and for screen readers.
Solution: Change the embedding file or link to the file with a descriptive text. For example, instead of embedding a file B12_lab1.doc, change the link to "Anatomy Module 12 - Lab 1," etc. Make the link make sense.
Low Impact Accessibility Mistakes
Digital Accessibility Issue: Embedded media may not be viewable on mobile devices, the multimedia objects are not accompanied with a link to a transcript of the content, and/or the embedded media uses an 'Object' tag and may require the user to install a plugin to view.
Impact: This can create support and access issues for some users. In addition, users may not be able to view the content.
Solution: Provide transcripts and alternative formats for embedded media. Do not use embedded media that requires the user to install additional plugins to view. Check embedded media on mobile devices to ensure it can be properly viewed on all devices.
Digital Accessibility Issue: Use of older elements of HTML that are no longer considered accessible, and have therefore been deprecated.
Impact: Deprecated HTML cannot be viewed by the user and therefore the emphasis is not understood.
Solution: Do not use basefont tags, font tags, marquee tags, and/or blink tags, which should not be used, ever.
