Making LEARN Accessible
LEARN HTML and course templates
Hypertext Markup Language (HTML) is the most accessible medium and the easiest way you can make your content accessible. LEARN is HTML based. The LEARN templates have been designed for ease of use and accessibility. They comply with the Web Content Accessibility Guidelines (WCAG 2.1).
Using the LEARN Templates appropriately will remove most of the common barriers to accessibility for people with disabilities.
Fonts
- Use the default font, used in the templates. The font and font size were chosen was chosen for ease of readability and legibility for reading on monitors and devices. It’s one of the many accessibility features built into the templates.
- Do not change the font using Font Family or the size of the font using font size.
- Use left aligned text (the default). It easier to read than right, centre or fully aligned text.
Colour Contrast
Text colour requires adequate contrast from the background colour to make it readable.
- Black text on a white background creates the highest contrast possible
- Some people prefer yellow text on a black background
- Dark coloured text (e.g. blue, green, red) on a white background can provide enough contrast to be read.
Who benefits from high contrast text?
People with low vision often have difficulty reading text that does not contrast with its background. If the person has a colour vision deficiency this lowers the contrast even further.
Meaningful Structure
The LEARN templates use HTML to meaningfully structure web content. Structure provides students with a way to navigate and interact with your LEARN content. These templates now come pre-loaded into every LEARN course shell. Use basic HTML markup within the LEARN templates to create meaningful structure using headings, lists, and emphasized text.
Headings
Using Headings correctly creates meaningful structure to web pages. Pages should be structured in a hierarchical manner. Heading level typically represents the level of importance. Use headings in sequential order to structure the page content.
The top level, H1, is the highest level on each page and represents the most important heading. H1 is usually only used for the page title. H6 is the lowest level, and the least important.
Techniques
- H1 is a heading. Limit using only one H1 per page. Use H1 for the page title only.
- H2 – Heading 2 is a subheading of H1 – Heading 1
- H3 – Heading 3 is a subheading of H2 – Heading 2
- H4 – Heading 4 is a subheading of H3 – Heading 3
- Do not skip heading levels. Doing so will confuse students using assistive technologies such as screen readers.
In the example below, Headings 1, and 3 have been used to create hierarchical structure. H1 has been added to the heading and H2 and H3 subheadings to identify them in the example.
Lists
Lists are used to order into easy to read and easy to reference chunks of text. Lists are also used to define a progression or a sequence.
Unordered lists or bulleted lists
Unordered lists or bulleted lists are the most common of type of list.
Use unordered lists:
- When there is no order of sequence or importance to a list of items
- To break up blocks of written content for easier understanding
Ordered lists or numbered lists
Use ordered lists:
- For a progression or a sequence, such as instructions with numbered steps (e.g. 1, 2, 3, … )
- When there is an importance of a list of items (e.g. 1 is more important than 2)
Example of writing assignment instructions using an ordered list:
Carefully read the instructions for this assignment
- Follow the directions for each task
- Record your observations in the appropriate recording form
- Submit the completed recording forms to Dropbox
Emphasized text
Text is emphasized using bold to stand out from the body text for important terms and phrases.
- Do not over use bold text. It can be difficult to read and is not picked up by screen reading software
- Do not use bold to replace headings
- Limit the use of italics for specific uses, such as non-English words (e.g. alma mater)
- Avoid italics and underlining as this can make the text appear to run together causing crowding and making text difficult to read. Use bold instead.
Who benefits from meaningful structure?
- Proper heading structure is especially important for learners with disabilities who use assistive technologies like screen readers that rely on headings to provide page structure and a means to navigate the page.
- People who navigate web information using keyboard only (no mouse) and assistive technology (e.g. a screen reader and refreshable Braille display). This includes people who are blind, have low vision, motor and dexterity limitations and cognitive limitations.
Tables
- Use tables rather than an image of a table. The data cannot be read by a screen reader.
- It is better to use this table from the Elements template in LEARN than the using the Table tool. It’s accessible and designed for mobile devices.
| Table Head 1 | Table Head 2 | Table Head 3 |
|---|---|---|
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 1 | Row 2 Cell 2 | Row 2 Cell 3 |
Link description
- Describe the purpose or context of a link or where the link goes.
- Do not use URLs (e.g. https://www.rrc.ca/accessibility/exam/accommodations/)
- Do not use non descriptive link text such as ‘click here’. It’s ambiguous and confusing. A screen reader will display and read the words ‘click here’.
- Multiple links with the same description will confuse people who use screen readers
- Multiple use of “click here” will really confuse people
Who benefits from descriptive links?
Anyone who uses a screen reader to navigate web pages.
Images and alternative text
Inserting an image
When you insert an image in LEARN, it will prompt you to add Alternative text (alt text).
An existing image
To add alt text to an image:
- Insert an image
- Select the image. It will turn blue.
- Click the Image option button
- Add alt text in the Image description field
Learn more about accessible images and writing alt text.
Using audio, video and digital media
If you include audio, video and digtial media in your course, use transcripts, captions and ASL
- Video requires a text transcript and captions of the embedded audio content
- Audio requires a text transcript of the embedded audio content
- American Sign Language (ASL) – English interpretation is available for Deaf and hard of hearing students
LEARN’s Accessibility Checker
LEARN has an Accessibility Checker built in to the HTML Editor that will identify some common accessibility issues including:
- Heading structure
- The presence of alt text for images, but not the quality
- Descriptive links
- Colour contrast for text, but not in images
Using the Accessibility Checker
To use the Accessibility checker:
- Click the Edit HTML
- Click on the Check Accessibility button
The Accessibility Checker will display any issues and provide a method to repair the issue.
This video provides a step-by-step walk through for using the Accessibility Checker.