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
• Headings
• Image Alt Text
• Lists
• Links
• Tables
• Color and Contrast
• Math and Science Content
• Multimedia

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.

For additional information regarding writing effect alt text, see the helpful resource: Alternative Text (Alt-Text).

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 List icon.
3. If the order doesn't matter, select the Bulleted List from the drop-down menu. Select the Numbered List from the drop-down menu if the order does matter.

Links

Write meaningful link text that indicates the link's destination. Just like with Microsoft 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 Link in the Insert Quicklink window.
   • Paste or type in the URL.
   • In the Open in section, select New window.
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 from the drop-down menu.
4. Then, choose Cell Properties. The table cell properties window will open.
5. In the Cell type field, click on the drop-down list and select Header Cell.
6. In the Scope field, click on the drop-down list and select either Column or Row depending on the type of Header Cell.
7. Click the Save 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 the Show Caption box.
3. Click the Save 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 Select 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 for both Small Contrast and Large Contrast 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.