Moodle Accessibility Guides

Heading levels should be organized hierarchically, just as in a topic outline. The page title in Moodle is always automatically coded as Heading 1. Heading 2 is used for all subtopics on the page, Heading 3 for sub-subtopics, and so on. Moodle uses their own set of names for headings, so picking the correct one is important:

• Heading (large) is equivalent to Heading 2
• Heading (medium) is equivalent to Heading 3
• Heading (small) is equivalent to Heading 4

To add a heading level to your text

1. Enable Edit mode in the top right corner of your screen.
2. Highlight the text you want to format as a heading (e.g., Overview, Instructions, Grading).
3. In the upper-left corner of the Editor, select the Paragraph Styles function (which looks like the letter A with a dropdown option) to open a dropdown menu of heading styles.
4. Choose the heading that fits the topical organization of your content (starting with Heading 2).
5. If you want the headings to be a certain size or format, pick the appropriate heading level first, then adjust the formatting as desired.

Additional Information

• To learn more about why logical structure is important to visually impaired users, visit  WebAIM's Headings.

Lists should be formatted using the Moodle Editor so that it can be read as a list by a screen reader.

To Create Accessible Lists in Moodle

1. Enable Edit mode.
2. Select the appropriate list icon, the bullet point list or the numbered list, depending on your content.
3. Choose your preferred list convention from the menu.

Keep in mind that depending on the content, some list styles are more appropriate than others. For instance, if you are providing instructions that must be followed in order, you should choose an ordered list style. If the list data isn't sequential, you should use an unordered list style.

When making links on Moodle, link text should be unique within a page. Moodle allows users to link to external or internal content by copying and pasting URLs. Users can also enable the auto-link function, which will automatically create links to activities and resources within the course with the same name. The auto-link function can be turned off if users do not want auto-links.

Creating Accessible External Links

1. Enable Edit mode.
2. Highlight the intended hyperlink text.
3. Locate and select the Link icon to bring up the Creat link window.
4. Copy the desired URL to your clipboard.
5. Paste the URL into the Link field.
6. Click Create link.

Additional Information

• To learn more about why links should describe the link destination, see WebAIM's Links and Hypertext.

General guidelines

1. To ensure proper reading order, organize information left to right and top to bottom.
2. Avoid merging cells. Merged cells can disrupt logical reading order.
3. Provide a text summary of the content if the table contains complex data.
4. Don't use tables for content layout. Only use tables for tabular data.
5. Avoid using colors with insufficient contrast.

Providing captions and headers for tables

When writing captions for tables, avoid generic captions (e.g. "Data Table"). Instead, concisely summarize and contextualize the content. If the table is referred to in the text, assure that the table is consistently being referred to by its caption. You can provide an additional text summary of the table if needed.

1. Enable Edit mode.
2. Click the arrow in the upper left corner to display all of the editing options.
3. Select the table icon to open the table creation menu.
4. Write a caption for your table in the appropriate section of the table creation box.
5. On the drop-down menu for defining headers, choose the option "Both."
6. Choose a position for your caption: "top" will display it above the table and "bottom" will display it below the table.
7. Select the number of rows and columns in your table, then customize it as you'd like.
8. Click the Create table button. The box will close, and a blank table will appear on your Moodle page.
9. Fill in the caption and headers for your table, then input tabular data into the cells.
10. Click Save and return to course.

Additional Information

• To learn more, visit WebAIM’s Creating Accessible Tables.

Using color can help convey information, but many users cannot benefit from the use of color due to visual impairment or color blindness. All users benefit from color contrast that makes information easy to read.

General guidelines

1. Ensure that the contrast between text and background is high enough to be easily readable.
2. Don't rely on color alone to convey information. Combine with visual cues other than color.
3. Avoid combinations known to be problematic for colorblind users (e.g. red/green).

Changing Text Color

1. Enable Edit mode.
2. Highlight the target text.
3. Use the Text color and Background color tools to pick a color.
4. Select Save and return to course.

Additional Information

• For more information see WebAIM’s Contrast and Color Accessibility.

General Guidelines

• Be specific and concise. Consider the purpose of using the image and the context it is being presented in. Note: Alt text exceeding 120 characters will be flagged by the Accessibility Checker, but there is no hard limit.
• Don't start your description with "An image of..." The screen reader will tell the user that an image is being described.
• For complex images, provide a brief summary and describe the contents more fully in the text.
• For icons, describe the purpose of the icon rather than its shape (e.g. Describe the magnifying glass icon for searching as "Search" rather than "magnifying glass").

Adding Alternative Text to Moodle

1. Enable Edit mode.
2. Select the intended image.
3. Click the Image Properties icon (it's the same icon you use to insert an image).
4. Add alt text to the box labelled, "Describe this image for someone who cannot see it." If your image is decorative, select This image is decorative only.
5. Click Save image.
6. Make sure you save your changes to the page before moving on.

Additional Information

• To learn more about why accessible images are important to visually impaired users, visit WebAIM’s Accessible Images.
• For more about how alt text improves accessibility, see WebAIM’s Alternative Text
• See Microsoft: Everything You Need to Know to Write Effective Alt Text for ideas to improve your written descriptions.

Non-English words will be read with the default English pronunciation is they are not marked with the language attribute. For many languages, the result is incomprehensible and inaccessible for students using assistive technology. To see and hear what this looks like, watch the following video demo of a screen reader reading various Asian languages in which the characters are not read correctly without the proper language attribute.

Video Demo: Screen Reader with Asian Languages

Language issues can be remedied by accessing the HTML layer of the page and updating the language attribute on any non-English text.

To Change the Language Attribute

1. Open the Rich Content Editor on the page you'd like to update.
2. Select the HTML Editor icon (</>).
3. Locate the non-English text you'd like to tag.
4. Type  <span lang ="xx">
5. Replace the x's with the country code that corresponds to the language you are using. A link to the country codes has been provided at the bottom of this page.
6. Add the </span> tag to the end of the non-English language section, before the closing </p> tag.
7. Save the edits to the page.  

Additional Information

• For country codes see W3 Schools: HTML ISO Country Codes Reference.
• To change the language for an entire page of content, see Language on Websites.