The following content types can be made accessible in Moodle:
- Text, including page content, examination instructions and news.
- Links, which may contain text or an image and move the user from Moodle to another website.
- Tables created in Moodle using Moodle’s table feature
- Decorative or informative images
Text – Headings
Headings must be descriptive and informative. Headings must be used to a sufficient degree to help understand the text. Headings must be applied by using paragraph styles, such as ‘Heading (large/medium/small)’. Making the text bold instead of using heading styles is a common mistake.
Text – Contrast and colour
Bold and italics can be used to emphasise words or sentences. Screen readers recognise both styles, but italics is a slightly more difficult style to read. Underlining should be avoided, as it is easily mistaken for a link.
Do not use colour, shape, visual location or other sensory features to communicate essential information. Users who are colour-blind or who use a screen reader may not notice any difference. Do not reduce text contrast or font size to a degree that makes the text difficult to distinguish from the background. Visually impaired users may have difficulty distinguishing text whose contrast to the background is insufficient or whose font size is too small.
The Accessibility checker button in Moodle’s text editor helps identify inaccessible text.
Links – Text or image
Using the web address (URL) as link text should be avoided, at least if the address is long and complicated. The purpose of links containing text must be clear from the link text, or the link text together with its context. Link texts should sufficiently describe the target to which the link takes the user.
Links with a link text describing the target and the context help users understand where the link leads. For example: “Further information on the Non-discrimination Act and citizens’ rights is available on the Non-Discrimination Ombudsman’s website.”
When adding links to Moodle, having them open in the current window is recommended. If it is preferable to have the link open in a new window, this feature should be stated in the link description. For example: Non-Discrimination Ombudsman’s website (opens in a new window).
Images can serve as links as well, in which case the description must include information on the target website, not on the content of the image.
Tables – Headings and merging
Consider carefully when to use tables, as they often pose problems to users using a screen reader. Tables should not be used just to format text. However, the logic of reading tables can be enhanced.
Include a heading for the table, as well as row and column headings. Tables created in Moodle automatically have text fields for adding headings. Avoid merging cells (excluding the heading cell). Empty cells, rows and columns should be avoided.
The Accessibility checker button in Moodle’s text editor helps identify inaccessible tables.
Images – Short descriptive texts for short descriptions
A short description can be added to images published in Moodle, on other websites and in many office programs. The purpose of such descriptions is to describe the image content to users who are using a screen reader. Other users do not see these descriptions.
Images containing information essential to users must be given a descriptive and sufficiently informative text alternative. When adding images, describe the content of the image in the description field. A description suffices for informative images containing information that can be expressed in a few sentences.
Screen readers overlook decorative images when you check ‘Description Not Necessary’ in Moodle when adding images. This way, the screen reader only says “image” or provides the associated file name. Moodle does not allow adding images without a description or selecting ‘Description Not Necessary’.
Images – Text alternatives for long descriptions
Diagrams and other complex images require a full text alternative to enable conveying the content of the image in text form with sufficient accuracy. Unlike descriptions, text alternatives are available to all, not only for screen readers.
Text alternatives associated with images can be shared by employing, for example, the following methods:
Method 1 – Link to the text alternative: In the immediate vicinity of the image, add a link through which users can access the text alternative, which can be, for example, a PDF file or online content. For example:
Description: “A bar chart displaying monthly visitor numbers in 2019 for the helsinki.fi website.” A link text underneath the image: “A long text description of a bar chart illustrating the visitor numbers of the helsinki.fi website in 2019.”
Method 2 – Text alternative on the same page: When adding an image, a brief description of its content and the location of the text alternative is included in the image description. The heading of the text alternative indicates the image associated with it. For example:
Description: “A bar chart displaying monthly visitor numbers in 2019 for the helsinki.fi website. A long description is available under the heading ‘Long bar chart description’.”
Read more about text alternatives for complex images.