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.

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

 

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.

 

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.

 

  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

 

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.

 

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.

 

  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

 

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

 

 

 

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.

 

 

 

  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

 

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.

 

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.

 

  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

 

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.

 

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.

 

  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

7) Document: The document is untagged

8) Document: The document is missing a title

 

9) The HTML content has malformed lists

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


Relevant Information

Have a suggestion?

Email us! lts@boisestate.edu