Introduction

NovoEd provides course designers and builders with the tools to ensure your content is accessible for learners with disabilities. This guide will help you understand the “why” and “how” of implementing various accessibility best practices to ensure the content you add to your NovoEd courses follows accepted accessibility standards.

We recommend our customers read and understand the WCAG compliance expectations. You are responsible for ensuring your content adheres to accessibility guidelines. NovoEd tests the learner experience on the platform for accessibility compliance; however, we do not test client content. Please read our July 2021 Learning Experience Accessibility Update for more information.

People with disabilities use different forms of assistive technology to navigate their computers and mobile devices. These are some of the more common ones:

Screen Reader Software that reads out content to the user and allows them to navigate via keyboard shortcuts
Keyboard-Only Navigation Users who can’t operate a mouse due to visual or motor impairment need to be able to navigate entirely by keyboard.
Screen Magnification Software or hardware tool that magnifies the screen to extreme levels for people people with low vision
Dictation Software that allows people to navigate by voice input rather than keyboard or mouse.

It is important to keep these in mind when designing and adding content to your NovoEd course. Below are our recommendations for ensuring accessibility for your learners. Short on time? Skip to the Checklist.

Guidelines

Text

Using Color in Text

Guideline

Avoid using color on its own to convey meaning or emphasis, or to distinguish and organize content. Don’t use colored or highlighted text to make passages stand out.

Why?

If you are using color in this way, be sure to include context to improve readability for learners with visual impairments.

How?

Instead use bold for important information, italic or underline for emphasis, and blockquote for call-outs or quotations, as screen readers will signal these by pausing before and after the selected text.

Screen_Shot_2021-09-01_at_10.21.01_AM.png

Color Contrast

Guideline

Ensure that contrast between visual elements, such as text against background, is sufficiently high by using very different colors or very different tones.

Why?

High color contrast is essential to the readability of your text, especially for learners who are partially sighted or color blind.

How?

When using NovoEd’s style templates for Titles, Accordions, Text with Image components, or Styled Links, test the colors you are using by pasting their HEX codes into a color contrast checker if you’re unsure about the contrast ratio.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+). Here is a free online tool that enables you to test the contrast ratio of your text:

https://webaim.org/resources/contrastchecker/

Screen_Shot_2021-09-02_at_10.55.04_AM.png

Guideline

Except for captions and images of text, ensure that your text can be resized without assistive technology up to 200% without loss of content or functionality.

Why?

Larger font sizes help learners with low vision or who are partially sighted to read text content more easily. Users who need large fonts will use the zoom settings in their browser. As long as the text content scales effectively, i.e. does not get cut off or oddly formatted when zoomed to 200%, it meets accessibility guidelines.

How?

Try to stick to using NovoEd's Regular Text style or larger for most text content to ensure maximum readability for all users. The Small Text style also meets accessibility requirements because it is bolded by default. If you are setting your own font size for any reason, use 12px+.

Knowledge Base: Text Editor and HTML Component

Screen_Shot_2021-09-02_at_10.57.07_AM.png

Text Format

Guidelines

Lists: be sure to use the bulleted or numbered list styles available to you in the NovoEd Text Editor, rather than using hyphens or other characters to manually mark up lists.

Tables: only use tables for data presentation; avoid using tables to style or format content.

Why?

Lists

Using the bulleted (unordered) or numbered (ordered) list formats will help learners who are using assistive technology to more easily navigate and understand the items in a list. When you manually create lists by simply typing text characters like hyphens (-), asterisks (*) or numbers with periods (1. 2. 3.), the screen reader will not understand that this is a list, and it may be read to the learner as a continuous paragraph.

A screen reader can identify a list and tell someone how many items they will find in it. For example, a screen reader might begin reading a bulleted list containing three items as follows: "List of three items. Bullet 1."

Tables

Tables should be used to organize data with a logical relationship in grids. Learners using screen readers can have the row and column headers read aloud as they navigate through a table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t lose context. As such, using a table purely for style and layout purposes, e.g. to organize text or images into columns, should be avoided.

How?

Lists

Use NovoEd’s numbered and bulleted list buttons to create lists. These options will display when you click into the Text Editor:

When copying and pasting bulleted or numbered lists into NovoEd, the formatting may get stripped--ensure that you reformat the lists using NovoEd’s bulleted or numbered list styles.

Tables

To add a data table to a content page in NovoEd, use the HTML / Rich Text Editor component instead of the simple Text Editor. Keep in mind that accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. The Rich Text Editor in NovoEd supports the common HTML table tags: <table>, <tr>, <td>, and <th>.

Screen_Shot_2021-09-01_at_10.30.11_AM.png

Video & Audio

Guidelines

Use NovoEd’s video upload component to add Captions and Transcript files to your videos

Make downloadable Transcript files available for your audio files in NovoEd

Why

For individuals with hearing loss, captions and downloadable transcripts provide a text alternative to the auditory experience. For individuals with visual impairment, you might also consider adding visual context information to the voiceover text in the downloadable transcript file.

How

In NovoEd’s video content component, captions are time-stamped voiceover text that will display directly in a video while a learner is consuming it, and transcripts are text files that are available for learners to download.

Creating Captions & Transcript Files

If you don’t already have captions or transcripts for your videos, you can use a third-party transcription software. There are several good paid options out there, including Temi (AI), Rev (human), and GoTranscript (human).

The most commonly-used free option is Youtube, as it automatically captions videos as soon as they are uploaded using speech recognition technology. Most free third-party transcription software is AI or machine-based, so it is highly recommended that you review the transcript to check it for accuracy.

NovoEd Knowledge Base: How to Add Captions and Transcripts to Videos

Screen_Shot_2021-09-02_at_11.00.47_AM.png

Acceptable File Formats

Captions

.SRT (SubRip Subtitle)
.VTT (Video Text Track)

Transcripts

.TXT
.DOCX
.PDF

Embedding Videos from Third Parties

It’s important to note that these options do not apply to third-party hosted videos. When embedding a third-party video in your course, we recommend you ensure it is already set up to display captions via the third-party tool. If the embedded video player cannot display captions, we recommend that you make a transcript available for download beneath the embedded video frame.

Documents / Files

Guideline

Use PDFs that have been saved as searchable text, not images

Why?

Screen Readers also need to be able to detect text from any downloadable content you have in your course. Some PDF documents actually only contain scanned images of text as opposed to searchable text.

How?

Test whether you’re able to highlight and search text within your PDF file. If you’re not, try to obtain a searchable version of the file to use instead. Additionally, if the PDF file does contain images, those images should have Alt Text embedded within the PDF so screen readers can detect it. Consider using Adobe Acrobat Pro’s Accessibility Check tool to check accessibility and make your PDF accessible.

Screen_Shot_2021-09-02_at_11.05.46_AM.png

Images & Visual Aids

Guidelines

Include Alt Text tags or captions for all images that are part of the learning content

Provide descriptive text alternatives for complex tables, graphs or visual elements

Ensure a high color contrast ratio in all images (especially those with text) and graphics

Why?

Alt Text tags and text captions for images allows learners using screen readers to receive a text-based interpretation of an image so they can understand its context, purpose and importance.

Images that depict more complex concepts or are meant to convey large amounts of important information, such as charts, graphs, and diagrams, often cannot be described in just one sentence. Therefore, it is important to provide an alternative method of consuming this information.

How?

Image Captions

Because image captions are available to both sighted and non-sighted users, they allow the greatest amount of access to information about an image. Captions should describe what the image is, answering the question: why is this image important? When you upload a photo to NovoEd via the Image component, you will automatically see the option to add a caption beneath the photo.

Screen_Shot_2021-09-02_at_11.10.50_AM.png

Alt Text Tags

In the absence of a caption, Alt Text tags will be read aloud by screen readers. Alt Text should be no more than 125 characters. If the image is purely decorative and not meant to convey information, you should leave the Alt Text blank, which allows assistive technologies to skip over it.

Knowledge Base: Adding Alt Text to an Image Component

Screen_Shot_2021-09-01_at_10.36.52_AM.png

Text Alternatives to Complex Images

For more complex images that convey important information, you can include a link to an external page with a text description or provide a downloadable text document. We recommend adding a downloadable text-searchable PDF directly beneath the graphic. Alternatively, if the image is described in a paragraph elsewhere on your content page, you can use the HTML editor and incorporate the “aria-describedby” attribute (see WAI-ARIA Approach).

Links & Buttons

Guidelines

Write link text to clearly convey the link’s purpose and destination

Use inclusive language, like “Select this link to find out more about X” rather than “Click here”

Why

Link text is the text you select for a hyperlink that describes what will happen when a user selects it. Learners using screen readers will hear the link text, so it should be clear and purposeful so they don’t need to rely on surrounding text for context. Avoid using the word “click”, which implies that learners are using a mouse, when most assistive technology uses voice or keyboard for navigation.

Bad examples:
Please visit this website to explore more.
Click here to learn more.

Good example:
Please read this article from Harvard about writing descriptive link text.

How

Use NovoEd’s Styled Links to create buttons with customizable display text:

Knowledge Base: Styled Links

Or, use the Text Editor to create simple linked text:

Screen_Shot_2021-08-12_at_5.15.13_PM.png

Guidelines Checklist

Download the Checklist as a PDF

Text
- Avoid using color on its own to convey meaning or emphasis, or to distinguish and organize content. Don’t use colored or highlighted text to make passages stand out.
- Ensure that contrast between visual elements, such as text against background, is sufficiently high by using very different colors or very different tones.
- Except for captions and images of text, ensure that your text can be resized without assistive technology up to 200% without loss of content or functionality.
- Lists: be sure to use the bulleted or numbered list styles available to you in the NovoEd Text Editor, rather than using hyphens or other characters to manually mark up lists.
- Tables: only use tables for data presentation; avoid using tables to style or format content.

Video & Audio

Use NovoEd’s video upload component to add Captions and Transcript files to your videos
Make downloadable Transcript files available for your audio files in NovoEd

Documents / Files

Use PDFs that have been saved as searchable text, not images.

Images & Visual Aids

Include Alt Text tags or captions for all images that are part of the learning content
Provide text alternatives for complex tables, graphs or visual elements
Ensure a high color contrast ratio in all images (especially those with text) and graphics

Links & Buttons

Write link text to clearly convey the link’s purpose and destination
Use inclusive language, like “Select this link to find out more about X” rather than “Click here”