Moodle Best Practice Guide
Accessibility

Accessibility for Moodle content means that your content is available to be consumed by all users, regardless of their ability. Creating accessible learning content is the responsibility of us all – It’s not something that should be left until later, or for us to think that it’s the responsibility of someone else.

Tim Berners-Lee, the creator of the World Wide Web views accessibility as an essential aspect integral to all online content: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

We think we can take the his lead and ensure that the content we create is – as much as possible – accessible to as many differently abled consumers as we can. If you follow a few rules when adding your content, you’ll find that a little extra work now saves a lot of time in the future.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W3C Director and
inventor of the World Wide Web

Accessible content is better for everyone

Ensuring your content is accessible will also go a long way towards improving the way users who do not need to use assistive technologies consume your content. This video is from the Web Accessibility Initiative shows a variety of ways that content produced to be accessible is also beneficial for all users regardless of ability.

One of the best examples of this principle in action is the example of Barclays Bank, who's inclusive design provision is comprehensive to say the least. The Barclays ethos is one of improving accessibility for all of their services increases the amount of customers that are able to take up their service, so why not make the effort and increase their eligible audience? We should have the same attitude at the University, the more students that can access our high quality teaching and use all of the services, content, and experiences that go along with that the better.

Some of the ways that you can improve content for all of your audience:

  • blue triangle with the point facing right
    Captions ensure that videos are accessible, however they also allow everyone to watch and understand them in an environment where they cannot listen to audio, a library for instance.
  • blue triangle with the point facing right
    Sufficient contrast between colours used for text, links, images, icons & buttons enables all users to be able to see them more easily in a variety of writing conditions.
  • blue triangle with the point facing right
    Voice control in phones and other devices, help those who can’t physically interact with the device get what they want done. It also benefits those who simply prefer to use their voice to access information, shop, or control their home.
  • blue triangle with the point facing right
    Text-to-speech applications are essential for blind users, but users with dyslexia, and those who want to multitask can also use this feature.

Check your existing content

Before you begin to work on new content, it's worth revisiting what you already provide students. Moodle provides a tool for checking your content for problems with accessibility, called the Accessibility Checker. This is a button found in the default text editor, Atto, which scans your content and warns you of any potential issues. This is a useful tool to double check your content, 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:

  • blue triangle with the point facing right
    Images with missing or empty alt text (unless they have the presentation role).
  • blue triangle with the point facing right
    Contrast of font colour and background colour meets WCAG AA guidelines.
  • blue triangle with the point facing right
    Long blocks of text are sufficiently broken up into headings.
  • blue triangle with the point facing right
    All tables require captions.
  • blue triangle with the point facing right
    Tables should not contain merged cells as they are difficult to navigate with screen readers.
  • blue triangle with the point facing right
    All tables should contain row or column headers.

How you can improve accessibility

#1 Add alt text to images

Adding alternate text (alt text) to images in Moodle is simple, won’t take you long and is essential to ensure screen readers are able to describe to the user what the image shows. 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.

This is what gets added to the HTML code:

<img src="http://moodle.port.ac.uk/draftfile.php/115/user/draft/580539772/vacine2.jpg" alt="An image of blood cells" width="500" height="109" class="img-fluid border rounded">

Screenshot of the image properties dialog box
#2 Add audio transcripts to video

Transcripts for audio (and video) content are required by those who can’t hear to be able to consume audio that you may produce. If for example you produce a audio recording, you should also provide a text transcript of the audio. Moodle allows you to link subtitle, caption, description & chapter files to videos and audio you add to your sites via the interface shown in this image. You have to supply these as WebVTT files, which are designed to sit alongside video and audio. You may need to ask assistance from your Online Course Developers if you would like to create these types of files.

A Web Video Text Track (WebVTT) file is a standard format used to add captions to web video. The standard originated from the Web Hypertext Application Technology Working Group (WHATWG) specifically to support text tracks in HTML5. You can read more about this format, including this resource on how to structure a WebVTT file.

captions

If your content is from YouTube, you’ll find that there is an automatic captioning feature that will attempt to convert the audio from speech to text, this is never perfect, but can often be a good starting point for you to be able to edit this text further.

#3 Create meaningful structure

Your content should have a structure. Using headings in digital 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.

Below you can see a test page that we have created using the default Atto text editor in Moodle. It contains a series of headings with information beneath each one. We didn’t write this code, it was created by the editor when we selected the level of heading we wanted for each section:


<h3>All about Van Gogh</h3>
<p>This is the content that leads the page.</p>
<h4>His early life</h4>
<p>This title is useful for separating content into sections.</p>
<h4>Later life and his death</h4>
<p>This heading is the same level as the previous one, as this section holds information that is equal in importance to that of the first section.</p>
<h5>The loss of the ear</h5>
<p>This is a tertiary section, with a heading of a lower weight.</p>
captions

What you can see from this is that in this content, the top level heading or ‘Heading (large)’ is coded as an <h3> tag in the code. This is because Moodle itself already uses the <h1> and <h2> tags in its structure. This is explained in more detail in the Typography section of the content guide

Moodle screenreader helper

The Screenreader Helper, again found in the default Atto editor, is used to improve the ability of a screen reader to ‘see’ into an editable box, such as the one you see when adding content to a page or book in Moodle. It is something that is useful for content creators that use assistive technologies rather than the audience for the content themselves.