Creating Accessible eLearn Content

The following sections describe the most important accessibility elements for pages you create in eLearn. Steps are provided to help you format a page of content accessibly.

Templates

One way to get a head start on formatting for accessibility within eLearn is to begin a page using a pre-defined template. You are encouraged to use these templates as they were all built accessibly.

  • Content - General
  • Content with Table
  • Content with Math Equation -MathJax
  • Content with References
  • Module Introduction
  • Syllabus - Math and Science
  • Syllabus

Once you added a template to a page, write over the placeholder text with your own content. Note: Adding a page template will erase all the content you already have on the page so be sure to copy all of the content to your clipboard before adding a page template. Once the template is loaded, you can paste back your original content.

For additional help and tips on using page templates, see the Content: Using Page Templates help article.

Headings

Headings provide structure to your content. Adding headings creates a structure like an outline or a table of contents, and it creates a visual distinction between sections of text.

Highlight the text and select the Heading # from the Format drop-down menu on the toolbar.

Image Alt Text

eLearn prompts you to add an alt text description any time you add an image.

  1. Place the cursor where you want to insert an image, and click the Insert Image icon from the toolbar. The Add a File window will open.
  2. Browse to the image location either on your computer or in your course offering files. Navigate to where the image is, select the image file, and click the Open button.
  3. Click the Add button
  4. The Provide Alternate Text window will open. Type in descriptive text for the image. eLearn has a 200-character maximum. For example: “Penguins can be found in the South Pole”
    • It is important to write a description that conveys the content and the purpose of the image. If the image is for decorative purposes, just check the This image is decorative box instead.
  5. Click the OK button, and then the Done button to save.

Lists

When adding items that are in a list, use the built-in list tools.

  1. Select the content you want to make into a list.
  2. From the toolbar, click the Unordered/Bulleted List icon if the order doesn't matter. Select the Ordered List from the drop-down menu (next to the bulleted list icon) if the order does matter.

Links

Write meaningful link text that indicates the link's destination. Just like with Word, don't use "click here" for your link text.

  1. Highlight meaningful text for the link (ex. Volunteer State Community College).
  2. From the toolbar, click on the Insert Quicklink icon.
  3. Select URL in the Insert Quicklink window.
    • Paste or type in the URL.
    • Select the Whole Window in the Target section.
  4. Click the Insert button.

Tables

Use tables for comparing data, not layout. Make sure you create a table, don't just paste an image of a table.

Indicate column (or row) headers in your table:

  1. Highlight the cells to be marked as a row or column header.
  2. Click on the drop-down menu next to the Table icon in the toolbar.
  3. Choose Cell Properties. The table cell properties window will open.
  4. In the Cell type field, Click on the drop-down list and select Row Header or Column Header.
  5. Click the Update button.

Add a caption to the table:

  1. Select the table and click on the drop-down menu next to the Table icon.
  2. Select Table Properties, and check Include Caption.
  3. Click the Update button.

Check the reading order of the table:

  • A screen reader reads tables from left to right, and top to bottom, never repeating a cell.
  • Merged, nested, and split cells may alter the reading order of a table.
  • Make sure you construct your table in a way that accommodates a good reading order.

Color & Contrast

Use sufficient color contrast.

  1. Select the text that you want to change to another color.
  2. Click the drop-down menu next to the Apply Color icon in the toolbar.
  3. Select the color and click Save.

Note: When picking a color for your text in eLearn, make sure you pick a color that registers with a green checkmark for WCAG AA in the Select a Color palette.

Don't use color alone to convey meaning.

Don't use color alone to make a distinction, a comparison or to set something apart from the rest of the page. If you categorize something by color alone, those who are colorblind or blind will not benefit from the color distinction.Math & Science Content

Write math and science equations using the eLearn equation editor. It will produce Math ML, which can be read by a screen reader.

  1. Click on the Graphical equation icon on the toolbar.
  2. Build your equation using the keyboard and the on-screen graphics.
  3. Click Insert.
  4. A placeholder graphic will be inserted into the document. You can see the equation by publishing the page or using the preview button in the lower right corner of the document editor.

Multimedia

  • Use videos that are captioned with at least 99% accuracy.
  • Provide transcripts for any audio files.
  • Make sure all mouse actions can also be completed with a keyboard alone (without a mouse).
  • Use an accessible media player like Kaltura/My Media player or YouTube.
  • Eliminate or limit blinking/flashing content to 3 seconds.
Print Article