I’ve been doing a lot of thinking about accessibility and Moodle recently as we move the Moodle Baseline project into the pilot stage. It’s become clear that many of us don’t make our responsibility to create accessible content a top priority when all that’s needed is a small amount of extra time to ensure a vast improvement in the ability of differently abled users to consume your Moodle content. I’m not going to call any specific Moodle sites out here, but some of the most prevalent bad practice that somewhat surprisingly still seems to exist includes using HTML tables for navigation & layout, and using images for headings or navigation.

Both of these issues become problematic to users who use screen readers. Whilst it is true that screen reader support for tables has improved, they should still not be used for navigation or layout. Every time the screen reader box enters a table cell, the screen reader will tell the user which cell they are in. You can easily see how this is not a good user experience if you have to work your way through a four by five table, with a link (or more than one link) in each cell. Using something more appropriate such as an HTML list for this navigation properly give the nav role in the html, as well as a more streamlined experience, a screen reader can also use this information to offer it’s user the option to skip the navigation and go straight to page content, or not. for some more information on this have a look at the W3 Schools page detailing the nav role.

Using an image for heading isn’t automatically a terrible thing. If it’s used in conjunction with either HTML alt text, or if at all possible an ARIA attribute to notify to a screen reader how the image is being used. Using CSS to replace a text link with an image, which will also allow the image to be seen by those browsing visually, but also mean the HTML text link is visible to those with a screen reader It just so happens that Bootstrap 4 has an easy way to do this which everyone can use after the Moodle upgrade in August. Bootstrap also offers ways to totally hide elements in your HTML content from everyone except those using screen readers, so you can really go the extra mile to offer content that’s easier to digest audibly.

There are reasons why you’d need to use a custom navigation, there are also times however that the topic jump list should be more than sufficient for navigating between topics on a Moodle site. If you find that this is almost good enough – but not quite – please talk to us and we’ll try and make it totally good enough for you to use. If you’d like to find out more about accessibility I would heartily recommend the Digital Accessibility MOOC on FutureLearn, it really opened my eyes to accessibility issues I’d never considered – it made me realise what I thought I was doing to enable differently abled people to read my content, wasn’t in fact enough.

I’ll leave you with this from our Moodle content guide which will arrived with the new theme after the upgrade in the summer:

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.