Accessibility checkers provide a quick indication of potential problems that you can fix in your course or website. Keep in mind that there are many accessibility issues that cannot yet be identified by an automated checker. The rest of this document covers those issues.
Web Content Accessibility Checkers
Document Accessibility Checkers
Headings (H1, H2, H3, etc.)
Logically ordered headings allow assistive technology to navigate your content (i.e., use H2 and H3 heading tags instead of "bold" or increased font size). This applies to all document types and web content.
SOLUTION: In the example below, content headings on the left were made with "BOLD" and increased "FONT SIZE.” The content looks like a normal outline for sighted users. However, the example on the right shows how this same content would be read by a screen reader which is unable to distinguish any heading elements because they haven’t been tagged correctly. Best practice is to select each section heading and apply a hierarchical "HEADING” tags (e.g., <h2>, <h3>, etc.).
MORE: Heading by WebAIM
Descriptive Links
The purpose of each link can be determined from the link text alone (for example, replace "click here" with "Chapter 1 notes").
SOLUTION: Reference the lists below to see accessible and inaccessible links. The first row replaces “click here” with a descriptive alternative. The second row replaces a raw URL with a descriptive alternative. The third row replaces a broken link with a functional link.
TIP: Use the CANVAS Link Validator to locate broken links in your course!
MORE: Link Descriptions
Color
Color should not be used as an exclusive method of conveying information. Contrast is sufficient to see the content.
SOLUTION: Ensure that the contrast between text and background is distinct. Use the Contrast Checker by WebAIM to confirm your contrast ratio's are at least 4.5:1. Ensure that your content does not require color vision.
MORE: Contrast and Color
Lists
Manually typed lists created with dashes and spaces won't be perceived by screen readers as an actual list but rather as a block of content. In that case, the user won't know how many items are in the list or be able to follow the sequence which causes confusion.
SOLUTION: In the example below, review how each of the lists are “ready by a screen reader.” In the inaccessible version, option "A" would be split by the words "underscore Parallel lines" making it very difficult to track what the list means. Instead, use the standard bullet and ordered list tools in each application to create ordered (numeric or alphanumeric) lists for sequential content, and unordered (bulleted) lists for content where the sequence doesn't matter.
Accessible List
|
Inaccessible Lists
|
|
MATCH THESE ITEMS:
- Acute Angle
- Parallel Lines
- Radius
TO THESE DEFINITIONS:
- Lines in the same plane that never intersect
- Angle less than 90 degrees
- A line segment from center of a circle
|
____ Acute Angle A. Lines in same plane
____ Parallel Lines that never intersect
____ Radius B. Less than 90 degrees
C. Distance from circle
center to edge
|
|
Read by a screen reader:
“MATCH THESE ITEMS:
List with 3 items
Acute Angle
Parallel Lines
Radius
List end… etc.
|
Read by a screen reader:
“underscore Acute Angle A period Lines in the same plane underscore Parallel Lines that never intersect underscore Radius B period Polygon with three sides… etc.”
|
MORE: List
Tables
Tables are powerful tools for presenting DATA. Headers, captions, and proper structure allow screen readers to connect each data cell to its meaning. Without this, a table can be a jumble of words and numbers. Historically, all designers used tables to control page layout even though they were never designed for this purpose. Layout tables don't have header context which is required for assistive technology. Tables also do not display well on mobile devices.
SOLUTION: Use tables for DATA, not for layout. The CANVAS Accessibility checker built into the rich text editor will help you add proper headers to your data tables.
MORE: Tables
Clean HTML code
- Request a "CLEAN Course Copy" from your CANVAS Admins before beginning remediation.
- W3C HTML Validator is free and helpful for finding errors in your syntax.
- HTML Washer strips out styles and other tags so you have clean HTML.
- CANVAS Clear Formatting feature within the "Rich Text Editor" strips out some tags to help clean HTML.
ALLY Accessibility Checker
- The inline Ally HTML Accessibility Tool is located above the rich text editor.
- The Ally Course Accessibility Report is accessed through each CANVAS course menu.
- NEW FEATURE: Ally can OCR scanned PDF documents!
MORE: ALLY Instructor Guide
CANVAS Built-in Accessibility Checker
The Rich Content Editor Accessibility Checker is located below the text editor.
MORE: Accessibility Checker in the Rich Content Editor?
CANVAS Module Layout
Page and module titles need to be unique, accurate, and clearly organized. This includes PowerPoint slide titles. Title elements are used as navigational aids for assistive technology. If you have many items all labeled “Practice,” as in the example below, some users navigating with assistive technology may not visually see the lesson context, and may misunderstand your content.
SOLUTION: Review the module list example below. The example on the right is inaccessible because it has multiple pages with the same title, and titles that are not descriptive. The example on the left is accessible because each page is uniquely and accurately titled.
- Use unique, simple naming conventions. Be consistent.
- Simplify navigation where possible.
- Use Text Header and indention to improve readability by creating a hierarchical structure.
Accessible Titles
|
Inaccessible Titles
|
 |
 |
MORE: Mastering Modules: A Guide to Organizing Your Content in Canvas
Equations and Logical Expressions
Math and scientific equations found in documents or images need to be converted to MATHML / LaTeX equations to be accessible by assistive technology.
SOLUTION: The Equation Editor built into the CANVAS rich text editor creates accessible equations visually or with LATEX code if needed. Another option is to subscribe to an application like MathPIX to quickly convert full documents into accessible material. If you must post an image of your equation, include a full text equivalent of the equation image.
MORE: Equation Editor in the Rich Content Editor
Alternative Formats
- Ally's built-in Alternative Format feature allows you and your students to transform content into a variety of formats.
- You may disable Alternative Formats on a particular file if needed.
MORE: Ally Alternative Formats
"CLEAN" Course Copy
Performing a "CLEAN" COURSE COPY will greatly benefit you when attempting to use the ALLY accessibility reporting tools. Submit a support request to clean out unused files.
- EXPORT course package
- DOWNLOAD course package
- RESET course content
- IMPORT course package (include only files "in use")
Images that convey course content need ALT text attached or are marked as decorative if they have no meaningful purpose.
SOLUTION: In the CANVAS text editor and other document editors, click on the image to access the Image Options and enter ALT text that is relevant to what you need viewers to learn from the image. ALT Text is context specific (i.e., the same image of a horse may have different ALT text in a veterinary course, or photography course). Complex images and graphs may need a more detailed description nearby.
SOURCE: W3 Image Tutorial
MORE: Image ALT Text
Close Captions help users with Auditory Disabilities
Closed captions are required for all video. Visuals presented without words require a written description. Auto-captions MUST be reviewed by a human.
SOLUTION: Panopto video is integrated with CANVAS and automatically provides captions and provides an easy way to edit the captions to correct any errors.
-
In your CANVAS course menu, click Panopto Video, then 3 DOT menu on your video, then EDIT.
-
Click on CAPTIONS in the Panopto Editor, make your changes and hit APPLY
Audio Descriptions help users with Visual Disabilities:
- All video that present information only visually must include audio descriptions.
MORE: Captions, Transcripts, and Audio Description
MORE: Panopto Video
Preferred Option
Could the document be delivered as HTML content? If so, convert it to a Canvas module page.
Common PDF Accessibility Fixes
- Run Adobe's PDF Acessibility Checker
Acrobat Pro > All Tools > Prepare for Accessibility > Check for Accessibility
- OCR Scanned Text
Acrobat Pro > All Tools > Scan & OCR > Recognize Text
- Add Tags
Acrobat Pro > All Tools > Prepare for Accessibility > Automatically tag PDF
- Set Document Title
Acrobat Pro > Menu > Document Properties > Description > Title
- Set Language
Acrobat Pro > Menu > Document Properties > Advanced > Language
- Add Alt Text to Images
Acrobat Pro > All Tools > Prepare for Accessibility > Add Alternate Text
- Set Reading Order
Acrobat Pro > All Tools > Prepare for Accessibility > Fix Reading Order
- Identify Form Fields
Acrobat Pro > All Tools > Prepare for Accessibility > Identify Form Fields / Auto tag form fields
- Color
Use
Contrast Checker to confirm your colors have a 4.5:1 ratio minimum between foreground and background.
Ability to see specific color should not be required to understand the content.
- Tables
Avoid tables for layout.
Add headers if data tables are required.
- DO NOT "Print to PDF"
Do not save a PDF using Print feature. It strips accessibility features of the PDF.
MORE: Adobe PDF Accessibility Help
MORE: DEMO: Screen Reader reading an UNTAGGED PDF
Preferred Option
Could the document be delivered as HTML content? If so, convert it to a Canvas module page.
Common WORD Accessibility Fixes
- Run Microsofts's Accessibility Checker
Microsoft Word > Review > Check Accessibility
- Built-in Headings and Styles
Microsoft Word > Review > Check Accessibility > Navigation
- ALT Text for Images
Microsoft Word > Review > Check Accessibility > Alt Text
- Reading Order
EDIT CONTENT: Microsoft Word > Home > Styles > Heading # (use logical order)
CHECK CONTENT: Microsoft Word > Review > Check Accessibility > Navigation Pane
- Descriptive Links
No "click here", No RAW URLs (e.g., https://www.uidaho.edu/sample-raw-url.aspx). Add relavent descriptive text, then hyperlink the text.
- Color
Use
Contrast Checker to confirm your colors have a 4.5:1 ratio minimum between foreground and background.
Ability to see specific color should not be required to understand the content.
- Tables
Avoid tables for layout.
Add headers if data tables are required.
MORE: Microsoft's Accessible Word Document Help
Preferred Option
Could the document be delivered as HTML content? If so, convert it to a Canvas module page.
Common POWERPOINT Accessibility Fixes
- Run Microsofts's Accessibility Checker
PowerPoint > Review > Check Accessibility
- Slide Titles are Unique
Screen readers navigate using unique slide titles
- ALT Text for Images
PowerPoint > Review > Check Accessibility > Alt Text
- Reading Order
PowerPoint > Review > Check Accessibility > Reading Order Pane
- Descriptive Links
No "click here", No RAW URLs (e.g., https://www.uidaho.edu/sample-raw-url.aspx). Add relavent descriptive text, then hyperlink the text.
- Color
Use
Contrast Checker to confirm your colors have a 4.5:1 ratio minimum between foreground and background.
Ability to see specific color should not be required to understand the content.
- Tables
Avoid tables for layout.
Add headers if data tables are required.
- Font Size
Use 18+ pt Font.
MORE: Microsoft's Accessible PowerPoint Help