The Web Content Accessibility Guidelines (WCAG) are collaboratively written by the World Wide Web Consortium (W3C). These guidelines offer advice on how to improve the accessibility of web pages. Compliance with the guidelines is often used by higher education institutions to gauge how well they are doing with making their content accessible.
In general, the instructional designers I have worked with have been enthusiastic about content accessibility, but intimidated by the depth and scope of the WCAG guidelines. Lots of these guidelines relate to developers writing custom applications, or things that are handled at the learning management system (LMS) level. It can be challenging for instructional designers without much of a coding background to determine which guidelines are relevant to them.
On this page, I will describe the WCAG guidelines that I believe are most relevant to instructional designers who primarily work in learning management systems, like Canvas, Blackboard, or Moodle.
There are four key principles of WCAG:
1. Perceivable: can everyone take in all the information on the website?
2. Operable: can everyone use all the functions of the website?
3. Understandable: can everyone understand all the information on a website?
4. Robust: is the website built in a way that will still work with different devices & assistive technologies?
Under these four buckets, there are also a series of numbered guidelines on how to support those principles. For example, most of the guidelines that are relevant to video content are under “Perceivable,” so their numbers start with 1. Each guideline is also assigned a level, which reflects the level of importance and effort involved in meeting it. The levels are:
A: Basic accessibility.
AA: Medium tier accessibility. This is the level many higher education institutions pledge to achieve.
AAA: Highest level accessibility. This level includes some things that may not be relevant or possible for every site or situation. Because of that, I will describe guidelines at this level with "ideally."
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).