Create accessible Moodle content

As of September 2018 , the Moodle content we produce as a learning resource online must be accessible. Like any other type of documents, the guide to creating accessible documents also applicable to Moodle content. The section below illustrates how to use text editor in Moodle to create accessible content.

Atto Editor

The default text editor in Moodle is Atto Editor. Atto editor has many icons to assist the user in entering content. Many of these icons and functions should be familiar to anyone who uses a word processor. Some examples of where you will see the text editor include: Editing Section headings, description of an activity (Books, Lessons, Pages etc), writing an answer to a quiz question or editing the content of many blocks.

If your default text editor is not Atto editor, you can reset it to default from Preferences > Editor preferences > Alto HTML editor > Save changes.

How you can improve accessibility with Atto Editor

  1. Create meaningful structure

Your content should have a clear and ordered structure. A clear structured content doesn’t only make your information easier to read and navigate for everyone, it’s also vital for those who use assistive technologies as they navigate the page. Users who rely on assistive technologies such as screen readers are unable to scan the entire screen at once, as people without a visual disability would be able to. These users rely on screen readers to go through content sequentially, reading out the structure of the page one section at a time.

Therea are two ways you can mark the order of your content. You can use either one or preferably both.

  • using the heading styles found under the 'A' icon to title your sections.

  • use the new styling feature under the 'paint drop icon' to act like building blocks, allowing you to create learning and teaching materials and signpost students clearly and consistently to what they need to be doing during a particular task.

How to use the new styling feature?

To use a style either:

  • Add your content into the text editor, highlight your text and select the style from the drop-down menu – your content will then automatically appear in the selected style box; or

  • Select a style from the drop-down menu and then type/add content to the styled box . Note: If you are using this method you will need to do a soft return using Shift+Enter to create a line break.

If you would like to remove a style you have already added to your content, highlight the text within the style you want to remove and choose No style from the styles drop-down menu.

Watch the video to follow the step by step guide to apply style.

2. Add alt text to images

Adding alt text ensures a screen reader or other assistive technology is able to tell the user that the image is there, and what the image shows. Enabling them to have as much as a similar experience with the content you’ve produced as someone able to see the image.

Adding alternate text (alt text) to images in Moodle is simple.

When you add an image to your site, you’ll notice a box asking you to ‘describe this image for someone who cannot see it’, simply type in an informative and appropriate description for the image before you save it.

Refer to everything you need to know to write effective alt text if you unsure how to that.

If the image is just a decorative image, click the 'Description not necessary' checkbox so that they can be ignored by assistive technologies, such as screen readers.



Moodle Accessibility Checker

Atto editor provides a tool for checking your content for problems with accessibility, called the Accessibility Checker. It is a useful tool to scans your content and warns you of any potential issues but it would not be advisable to totally rely on this check.

Moodle's Atto text editor documentation lists a number of different points that this tool will check your content for:

  • Images with missing or empty alt text (unless they are decorative images).

  • Contrast of font colour and background colour meets WCAG AA guidelines.

  • Long blocks of text are sufficiently broken up into headings.

  • All tables require captions.

  • Tables should not contain merged cells as they are difficult to navigate with screen readers.

  • All tables should contain row or column headers.

The image below, shows the Accessibility Checker displaying it's results. It has identified the text and advises that "There is a lot of text with no headings etc". To fix this warning, use using the heading styles and/or new styling features to apply headings and define structure.