Accessibility in Moodle
Welcome to the Accessibility in Moodle guide. You are likely referring to this guide because you have some responsibility for creating online learning content in Moodle.
The aim of this guide is to give Moodle content creators a basic understanding of digital accessibility issues, and to support them in improving the accessibility of their online learning content.
Please remember that the Academic Technology Team are not responsible for digital accessibility at Warwick, and are not experts in digital accessibility. This guide should be considered as general information only, and is our own interpretation and understanding of the Web Content Accessibility Guidelines (WCAG) 2.1.
For formal guidance, please consult WCAG 2.1 directly. You are strongly advised to undertake your own research to ensure that the accessibility of your learning content meets the required standards.
What is digital accessibility?
Digital accessibility means that websites, tools and technologies are designed so that everyone can use them, regardless of ability or disability. Not only is accessible design inclusive of users who may be using assistive technologies such as screen readers, it improves the overall user experience for everyone.
Please watch the following video for an overview of digital accessibility and how it affects us (02:40):
What are the guidelines?
The Web Accessibility Content Guidelines (WCAG) 2.1 is the current international standard for accessibility and was established by the World Wide Web Consortium (W3C). WCAG 2.2 is scheduled to be published in September 2022.
There are three levels of WCAG conformance; A, AA, and AAA. Many organisations, including The University of Warwick, strive to meet the AA level of conformance.
What does this mean for me?
As content creators in Moodle, we have a responsibility to make sure that content meets WCAG 2.1 AA requirements. The good news is that there are some simple techniques you can use to make your content accessible. Please refer to following sections of the guide for details.
About accessibility tools in the Atto editor
There are two accessibility tools included in the Atto editor; the accessibility checker and the screenreader helper. You can find more information about these tools below.
Accessibility checker
About the accessibility checker
The Atto editor includes an accessibility checker.
The accessibility checker identifies common accessibility errors in text which could prevent users from having equal access to information or functionality, such as missing alt text and insufficient colour contrast. For a full list please see MoodleDocs: Accessibility checker.
What does the accessibility checker look like?
The accessibility checker is accessed in the editing toolbar by the universal access icon . The icon is of a black circle with a stylised image of a person in white.
Please see the below image as an example of the accessibility checker identifying an issue. A long text description is provided beneath the image.
The accessibility checker in Moodle has scanned the text in the text editor and identified an issue. A dialogue box contains the message "The colours of the foreground and background text do not have enough contrast. To fix this warning, change either foreground or background colour of the text so that it is easier to read." A hyperlink to the relevant text is provided beneath the message.
Screenreader helper
The Atto editor includes a screenreader helper. The screenreader helper provides additional information about selected text (e.g. is it bold), as well as listing any images or links in the text.
The screenreader helper is represented in the editing toolbar by the braille icon:
About accessible documents
Documents constitute a huge part of the learning content found in Moodle so it is important they are accessible. The most frequently used document types are Microsoft Office (i.e. Word, PowerPoint, Excel, etc) and PDF.
Here are some suggested resources on creating accessible documents listed below.
Creating accessible documents
- AbilityNet: Creating accessible documents
- Microsoft: Create accessible Office documents
- Adobe: PDF accessibility overview
Naming your document
Remember that if you drag and drop a document onto your Moodle space, the document name is essentially link text which is used by screen readers. The document name should be clear, concise, and unique to other documents available in the Moodle space.
For more information about meaningful link text, please see the 'Writing accessible content' section of this guide.
Give clear instructions and feedback
Participants shouldn't have to guess what to do. Please give clear instructions in the activity description so they know what is expected of them. You might also provide participants with the marking criteria for assessed work.
Giving clear and detailed feedback can also help participants to identify areas for further improvement.
Timed activities
Time-sensitive activities and assessments can lead to students becoming anxious or overwhelmed, so please consider whether a timer is appropriate on a case-by-case basis.
To mitigate the impact of timed activities and assessment, you might:
- Offer a practice activity so participants can familiarise themselves with the system in advance
- Add user overrides for students who need extra time; you can change the start and end times for individuals or groups
Naming your activities and resources
Remember that your activity and resource names are essentially link text which is used by screen readers. The activity name should be clear, concise, and unique to other activities available in the Moodle space. This also applies to documents you upload to the Moodle space.
For more information about meaningful link text, please see the 'Writing accessible content' section of this guide.
About alternative text descriptions
Text descriptions for images help people who cannot access images to understand their content and function. These text descriptions are known as 'alternative text', 'alt text', or in HTML language, the 'alt attribute'.
People who may find alternative text particularly helpful include those using screen readers or text to speech software. Users with low bandwidth can also use alternative text when images fail to load.
Does my image need alternative text?
If the purpose of an image is to add visual decoration to the page, alternative text is not required. You can simply mark the image as decorative when adding it to Moodle.
Important: For anything else, you will need to write an alternative text description.
The image properties editor in Moodle, with the image marked as decorative.
How to write alternative text
What you should include in the alternative text depends on the context. What information are you looking for participants to get from the image?
Not sure what to include? Please refer to W3C's alt decision tree to determine what information should be provided. There is also W3C's images tutorial which you may find helpful.
Adding alternative text in Moodle
There is a limit of 125 characters when adding alternative text in Moodle.
If the image cannot be sufficiently described in 125 characters, you must provide a long text description elsewhere. This could be directly beneath the image in the Atto editor, or in a separate Word document or Page.
You should direct users to the long text description in the image's alternative text; for example, "Please see the Word document 'Photosynthesis diagram description' below for a text version of this image".
Please watch the following video to see how to add alternative text in Moodle (02:11)
About Blackboard Ally
Blackboard Ally is integrated with Moodle, helping instructors to improve the accessibility of their files. Ally automatically scans files you upload into Moodle and then performs these steps:
- Generate alternative formats for students to download
- Provide accessibility scores
- Give instructor feedback on how to improve your accessibility score
Further resources and information
Please see our Blackboard Ally instructor's guide for more information. You can also find more detailed and comprehensive guidance at Blackboard Ally's Help for Instructors website.
About closed captions
W3C defines captions as 'a text version of the speech and non-speech audio information needed to understand the content. They are synchronized with the audio and usually shown in a media player when users turn them on'. Closed captions may be of particular benefit to people with hearing impairments and others who cannot hear audio.
Check whether your media requires captions at the W3C website.
A screen shot of a video with closed captions.
Closed captions at Warwick
Please refer to the table below for how to add closed captions to your media using one of Warwick's approved streaming platforms.
| Streaming platform | Closed captions availability | Further information |
|---|---|---|
| Echo360 | Transcript can be manually applied to a video as closed captions | Echo360's guide for applying transcripts to closed captions |
| eStream | Does not generate closed captions; closed captions file must be uploaded manually. Please consider using Echo360 or Microsoft Stream instead | Uploading a transcript/closed captions file to eStream |
| Microsoft Stream (on Sharepoint) | Captions are auto-generated | Office 365: How to view, edit, and manage video transcripts and captions |
| Microsoft Stream (Classic) | Captions are auto-generated | Office 365: Generate automatic captions and transcripts for Stream (Classic) videos |
Colour contrast
Colours must have sufficient contrast between foreground and background to be readable. This namely applies to text colour and background colour, including text on images, icons, and buttons. Colour used in graphs and diagrams should also be distinguishable.
Contrast guidelines
Colour contrast is measured by a ratio. The highest contrast ratio is 21:1, where one colour is black and the other is white. The lowest contrast ratio is 1:1.
Web Content Accessibility Guidelines (WCAG) 2.1 guidelines on colour contrast are:
- Text must have a contrast ratio of at least 4.5:1
- Large text must have a contrast ratio of at least 3:1
- Large text is text at a minimum of 18pt font size, or 14pt bold font size
You can use a colour contrast checker to ensure your content meets WCAG 2.1 requirements. The following two are very reliable:
Please refer to the WCAG minimum contrast requirements for further details.
Using colour to convey meaning
Important: Please do not use colour as the only way to convey meaning.
Colour is an important asset in the design of digital learning content, however users with colour perception difficulties and other visual impairments may miss important information if an accessible alternative is not provided.
Supplementing colour with text, icons, symbols, or patterns
The best way to design content for users who lack access to colour is to provide further emphasis using text, icons, symbols or patterns. Please use these additional elements when colour is used to convey meaning.
| Example of inaccessible content | Accessible alternative |
|---|---|
| "Click the red button" | Give the red button a label describing the button's purpose, e.g. "Start quiz" |
| Using green text to indicate something is correct, and red text to indicate something is incorrect | Add a tick icon next to the green text and a cross icon next to the red text; alternatively, write "Correct:" and "Incorrect:" at the start of each text block respectively |
| Bar graphs using colour only | Bar graphs using colour and pattern, with clear labels |
You can preview your content using the Coblis colour blindness simulator to check that your content is accessible to users with visual impairments.
You are strongly advised to undertake your own research to ensure that the accessibility of your learning content meets the required standards. Here is a list of suggested resources to help you get started.
Suggested resources
Self-paced training
Other web resources
Creating accessible documents
- AbilityNet: Creating accessible documents
- Microsoft: Create accessible Office documents
- Adobe: PDF accessibility overview
Moodle
University of Warwick
Web Content Accessibility Guidelines (WCAG) 2.1
About selecting a course format
Course formats determine the overall display and layout of a Moodle space. A carefully-considered layout will benefit all users, but is particularly critical to participants using assistive technologies.
The most popular course formats are listed below with tips on improving ease of access and navigation.
How to change the course format
To review and change the course format settings:
- Go to the relevant Moodle space
- Click the cog icon
- Select Edit settings from the drop-down menu
- Click the Course format header to review the settings
The video below provides overview of the course format settings. Please note not all course formats available are listed in the video (03:58):
For more please see Course formats on MoodleDocs.
Popular course formats
Topics
Topics is the best format for supporting assistive technologies.
There are two layout options:
- Show all topics on one page shows all content on one page, i.e. the 'long scroll'
- Show one section per page splits content across several pages
To optimise accessibility:
- Use a short, clear title for each section
- Organise sections by topic, unit, or week
A screen shot of the topics format in Moodle.
Collapsible topics
The collapsible topics format hides all content under expandable section headings. Participants can expand a section individually by clicking the section heading, or expand all sections by clicking 'expand all'.
To optimise accessibility:
- Use a short, clear title for each section
- Organise sections by topic, unit, or week
A screen shot of the collapsible topics format in Moodle.
Weekly
The weekly format organises content week by week, with the corresponding dates as each section title. The section titles are auto-created based on the start date provided in the course settings.
To optimise accessibility:
- Give a clear summary for each section to help students find course content; it may be difficult to remember which date(s) a topic was covered on
A screen shot of the weekly format in Moodle.
Grid
The grid format hides all course sections and creates a grid of customisable images and short titles. Clicking on an image or title displays the content for the corresponding section in a "lightbox" style display.
There are a small number of significant accessibility issues in the grid format:
- The "lightbox" style display is not accessible to participants using screenreaders or keyboard navigation
- Screen readers can't read text contained in an image
To optimise accessibility:
- In the course settings, set the course layout to Show one section per page. Instead of the lightbox display, participants will now view content on the course page
- Add a short, clear title for each section
- Use images for decorative purposes only and not for section titles
A screen shot of the topics format in Moodle.
About transcripts
W3C define basic transcripts as 'a text version of the speech and non-speech audio information needed to understand the content'. Basic transcripts may be of particular benefit to people who are deaf, hard of hearing, have difficulty processing auditory information, and others.
In the vast majority of cases, your media will need a transcript. You can check whether your media needs a transcript at the W3C's transcript guidance.
A screen shot of a Microsoft Stream video with inline transcript.
Transcripts at Warwick
Please refer to the table below for how to add transcripts to your media using one of Warwick's approved streaming platforms.
| Streaming platform | Transcript availability | Further information |
|---|---|---|
| Echo360 | Transcripts are auto-generated | Automated transcripts and closed captions in Echo360 |
| eStream | Does not generate transcript; a file must be uploaded manually. Please consider using Echo360 or Microsoft Stream instead | Uploading a transcript/closed captions file to eStream |
| Microsoft Stream (on Sharepoint) | Transcripts are auto-generated | Office 365: How to view, edit, and manage video transcripts and captions |
| Microsoft Stream (Classic) | Transcripts are auto-generated | Office 365: Show a scrolling transcript window for videos in Stream (Classic) |
About course sections
Course sections break up the course into manageable or logical sections which could relate to a time period, a particular project, or to a pedagogic process of your choice. Course sections add structure to your Moodle space and help participants to easily navigate the course content.
Sections are displayed differently depending on the course format.
How to edit course sections
See the Moodle video below for more information on editing course sections (01:47)
How to use course sections effectively
You can organise your sections in whatever way is most appropriate for your teaching and participants as long as it's clear and consistent. For example, you could organise your sections by:
- Week
- Theme
- Type of resources and activities (e.g. lectures, seminars, assessment)
Make sure you optimise the use of course sections by doing the following:
- Provide a short, unique title for each section which accurately summarises the content, e.g. Week 1: Michaelangelo
- Add a section summary to give a further description of the content
- Use the same naming conventions consistently
Clear and concise language
Keeping your writing simple will make it easier for participants to understand. Follow these tips to make your writing more accessible:
- Write in short sentences and paragraphs
- Avoid unnecessarily complex words and phrases
- Avoid idioms, jargon, and hidden or implied meaning
- Expand acronyms on first use. For example, "The Virtual Learning Environment (VLE) is..."
- Consider providing a glossary of terms users may not know
You can measure the readability of your writing with tools like the Hemingway Editor.
Structure
Please consider the following tips when formatting your text. Good formatting enables participants to easily digest learning content.
- Break long blocks of text into short paragraphs
- Structure content with headings and subheadings, either in the Atto editing toolbar or in the document you are working in
- Use numbered lists and bullet points where appropriate
- Leave a suitable amount of white space on the page
Emphasising content
Screen readers do not identify font styles, including colour, bold, italics, and underline. Please do not use font styles as the only way to indicate importance; an accessible alternative should always be provided.
Accessible ways of emphasising content include:
- Using exclamation marks or question marks. Screen readers will lend an exclamative or questioning tone as they read aloud
- Starting your message with "Important:". This will be read aloud to screen reader users and provides a further visual cue of importance
Meaningful link text
Link text is usually a word or phrase on a web page that a user clicks to open another web page or document, e.g. University of Warwick.
Link text is an important part of good content design. Not only do users of assistive technologies rely heavily on link text to quickly navigate a web page, it actually enables all of us to easily identify key information.
Meaningful link text should:
- Be short and succinct
- Be unique to other links on the page
- Describe what the user will find when they click the link
- Make sense without the surrounding sentences or page content
| Examples of inaccessible link text | Examples of accessible link text |
|---|---|
| For more information on the Warwick Assessment System, click here. | Read more about the Warwick Assessment System. |
| For more information, please see the Academic Technology support guides at https://warwick.ac.uk/services/academictechnology/support/guides/. | For more information, please see the Academic Technology support guides. |