orange iconOperational Response Level: Restricted ›

Teaching Essentials

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.
Colour contrast examples from good, to better to great.
Fig.1 – Darker coloured text on a white background is easier to 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.

Semantic structure using Heading 1 - H1, Heading 2 - H2, Heading 3 - H3.
Fig.2 – Structuring page content in LEARN using H1, H2 and H3 headings.

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

  1. Follow the directions for each task
  2. Record your observations in the appropriate recording form
  3. 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 1Table Head 2Table Head 3
Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 1Row 2 Cell 2Row 2 Cell 3

Link description

A dialogue box from JAWS screen reader displaying 27 links using the name
Fig.3 – JAWS screen reader displaying 27 links named “click here”.

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).

Dialogue box prompting to provide alternative text to an image.

An existing image

To add alt text to an image:

  1. Insert an image
  2. Select the image. It will turn blue.
    Image selected in LEARN
  3. Click the Image option button
    The Image options button
  4. Add alt text in the Image description field
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:

  1. Click the Edit HTML
    Edit HTML button
  2. Click on the Check Accessibility button
LEARN's accessbility checker.
Fig.4 – LEARN’s accessibility checker.

The Accessibility Checker will display any issues and provide a method to repair the issue.

LEARN's accessbility checker identifying accessibility issues
Fig.5 – LEARN’s accessibility checker identifying issues with heading levels.

This video provides a step-by-step walk through for using the Accessibility Checker.

Additional Resources