Ally part 1: Creating accessible text in Moodle

This is the first of a planned series of short posts about the use of Ally. You can find out more about Ally on the Royal Holloway staff intranet.

Issues with HTML structure

You probably don’t self-describe as a web designer, but if you have created content in Moodle, such as labels or pages or forum posts, you have produced HTML code – the building blocks of webpages. Virtual Learning Environments, such as Moodle, allow academic staff to make content without the need to study and become expert in coding. This is generally a good thing until things don’t work as intended.

An example of unintended consequences is when Ally flags up content as not being fully accessible. You may have seen this entry in your course’s accessibility report:

The HTML’s heading structure does not start at the right level

What does it mean?

HTML content needs to be structured logically and hierarchically. This is achieved through the use of Moodle text editor’s Styles menu (see Image 2 below). This provides an intentionally narrow range of text styles, including paragraph and three sizes of header. You may be interested in one of our older blog posts which, in rather spiky fashion, asserts why the range of styles is limited…..

In the example below (Image 3), the Label is poorly structured; it begins with text in the Header (medium) style before continuing with text rendered in the Paragraph style, followed by a Header (large). It is flagged by Ally – with a score of 98% – because in content with headers, Header (large) must be the first style used.

Unstructured – or badly structured – content impacts on accessibility. Headings communicate the organisation of the content on a webpage. Web browsers, plug-ins, and assistive technologies – such as screen readers – can use them to provide in-page navigation.

Screen readers require documents to be structured so that they make sense to the listener. (See what else the W3 Web Accessibility Initiative has to say about headers)

Solutions

There are a few ways to create accessible HTML in Labels:

• Use Headers in logical and hierarchical order – start with Header (large), followed by Paragraph.
• If using more than one header style, use them in order; e.g., do not jump from Header (large) to Header (small).
• Use only Paragraph style throughout a Label or Page.

How to apply Style

Type your text into the text editor, then

1. Select the text
2. From the Editing Toolbar, click on the Styles button to open the menu
3. Select your preferred style from the menu

Repeat for each element of the label until the headers and paragraphs are defined.

Expert track

• Keep Moodle labels short and simple.
• Use bold sparingly, highlighting key words but not entire sentences.
• An efficient workflow involves entering all the text first and then applying styles.
• It is possible to copy and reuse Labels, rather than create and apply styles from scratch.