WCAG for Instructional Designers

• A text alternative should be offered for all non-text content (1.1.1 A).

  • • For example, we offer alt text for images and transcripts/captions for media.

• Do not use formatting alone to communicate meaning (1.3.1 A).

  • • Instead of just italicizing required readings on a reading list, create a separate list with the required ones, or add an asterisk or the word "Required."

• Do not use sensory characteristics (size, font, color, shape, volume, location) alone to communicate meaning (1.3.3 A).

• The sequence of content on a page should be meaningful when read with a screen reader (1.3.2 A).

  • • This guideline is most relevant for people who write a lot of code where they manually position different pieces of a page – I don’t think we’ll encounter it often in the work we do on our team.

    • You can test this by bringing up the HTML view on a Canvas page editor and checking whether the order of content there makes sense.

• Do not embed anything that automatically plays audio or video on a Canvas page (1.4.2 A).

• Links should be descriptive and indicate the purpose of the linked page in context (2.4.4 A).

  • • Optionally, the linked text would still accurately describe the purpose of the linked page if all the links were in a bulleted list (2.4.9 AAA). This would mean no two links can have the same name,

•  If a page or interactive has animations, there should be an option to turn the animation off (2.2.2 A)

• Ideally, layout changes on the LMS page should not interfere with text readability (1.4.8 AAA). Designers can test this by resizing the browser window in the LMS or viewing the page on different versions of the LMS's mobile app.

• Headings should be in order, accurately describe the content of the page, and not repeat (2.4.6 AA).

• Do not use color alone to convey meaning (1.4.1 A).

• The contrast between body text and its background should be at least 4.5:1 (with an optional higher minimum of 7:1). The contrast between large title text and its background should be 3:1 at minimum (with an optional higher minimum of 4.5:1. These contrast requirements do not apply to logos, decorative text, or inactive UI icons.  (1.4.3 AA, 1.4.6 AAA).

• Pictures of text should have text alternatives available (1.4.5 AA). 

• Ideally, pictures of text would be avoided entirely unless they are exclusively for decoration, or the specific presentation of text in the picture is essential to the meaning of the content (1.4.9 AAA).

• Examples of Compliance

  • An instructor wants to include the poem "Ozymandias" by Percy Shelley on a page in the LMS. An instructional designer would ideally approach this by adding the text of the poem directly onto the page. If the instructor is insistent that an image of the poem be used instead of text, the instructional designer should include alt text on the image containing the poem, or add an extended image description visible to screen readers containing the poem.

  • An instructional designer wants to add a decorative word cloud with words and phrases about math to the homepage of a math course. Since the image of text is decorative, the instructional designer should use a blank alt attribute for the image.

  • An instructor in art history  wants to include an image of an illuminated manuscript such as the Book of Kells on a page in the LMS. While this is technically an image of text, the artful presentation of the text is essential to the meaning the instructor is trying to convey to the students. Instead a verbatim transcription of the text in the image, the instructional designer should include the image on the LMS page and work with the instructor to come up with a suitable text alternative that conveys the meaning of the image.

• If any parts of the LMS page are in a language other than English, they should have a “lang” attribute in the HTML (3.1.1 A, 3.1.2 AA).

• Additional Language Guidelines to Consider:

  • • Are all unusual words defined? For topic-specific jargon, are they defined at another point in the course? (3.1.3 AAA).

    • Are all acronyms and abbreviations defined in their first occurrence on the page? (3.1.4 AAA)

    • Is the reading level of the page suitable for the audience? (3.1.5 AAA).

    • Do any words on the page have pronunciation-dependent meanings? If so, check whether the word makes sense in context and if needed, note the pronunciation in parentheses. This one is not usually relevant to courses in English (3.1.6 AAA).

• The purpose of each input field in a form or assignment should be clear to the user. Canvas does this automatically, and we can support it by making question titles in Canvas quizzes descriptive, and adding contextual information to assignment prompts. (1.3.5 AA).

• Ideally, no web content should be timed. This is not relevant or possible for all of our content, since it’s pedagogically relevant for some course assignments to have time limits. We can still comply with this guideline in a course with timed assignments if our LMS allows us to grant students extended time on assignments (2.2.3 AAA).

If instructional designers are involved in planning or developing course media, they should consider these guidelines:

• Video-only content

  • • If a course video has no audio or narration, then audio description or a transcript should be available to students (1.2.1 A). This helps blind, low vision, and deaf-blind students access the information in the video.

    • This could mean adding a voiceover onto an existing video, having the instructor narrate what they are doing if there is no audio, or having an ID or faculty member write a transcript description of what happens onscreen. If an instructor really wants a video without any audio, it might be helpful to have them narrate the video while they’re filming it so that a transcript can be created, then remove the audio during editing.

• Audio-only content

  • • Transcripts should be available for all audio-only content like podcasts (1.2.1 A). IDs can add these to course sites to support this guideline.

    • Ideally, a sign language version of the content should be available (1.2.6 AAA).

• Audio & Video

  • • Captions should be available for all videos (1.2.2 A). IDs can add these.

    • Audio description or a text alternative should be available for all videos (1.2.3 A). This can be a transcript of the audio plus a copy of the materials that instructors can share onscreen.

    • If all the information in the video is contained in the audio track, no additional audio description is needed (1.2.5 AA). To help support this, encourage instructors to describe figures or graphs in their slides, or to narrate what they are drawing on whiteboards or slides.

    • Ideally, extended audio description would be available if the pauses in a video are not long enough to verbally describe the content. Most video players are not set up to handle multiple audio tracks of different lengths, so compliance with this criterion would involve creating another video file with pauses in it that can fit the longer description (1.2.7 AAA).

• Live Media

  • • Live captions should be available for live video (1.2.4 AA).

    • Ideally, live audio-only content should have live captions available, or a transcript should become available shortly after the live event (1.2.9 AAA).

• Other Video Notes

  • • Nothing in a video should flash more than three times per second to reduce the risk of seizures (2.3.1 A, 2.3.2 AAA).

    • Ideally, background music or background noise should be avoided when someone is speaking. If there needs to be background sound, the speaker’s voice should be 20 decibels louder than the background sound. (1.4.7 AAA).

    • Ideally, in-video quizzes or other interactives should have appropriate text alternatives available (1.2.8 AAA). Some tools create this alternative automatically (like Kaltura's Video Quiz).