Apply guidelines for accessible online learning materials
Making online learning materials accessible means ensuring that your course materials can be accessed and understood by all students in your course. The following recommendations for making online course content in myCourses more accessible are based on the Web Content Accessibility Guidelines (WCAG) 2.2. WCAG sets out three levels of attainment or “conformance” based on how each guideline will meet the needs of different groups and different situations. The levels range from A (lowest level) to AA (middle level) to AAA (highest level).
Some WCAG guidelines are addressed by the software itself. The software used for myCourses provides an Accessibility Conformance Report indicating the WCAG criteria it meets. The report also proposes workarounds for scenarios in which ensuring accessibility may be less obvious.
Recommendations for making online learning materials accessible in your courses are organized here into six categories:
Clear organization: Content is structured to assist students in accessing and understanding course material.
Sufficient review: Students have enough time to access course material (including assessments) and review responses.
Supportive animation: Students' ability to access the course material is helped by existing animation and controls.
Supportive audio: Students can understand important content via audio.
Supportive text: Students can access text versions of course content to support their understanding.
Supportive visuals: Students can access information presented visually.
You may wish to work through one category at a time, applying the recommendations that you deem feasible. Or you may prefer to start by implementing one or two recommendations across your course content and gradually implement more recommendations. Either way, small changes can add up to a big difference in the level of accessibility of course materials for all students.
Each recommendation is accompanied by a rationale, an example, relevant WCAG entries, and its conformance level. Within a category, recommendations are organized mostly in increasing level of implementation complexity (A to AAA).
1. Clear organization
Content is structured to assist students in accessing and understanding course material:
Recommendation | Rationale | Example | Relevant WCAG entries | Level |
|---|---|---|---|---|
Use built-in formatting options (e.g., title tag, headings, sub-headings) within myCourses to indicate the order in which students should work through the materials. | This helps ensure that assistive technologies can express the content’s organization accurately. | An instructor uses the title tag to describe a page’s topic or purpose and includes headings to help organize content. | A | |
Organize course content on the web page in a logical sequence. | Careful organization of course content allows students to better understand what they are engaging with and why. | A web page begins with a general description of its content, followed by specific sub-points in support of the main idea. | A | |
Make navigation consistent throughout the course site (including placement and naming of elements that are repeated on different web pages). If Frequently Asked Questions (FAQs) or instructor contact information are listed on multiple pages, ensure they are consistently placed relative to other page content. | Predictable placement of elements repeated across pages is useful for all students trying to locate those elements. It can be particularly useful for individuals with low vision using screen magnification, as it helps to locate those elements more quickly. | A link to FAQs or to contact information for the instructor is at the bottom of each web page. | A AA | |
Ensure that headings and labels are clear and descriptive, preparing the reader for the content that follows. | This allows students to find information more easily and to understand the relationships between different parts of the content. | Rather than labelling a section just "Chapter 2," include a meaningful title that briefly describes its contents, such as "Chapter 2: Anatomy of the brain.” | AA | |
Organize written content with appropriate headings. | This gives an overarching organization of the written content, helping students to find information more easily. | A module might include headings such as “Introduction,” “Guiding questions,” “Examples,” “Applications,” and “Related readings.” | AAA |
2. Sufficient review
Students have enough time to access course material (including assessments) and review responses:
Recommendation | Rationale | Example | Relevant WCAG entries | Level |
When a student with a disability has been provided “extra time” as an accommodation by Student Accessibility and Achievement (SAA), give additional time for assessment purposes to the student. | Some students with disabilities may need additional time to adequately engage with web content. | Extend the duration of an online activity or assessment when a student with a disability has been provided “extra time” as an accommodation by SAA. | A | |
Where possible, limit the use of content that requires timed interaction (e.g., students only have ten seconds to answer a multiple-choice question). Where it cannot be avoided, accommodation can be made on a case-by-case basis. | Some students with disabilities may need additional time to adequately engage with web content. | If timed interaction is a key aspect of demonstrating students’ achievement of learning outcomes, contact the SAA to discuss how this can be made possible for students with relevant accommodations. | AAA | |
Allow students to review information prior to submission. Do not select the “no-review” option for myCourses quizzes. | This is consistent with best practice guidelines for test taking and with McGill policy. | Allow students to complete quiz questions in myCourses in the order that they prefer, and to review their responses prior to submission. | AAA |
3. Supportive animation
Students’ ability to access the course material is helped by existing animation and controls:
Recommendation | Rationale | Example | Relevant WCAG entries | Level |
Let students pause, stop, or hide any animation, blinking, or scrolling of information. This applies when the information starts automatically, lasts more than five seconds, and is presented in parallel with other content. | Such animations may be distracting to students, making it challenging to concentrate on other information on the page. | An instructor ensures that students can pause the animation of a gif (used for pedagogical purposes). | A | |
Avoid quickly flashing content: Ensure that content does not flash or blink more than three times in a one-second period. | For those with photosensitive epilepsy, quickly flashing content can trigger a seizure. | An instructor avoids using videos of strobe lights or rapid-fire explosions. | A AAA | |
Avoid using unnecessary animation. Allow students to turn off non-essential animation that results from their interaction with content. | Animation can negatively affect those with vestibular disorders. It can cause nausea or headaches or lead to the need for bed rest. | An instructor avoids using decorative (nonessential) animation effects. | AAA |
4. Supportive audio
Students can understand important content via audio:
Recommendation | Rationale | Example | Relevant WCAG entries | Level |
For videos, give a description of all important visual information that wouldn’t otherwise be understood from the audio recording. The description should be provided in a text format that can be read by a screen reader. | This ensures that people who are blind or have low vision can access the visual information in a video. | An instructor makes the audio description track available to students for a video. For an instructor-created video, an instructor describes aloud any important visuals in the video (e.g., graphs) of which students should be aware. | A AA | |
Ensure that videos pause as necessary to allow for additional descriptive audio to explain what is happening on screen. | This ensures that people who are blind or have low vision can access the visual information in a video. | An instructor prerecords a video that shows how three mathematical equations can be solved, writing on a whiteboard. The video is paused after each equation and extended audio description of how the equation was solved is provided, before moving on to the next equation. | AAA | |
Limit background audio on prerecorded audio-only content: Ensure that audio recordings of speech either (1) have no background sounds, or (2) have background sounds that are typically at least 20 decibels lower than the speech content, or (3) have background sounds that can be turned off. | This ensures that people who are hard of hearing are better able to separate speech from background sounds. | An instructor records a short podcast in a quiet office space. An instructor includes quiet music in the background of a tutorial video; the music is 22 decibels lower than their speaking volume. | AAA |
5. Supportive text
Students can access text versions of course content to support their understanding:
Recommendation | Rationale | Example | Relevant WCAG entries | Level |
Make labels and instructions consistent throughout the course. | Providing consistent labels and instructions can assist all students in navigating the course. It can be especially helpful for those with cognitive, language, or learning disabilities. | Clearly describe in the assignment instructions if there is a specific way you want students to name their assignments when uploading them (referred to as a “naming convention”). | A | |
Use ALT text in HTML or captions in other documents to describe visuals (e.g., images, graphs, maps, illustrations). | Conveying visual information in text allows those who cannot see an image to understand it by having the text alternative read aloud. | In a slide deck uploaded to myCourses, an instructor provides an alternative text description for images in the slides. (Note: slides in their original format such as .pptx are typically more accessible than their PDF equivalent.) An instructor provides a transcript to accompany an audio recording. | A | |
Provide captions, subtitles, or transcripts for pre-recorded content that is in either audio-only or video-only format. | This allows all users to engage with the information. | An instructor makes a short audio recording and edits the automatically generated captions. | A | |
Identify language of content in HTML and in PDF documents. | This allows screen readers to load the right pronunciation rules (e.g., so that French text is not pronounced as if it were in English) to aid listeners’ comprehension. | An instructor of a French course adds an HTML language attribute so that French content is pronounced correctly. | A | |
Make hyperlinks descriptive so that users understand the purpose of each link and can decide whether they want to follow the link. | Screen readers may read hyperlinked text separate from its surrounding text. By including a descriptive hyperlink, students can better understand what selecting that hyperlink will allow them to learn about. | “Learn more about mid-course evaluations” is preferred to “learn more about mid-course evaluations.” Avoid generic descriptions like “click here.” Instead use a descriptive link that indicates where the link leads, e.g., “Consult the eCalendar.” | A AAA | |
Identify elements with the same functionality in the same way across different web pages. | This permits consistency and ease of navigation across web pages. | An instructor consistently formats required readings for students to download though they appear on different pages of a myCourses site. | AA | |
Provide captions for live audio content in synchronized media. | This allows those who are d/Deaf or hard of hearing to watch live content. | An instructor enables closed captions in Zoom during an online tutorial session. | AA | |
If including a second language within a phrase or paragraph, this needs to be tagged as such in HTML. Exceptions: technical terms, names. | This allows screen readers to load the right pronunciation rules for the appropriate portion of the content to aid listeners’ comprehension. | An instructor of a translation course adds an HTML language attribute so that a German paragraph on a page otherwise written in English is pronounced correctly. | AA | |
Ensure that the contrast ratio for text is at least 7:1, except for large text (which should be at least 4.5:1). Avoid images of text. | This supports readers with moderately low vision. | An instructor uses the contrast checker to ensure that there is sufficient contrast between the text colour and the background colour. | AA AAA | |
Provide all of the information in synchronized media (visual and auditory) in text form, such as via captions, subtitles, or a transcript. | This allows all users to engage with the information. | An instructor makes a short video and edits the automatically generated captions to include descriptions of important visual elements. | AAA | |
Provide captions for live audio-only content. For high-stakes events, students should be directed to Student Accessibility and Achievement (SAA) for accommodation, as automatic captioning may not be sufficient. | This ensures that information expressed in a live audio feed is accessible through a text alternative to those who would not otherwise be able to hear the audio. | Realizing that the internet connection is weak, an instructor turns off their video in Zoom to save bandwidth and enables closed captioning. | AAA | |
Define a term when used in an unusual way. | This supports students with cognitive, language, and learning disabilities by assisting with decoding and understanding specific terms. | A voice instructor describes what singing in the mask means. | AAA | |
Write the expanded form of an abbreviation the first time it occurs in a document or webpage, immediately followed by the abbreviation in parentheses. | This assists with decoding and supplements contextual cues to help students understand the abbreviation’s meaning. | A geology instructor for an introductory course writes “Geographic Information System (GIS)” the first time the abbreviation is mentioned on a webpage. | AAA | |
Aim for clarity and concision in writing that could be understood by someone with a lower secondary education level. Use short, common words and short sentences to assist with decoding. Where this is not possible, provide supplemental material (e.g., plain-language summary) to assist. | This supports all students, including those who have difficulty understanding or interpreting written language. | An instructor tries to use plain language in their writing. They provide a link to a disciplinary-specific dictionary to support students’ understanding of highly technical texts. | AAA | |
Where the same word can be pronounced in two different ways with two different meanings (e.g., desert as a verb or a noun), clarify the appropriate pronunciation. | This supports students who have difficulty decoding words, or who use technologies that read written text. | An instructor includes a glossary with pronunciation information. | AAA | |
Provide context-specific help so that students understand how to do what they need to do with course materials and can focus. Indicate if information needs to be in a specific format. | This helps to limit some confusion and mistakes. | On an auto-graded quiz, an instructor gives clear instructions about how to write the unit of measure, so a technically correct answer is not marked as incorrect. | AAA |
6. Supportive visuals
Students can access information presented visually:
Recommendation | Rationale | Example | Relevant WCAG entries | Level |
Provide multiple means of representing the same information in instructions. For instance, use two of the following means for clarity: shape, colour, size, visual location, orientation, or sound. | Allow all users, including those who are blind or have low vision, to access and understand instructions. | Rather than only using a colour gradient from green to red for grades A through F in a rubric, an instructor also includes a descriptive label for each level. | A | |
Ensure that colour is not the only means used to convey information. For example, use another type of font such as bold or underline, which will be more visible to those with limited colour vision. In cases where colour is necessary, use high-contrast colours so they are distinguishable for those who have limited colour vision. | This ensures that users with limited colour vision (and those using limited-colour displays) can access the meaning of the content that was previously communicated only by colour. | In providing feedback on students’ work, an instructor used to highlight passages in yellow that were unclear and highlight passages in green that were missing a citation. The instructor now also bolds passages that are unclear, and underlines passages that are missing a citation. | A | |
Type out text. Avoid using images (e.g., screenshots) of text. Exception: a graph or diagram that visually conveys information and includes text should be accompanied by alternative text. | This allows users who need a particular presentation of the text to be able to adjust it (e.g., size, colour, font, line spacing). | Rather than taking a screenshot of a bulleted list of text, an instructor reproduces the bulleted list in HTML on their myCourses page. | AA | |
Type out text. Use images of text for decorative purposes only, or when presenting the text in a specific way is key to understanding it. | This allows users who need a particular presentation of the text to be able to adjust it (e.g., size, colour, font, line spacing). | Rather than taking a screenshot of a bulleted list, an instructor reproduces the bulleted list in HTML on their myCourses page. An instructor includes an electronic image of a historical letter, accompanied by a text alternative. | AAA | |
Provide sign language interpretation for prerecorded audio content in a video. | Provide additional context beyond what would be available in text description to people whose primary language is a sign language, so they can access the content presented. | An instructor engages a sign language interpreter for a short video of a case assignment. | AAA |
Learn more:
D2L Accessibility Conformance Report – WCAG 2.1 AA (Brightspace)
Have a question that was not answered in this article? Visit our FAQs.
While this resource is accessible worldwide, McGill University is on land which has served and continues to serve as a site of meeting and exchange amongst Indigenous peoples, including the Haudenosaunee and Anishinabeg nations. Teaching and Learning Services acknowledges and thanks the diverse Indigenous peoples whose footsteps mark this territory on which peoples of the world now gather. This land acknowledgment is shared as a starting point to provide context for further learning and action.
McLennan Library Building 3415 McTavish Street Suite MS-12 (ground level), Montreal, Quebec H3A 0C8 | Tel.: 514-398-6648 | Fax: 514-398-8465 | Email: tls@mcgill.ca