Canvas Ally: Top 10 Accessibility Issues and Fixes

This article lists the Top 10 Accessibility Issues at Boise State University and how to fix them.

Common Accessibility Issues at Boise State University

Click on the Issue to be automatically taken to it’s solution:

  1. Image: The image does not have a description

  2. Document: The document has contrast issues

  3. The HTML's heading structure does not start at the right level

  4. The document contains images without a description

  5. Document: The document does not have a language set

  6. Document: The document does not have any headings

  7. Document: the document is untagged

  8. Document: the document does not have a title

  9. The HTML content has malformed lists

  10. Document: the document has tables that don’t have any headers


Identify

Learn

Grow

decorative image of dirt.
Decorative image of a plant growing out of the dirt.
Decorative image of plant growing out of dirt now blooming flowers

Identify the Accessibility Issue.

Understand how the issue impacts users. Learn why it is important for all users to have access to this content.

Use new knowledge about Accessibility to grow a more effective and user-friendly Canvas Course.


1) Image: The image does not have a description

decorative image of dirt.
Identify

 

These images do not have a description or alternative text. People with screen readers or other assistive devices rely on this description to understand the image's contents and purpose.

  • An image description, sometimes referred to as 'alternative description' or 'alt text', is a textual alternative for an image.

  • It makes it easier to connect the image to its context and allows students with visual impairments to perceive the image.

  • Descriptions should be brief and convey the full meaning of the image. They should not be the same as the file name as this is often not descriptive enough.

Decorative image of a plant growing out of the dirt.
Learn

 

Why describing images matters:

Having a clear description for an image can help everyone better understand the content of the image and how it relates to the context.

  • Provides better context - Clear image descriptions make it easier to connect your image's content to the context it's used in.

  • Facilitates searching - Image descriptions help your students to find the images more easily.

  • Essential for students with visual impairments - Students with visual impairments have difficulties perceiving images. Image descriptions offer them an equivalent experience.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The image does not have a description.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up.

  4. The tab will display the image, a score, a description of the accessibility issues, information about why the issues are important, as well as an example of Alt. Text.

    1. Use the Alternative Text box to add a description of the image and select Add, or select the Decorative Image button if appropriate.

    2. The Ally Score will show immediate improvement as well as alert you if there are any further issues regarding this image.

  5. When you are done making changes, select the white X in the upper right hand corner of the Score panel. This will close the tab and return you to the list of images with issues, updated based on the changes you just made.

Alt Text Best Practices, Gotchas, and ProTips (to be linked soon!)

2) Document: The document has contrast issues

decorative image of dirt.
Identify

 

These documents contain text with low contrast between the text and its background.

What is color contrast

Color contrast is the difference in brightness between the text color and its background. Sufficient contrast is necessary to ensure legibility of the text.

You can still use color and shades provided there is sufficient contrast.

Decorative image of a plant growing out of the dirt.
Learn

 

This can cause the text to be difficult to read, especially for those with low vision, poor eyesight or color blindness.

Why use sufficient contrast:

  • Ensures legibility - Low contrast text can be difficult to read for everyone, especially when projected in class.

  • Essential for students with visual impairments - Color vision deficiency is fairly common; it affects 1 in 12 men and 1 in 200 women. Text with low contrast can be difficult for them to read.

  • Low-quality monitors or glare can make it worse - While certain colors can be easy to read in normal light, they can be difficult to read in bright light or on low-quality monitors.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The document has contrast issues.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up.

  4. Follow the instructions provided on Ally:

    1. Download the Original Document.

    2. Fix the Document with the instructions provided by Ally.

    3. Save the New Document.

    4. Upload the New Document into Canvas Ally to replace the old document.

  5. When you are done making changes, select the white X in the upper right hand corner of the Score panel. This will close the tab and return you to the list of images with issues, updated based on the changes you just made.

3) The HTML's heading structure does not start at the right level

decorative image of dirt.
Identify

 

The headings in the HTML content don't begin with the main heading and therefore don't follow a logical order.

 

 

Decorative image of a plant growing out of the dirt.
Learn

 

Having the main heading at the beginning of the document will provide a more logical structure and will make the document much easier to understand and navigate for all users.

 

 

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The HTML's heading structure does not start at the right level.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up showing the Canvas Page that Ally is referring to.

  4. Edit the Canvas Page paying special attention to the Heading Structure. The title of this issue is the clue as to the problem “The HTML’s heading structure does not start at the right level.”

    1. Organize your Content with Structured Headings

    2. Sometimes when content is copied and pasted from other sources, the Heading Levels might need to be re-applied to a heading in order for the software to “read” it correctly.

    3. Save the page when you are finished.

    4. Close the tab.

  5. Return to the Accessibility Report and navigate to the The HTML's heading structure does not start at the right level topic to verify the issue shows as resolved.

4) The document contains images without a description

decorative image of dirt.
Identify

 

These documents contain images that don't have a description or alternative text. People with screen readers or other assistive devices rely on these descriptions to understand the image content and purpose.

  • An image description, sometimes referred to as 'alternative description' or 'alt text', is a textual alternative for an image.

  • It makes it easier to connect the image to its context and allows students with visual impairments to perceive the image.

  • Descriptions should be added to all images, including those embedded within PDF, Word, PowerPoint and other documents.

Decorative image of a plant growing out of the dirt.
Learn

 

Having a clear description for an image can help everyone better understand the content of the image and how it relates to the context.

  • Provides better context - Clear image descriptions make it easier to connect your image's content to the context it's used in.

  • Facilitates searching - Image descriptions help your students to find the images more easily.

  • Essential for students with visual impairments - Students with visual impairments have difficulties perceiving images. Image descriptions offer them an equivalent experience.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The document contains images without a description.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up.

  4. Follow the instructions provided on Ally:

    1. Download the Original Document.

    2. Fix the Document with the instructions provided by Ally.

    3. Save the New Document.

    4. Upload the New Document into Canvas Ally to replace the old document.

  5. When you are done making changes, select the white X in the upper right hand corner of the Score panel. This will close the tab and return you to the list of images with issues, updated based on the changes you just made.

5) Document: The document does not have a language set

decorative image of dirt.
Identify

 

These documents do not specify the language in which they have been created.

When a document or paragraph has the correct language applied, it can be checked against the spelling and grammar rules for that language. A correctly set language will suggest corrections and enable audio or screen readers to read text in the correct language and accent.

Decorative image of a plant growing out of the dirt.
Learn

 

Certain technologies, such as screen readers, rely on the specified language to determine how to process the content or pronounce the text inside of the document.

Why specify a language

Helps identify language mistakes - Setting the language in a document allows the spelling and grammar of the text to be checked in that specific language.

Helpful for students with visual impairments - Students who use screen readers need a correctly set language to be able to hear the document read out in the correct language and accent.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The document does not have a language set.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up.

  4. The solution for this issue is to upload a new document in which the language is set.

  5. Follow the instructions provided on Ally:

    1. Download the Original Document.

    2. Fix the Document.

      1. Open the Document in Adobe Acrobat.

      2. Right-click on the document.

      3. Select Document Properties.

      4. Select Advanced tab.

      5. Locate Reading Settings → Language.

      6. Select the appropriate Language (example: English).

      7. Select Ok.

    3. Save the New Document.

    4. Upload the New Document into Canvas Ally to replace the old document.

  6. When you are done making changes, select the white X in the upper right hand corner of the Score panel. This will close the tab and return you to the list of images with issues, updated based on the changes you just made.

6) Document: The document does not have any headings

decorative image of dirt.
Identify

 

These documents don't contain any marked-up headings.

Decorative image of a plant growing out of the dirt.
Learn

 

  • Headings are important as they provide structure to a document, especially those that consist of many pages.

  • When headings are properly and consistently used, the document becomes much easier to understand and navigate for all users, and provides additional benefits such as the ability to automatically generate a Table of Contents.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The document does not have any headings.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up showing the Canvas Page that Ally is referring to.

  4. Follow the instructions provided on Ally:

    1. Download the Original Document.

    2. Fix the Document with the Ally Instructions. (Organize your Content with Structured Headings). Examples of different documents are: Word, PDF, Powerpoint, etc.

    3. Save the New Document.

    4. Upload the New Document into Canvas Ally to replace the old document.

  5. Return to the Accessibility Report and navigate to the The document does not have any headings topic to verify the issue shows as resolved.

7) Document: The document is untagged

 

decorative image of dirt.
Identify

 

These PDF documents are not tagged.

  • Most documents are created in a word-processing program such as Word or PowerPoint before they are converted to a PDF.

  • Many programs create PDF files, but few produce structured or tagged PDFs.

  • PDF tags are hidden labels that clarify the structure of the document (e.g., table, heading, paragraph, etc.).

  • Untagged PDFs do not contain any of this information and can cause the content to be misinterpreted.

Decorative image of a plant growing out of the dirt.
Learn

 

  • PDF tags are hidden labels that clarify the structure of the document and define what's a heading, paragraph, table, list, etc.

  • Without these tags, PDF documents are essentially just a bag of difficult to distinguish words that can be really hard to navigate and understand for people with screen readers or other assistive devices.

  • Essential for students with visual impairments - Tagged PDF files enable screen readers to determine a logical order and structure. Without tags, PDF files are just a bag of unstructured words.

  • Easier navigation - The structural information in a tagged PDF allows for automatic generation of a table of contents. This facilitates navigation for all students, especially for long documents.

  • Adapts to screen size - A tagged PDF will reflow the content to best fit your device. Without tags, students will be required to do more zooming and scrolling.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The document is untagged.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up showing the Canvas Page that Ally is referring to.

  4. The solution for this issue is to upload a new PDF document which has Tags.

  5. Download the original PDF by selecting the download symbol across the top of the frame.

  6. Open the document in Adobe Acrobat Pro (or other PDF Reader - note, the instructions below are for Adobe.

  • Boise State University has access to free Adobe Acrobat Pro licenses.

    • To get a license, contact your department or college administrator to request an Acrobat Pro license, or send a request to the Help Desk at helpdesk@boisestate.edu. Please reach out to the Help Desk for questions or additional information at (208) 426-4357 or helpdesk@boisestate.edu.

7. Fix the PDF.

  • Use Adobe Acrobat Pro to add Tags to the PDF.

    • Creating accessible PDFs in Adobe Acrobat

    • To tag a PDF in Acrobat, choose Tools > Accessibility > Add Tags To Document.

    • This command works on any untagged PDF, such as one created with Adobe PDF Printer. Acrobat analyzes the content of the PDF to interpret the individual page elements, their hierarchical structure, and the intended reading order of each page.

8. Save the PDF.

9. Re-upload the newly tagged document.

10. Return to the Accessibility Report and navigate to the The document is untagged to verify the issue shows as resolved.

8) Document: The document is missing a title

decorative image of dirt.
Identify

 

These PDF documents are missing a title.

A PDF title is a more descriptive and meaningful version of the file name. PDF titles are often visible in the PDF window or tab. This visibility makes it easier to distinguish multiple PDFs before diving in.

Decorative image of a plant growing out of the dirt.
Learn

 

  • Helpful for students with visual impairments - When multiple PDFs are open, well defined PDF titles allow for easier distinction between them. This distinction is particularly useful when relying on screen readers.

  • Easier navigation - Well defined PDF titles can help students assess the content of a document. This quick assessment helps students save time deciding which documents to engage with.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select The PDF does not have a tite.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up showing the Canvas Page that Ally is referring to.

  4. Follow the instructions provided on Ally:

    1. Download the Original Document.

    2. Fix the Document with the Ally Instructions. Examples of different documents are: Word, PDF, Powerpoint, etc.

    3. Save the New Document.

    4. Upload the New Document into Canvas Ally to replace the old document.

      1. Use Adobe Acrobat Pro to add Tags to the PDF.

        1. Creating accessible PDFs in Adobe Acrobat

        2. To tag a PDF in Acrobat, choose Tools > Accessibility > Add Descriptions to the Images in the Document. This command works on any untagged PDF, such as one created with Adobe PDF Printer. Acrobat analyzes the content of the PDF to interpret the individual page elements, their hierarchical structure, and the intended reading order of each page.

  5. Return to the Accessibility Report and navigate to the The document is missing a title to verify the issue shows as resolved.

 

9) The HTML content has malformed lists

decorative image of dirt.
Identify

 

The list (<ul> or <ol>) elements in the HTML content contain inappropriate child elements.

Decorative image of a plant growing out of the dirt.
Learn

 

This can cause screen readers to read out the definition lists incorrectly.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select HTML content has malformed lists.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up showing the Canvas Page that Ally is referring to.

  4. Follow the instructions provided on Ally:

    1. Download the Original Document.

    2. Fix the Document with the Ally Instructions.

    3. Save the New Document.

    4. Upload the New Document into Canvas Ally to replace the old document.

  5. Return to the Accessibility Report and navigate to the HTML content has malformed lists to verify the issue shows as resolved.

10) Document: the document has tables that don’t have any headers

decorative image of dirt.
Identify

 

These documents contain tables that don't have or properly specify a header structure.

Decorative image of a plant growing out of the dirt.
Learn

 

People with screen readers or other assistive devices rely on a semantically meaningful and correct heading structure to help them navigate the table and understand the meaning of every cell, but it can be beneficial to everyone to have a clear structure in the table.

Decorative image of plant growing out of dirt now blooming flowers
Grow

 

  1. In a course that has Canvas Ally turned on, select Accessibility Report from the course navigation menu.

  2. Scroll to the list of issues on the bottom of the page and select Document: the document has tables that don’t have any headers.

  3. A page will load listing all images with issues, select the Fuel Symbol/Score on the righthand side of the image you wish to fix. A new tab will open up showing the Canvas Page that Ally is referring to.

  4. Edit the Canvas Page. L

    1. Locate the table that was flagged by Ally, highlight the cells that should be “Headers”

    2. Click on the Table Icon from the rich content editor. Select Cell → Select Cell Properties.

    3. A new window will pop up. Select the drop-down option for “Cell Type” and change the type from Cell to Header. Select Save.

    4. Save the page when you are finished.

    5. Close the tab.

  5. Return to the Accessibility Report and navigate to the The HTML's heading structure does not start at the right level topic to verify the issue shows as resolved.


Relevant Information

Have a suggestion?

Email us! lts@boisestate.edu