Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 16 Next »

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

 Click to expand:
decorative image of dirt.

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.

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

  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.

2) Document: The document has contrast issues

 Click to expand:
decorative image of dirt.

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.

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

  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. The solution for this issue is to upload a new document with the contrast issues resolved.

  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

 Click here to expand:
decorative image of dirt.

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.

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

  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

 Click here to expand:
decorative image of dirt.

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.

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

  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. The solution for this issue is to upload a new document in which the images have Alternative Text added.

  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

 Click here to expand:

decorative image of dirt.

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

Decorative image of a plant growing out of the dirt.

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.

Decorative image of plant growing out of dirt now blooming flowers

6) Document: The document does not have any headings

 Click here to expand:
decorative image of dirt.

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

Decorative image of a plant growing out of the dirt.

  • 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

  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. The solution for this issue is to upload a new document in which has a Heading Structure added.

    1. Organize your Content with Structured Headings

  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

 Click here to expand:

decorative image of dirt.

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.

  • 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

  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.

  • Step 1: 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.

  • Step 2: 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.

  • Step 3: Re-upload the newly tagged document.

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

8) Document: The document includes images without a description

decorative image of dirt.

These PDF documents are missing a title.

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.

PDF titles are used as the document title for a PDF window or tab, making it easier to navigate to the PDF and understand the purpose of the PDF.

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

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

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

  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.

  • Step 1: 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.

  • Step 2: Use Adobe Acrobat Pro to add Alternative Text to images in 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.

  • Step 3: Re-upload the newly tagged document.

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

9) The HTML content has malformed lists

decorative image of dirt.

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

Decorative image of a plant growing out of the dirt.

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

Decorative image of plant growing out of dirt now blooming flowers

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

decorative image of dirt.

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

Decorative image of a plant growing out of the dirt.

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


Relevant Information

Have a suggestion?

Email us! lts@boisestate.edu

  • No labels