Web Accessibility Checklist

Web Accessibility Checklist

Printer Friendly PDF, Issues and Explanations

Checklist PDF, Issues only

Checklist we share with you when reviewing a course (Downloads Word doc)

This checklist show the items that an instructor working in Canvas needs to be aware of when creating their course content. These items will be checked during an accessibility review of online (or hybrid) class materials and reflect WCAG 2.0 guidelines for level A and AA in addition to Section 508 rules.

See also the Canvas Accessibility page that includes screen shots and additional instructions.

Checklist

#

Rule Description

Explanations and Solutions

1

Provide Alternate Text (ALT text) for non-text content

  • All non-text elements such as images have text equivalents.
  • Images that include text should have the text reflected in the ALT text
  • Charts, graphs, etc. that need long descriptions are described in surrounding text or provide a link to a separate page with description
  • Best if decorative images, redundant images, and images used for spacing have empty ALT text.

In Canvas, after placing an image on a page, click on the image while still in editing mode. Then click on the Embed image icon in the editor tools to access the Insert/Edit Image dialog box. See the Alt text field in the Attributes area.

Ideally your alternative text would be a short phrase or sentence describing the image. Do not add "image of" or "picture of" at the start of the text, as the screen reader will be calling that out.

If the image needs a longer description, consider putting the description into the text of the page near the image or linking to another page with the long description.

If the image is purely decorative, type "null" into the Alt text field.

See more information about Alt text on the Canvas Accessibility page

2

Multimedia

  • Multimedia files with audio have synchronized captioning of the audio portion.
  • Audio only files have a text equivalent such as a transcript.
  • A silent web slide show presentation has text alternatives associated with the graphics.

Instructor-created multimedia can easily be submitted for captions or transcripts. See the Captioning Help & Guidance page.

Instructors are encouraged to choose third party multimedia that have transcripts and captions since there is limited resources to provide help. When searching for third-party videos to add to your course sites, visit the Third-party Video Content Resources page first to see good sites that will likely have captioned videos.

See the Multimedia Accessibility page for more information on how to find, create, and implement accessible multimedia in your course.

For more information, contact the Instructional Accessibility Specialist in Distance Education.

3

Headings

  • Headings should be provided and used appropriately.
  • Do not "fake" headings by bolding, underlining, or coloring the heading without using heading tags.

All pages that have a significant amount of content should include headings where appropriate.

Canvas provides a tool in the Rich Content Editor for assigning headings - look for a drop down that says "Paragraph". In the drop-down menu there are choices for Header 2, Header 3, and Header 4. Header 1 is reserved for the title of the page and Canvas applies it automatically.

Microsoft Word's built-in styles work like headings and are compatible with assistive technology. Make sure to use the built-in styles as opposed to creating your new styles. It is fine to modify the built-in styles to look as you like.

Be mindful to put headings in the correct order. Do not choose a header for the size. You can apply the size of the font using the Font Size drop down separately.

See more information about Headings on the Canvas Accessibility page

4

Lists

  • Lists need to be correct HTML lists, not faked.

Create lists with the appropriate tool in the Canvas editor, Microsoft Word, or other software. Using the tool provided will create proper lists with the correct tag structure behind the scenes.

When nesting lists, it is also important to create the right tag structure. Using the Increase Indent tool will nest lists. Contact the Instructional Accessibility Specialist in Distance Education if you need assistance

5

Links

  • The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and it's context (e.g., surrounding paragraph, list item, table cell, or table headers).
  • Links (or form image buttons) with the same text that go to different locations are readily distinguishable.

When creating links, be sure to make the active hyperlink text be descriptive of where the link goes.

Do not use the same hyperlink text on a page that links to different locations.

Do not use long URLs as hyperlink text.

6

Color

  • Color is not solely used to convey information or indicate an action
  • Foreground text and background colors have sufficient contrast of at least 4.5:1
  • Text that is over 18 point or 14 point and bold needs a contrast of at least 3:1

When using color or referring to colors on the page, make sure to offer another way to emphasize the text or object, such as bold or italics for text.

When choosing colors for text in the Rich Content Editor in Canvas, be careful to select colors that will provide a strong contrast. See the chart on the Canvas Accessibility page to see what colors have enough contrast in combination with white or black.

Headings or large text need less contrast. The chart shows check marks to denote colors that have enough contrast for body copy. The o icon in the chart denote colors with enough contrast for large text.

7

Sensory Characteristics

  • Instructions do not rely upon shape, size, visual location, or sound (e.g. "Click on the square icon" or "Follow the instructions in the right-hand column" or "Listen for the tone to continue".

Be mindful of creating instructions with visual cues that refer to shapes, colors, and location that will not be perceived by disabled users. Consider using a heading when referring to an area of the page.

8

Tables used for data

  • Row and column header cells are designated.
  • Where necessary, data cells are associated with their headers by using the scope attribute.
  • Data table captions and summaries are used where appropriate.

It is recommended to use tables only for data as opposed to layout purposes. If you need to use tables to position your elements on a page, disregard these guidelines that are for data tables.

Canvas provides easy to use settings for designating header cells, scope, and captions. See the tables section on the Canvas Accessibility page.

9

Moving, blinking, scrolling and auto-updating

  • No elements on the page flicker at a rate of 3 times per second or more unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red.
  • Automatically moving, blinking or scrolling content that lasts longer than 3 seconds can be paused, stopped, or hidden by the user.

Do not use blinking animations unless the flash is less than 3 times per second, or is sufficiently small and of low contrast. Flashing content that has the color red should especially be avoided.

10

Applets, plug-ins and other applications

  • A link is provided to download any applet, plug-in or other application needed to play or display the required content.

Most often used plug-ins:

11

Linked documents

  • Word documents are accessible
  • PDFs are accessible
  • PowerPoint files have HTML or PDF alternative

All linked documents that are required need to be reviewed during an accessibility review. In most cases, DE staff will help make them accessible. Contact the Instructional Accessibility Specialist in Distance Education for assistance.

See tutorials on creating accessible Word docs and PDFs, and accessible PowerPoint alternatives.

Button_Contact DE Support