6. Graphic

What does that mean?

Images that convey important information require alternative text (ALT). This alternative text serves to describe the image for those who cannot see it. In Moodle, the length of the alternative text is limited to 125 characters. It is therefore important that the connection to the surrounding text is clear.

If the image has no substantive meaning – in other words, if it is merely "decorative" – it must be labelled as such.

Why is it important?

Appropriate alternative text for an image is important, as it enables all users to understand the content of an image. If an image has no alternative text, or if the alternative text is inadequate, the image becomes invisible to users of screen readers and text-to-speech software. This means that these users miss out on important information that may be contained within the image.

Appropriate alternative text describes the image briefly and concisely and explains, for example, how the image relates to the content of the document. If the image contains important information that is not, or cannot be, presented elsewhere in the text, it is important to include this information in the alternative text so that it can be accessed by screen readers and text-to-speech systems.

How can you put this into practice or check it?

When inserting an image via the menu bar in the text editor, you can enter alternative text. To do this, use the field "Description for someone who cannot see the image".

In the more recent versions of Moodle, it is not possible to upload an image without alternative text or to mark it as a decorative image.

If the image has no substantive meaning and serves only as a "decorative element", it must be marked as decorative. Screen readers will then ignore the image and will not read it aloud. When inserting the image via the menu bar, you will find a checkbox labelled "Image for decorative purposes only" below the text field. Select this to mark the image as decorative. 

Please note that it is not sufficient simply to enter the words "blank" or "decorative" in the alternative text field. This would be read out by screen readers and is unnecessary.

What does that mean?

A detailed descriptive text alternative for an image contains a detailed description of the image’s content and its significance to the document. Unlike alternative text, which provides only a brief summary of the image’s content, a detailed descriptive text alternative should convey all the key details of the image that are necessary for it to be understood. A detailed descriptive text alternative should use clear and precise language and include all the key information from the image, including colours, shapes, text, people, places and actions depicted in the image. However, the text should not be redundant or superfluous and should be limited to the relevant information contained in the image. This text alternative, or a link to it, should be located in the immediate vicinity of the graphic.

Why is it important?

The use of detailed descriptive text alternatives is an important aspect of digital content accessibility, as it ensures that users with visual impairments can understand the content of complex images and diagrams. A detailed descriptive text alternative can be particularly important if the image contains key information that cannot be conveyed in any other way in the document’s text. As complex images are generally difficult to describe, it is particularly important that they are provided with an accurate and detailed text alternative so that everyone can understand the content of the image.

An example of a detailed descriptive text alternative for a complex image might look like this:

The picture shows a group of guests sitting around a round table and chatting. In the middle of the table is a cake with "Happy Birthday" written on it. The guests are walking round the table, smiling and raising their glasses to toast the birthday. The room is decorated with balloons and bunting, and in the background you can see a band playing music.

The more important the details are for understanding the content, the more thoroughly they must be described.

How can you put this into practice or check it?

A descriptive text alternative should provide a precise and accurate description of the visual element (e.g. image, diagram, graphic) and convey its significance to the content of the document. For example, a link to a Word document containing a detailed descriptive text alternative can be added below images, graphics or diagrams. Here are a few steps that can help you create a good descriptive text alternative:

1. Consider which visual element is to be described and what information it contains.
2. Describe the visual element in as much detail as possible to ensure that a clear picture emerges of what can be seen in the image or diagram.
3. Consider how the visual element fits into the context of the document and what information it conveys. Ensure that the text alternative helps the reader to understand the meaning of the visual element within the context of the document.
4. Use clear and concise language, adapting it to the relevant target audience where necessary.
5. Avoid repeating information that is already present in the body of the document.

There are a few steps you can take to check your text alternatives:

1. Check that the alternative text contains all the important information from the visual element.
2. Ensure that the alternative text is clear and easy to read.
3. Check that the alternative text makes sense in the context of the document and has a clear connection to the text or other visual elements.
4. Ask someone who is unfamiliar with the information in the visual element to read the text alternative and check whether they can understand the meaning and purpose of the visual element.
5. Check that the text alternative is not redundant, i.e. that it does not repeat information already present in the text.

What does that mean?

Graphical elements that convey information include, amongst other things, lines or shapes used to delineate and/or distinguish between different pieces of information. These should, as a general rule, have a sufficient contrast ratio against both the background and the text.

Why is it important?

For recipients with visual impairments, sufficient contrast between graphic elements and the background can be crucial to their ability to recognise them. Insufficient contrast makes elements harder to see and can lead to misinterpretations. It is therefore important that graphic elements such as images or buttons have a sufficient minimum contrast.

Adequate contrast not only makes it easier for readers with visual impairments to perceive content. Readers who work in poorly lit environments, are looking at a black-and-white printout, or are following a presentation via a projector also benefit from a high contrast ratio. Sufficient contrast ensures that content is clearly and distinctly recognisable, thereby facilitating the absorption and processing of information.

How can you put this into practice or check it?

To check contrast levels, you can use various online tools or programmes. These often include the words "colour contrast" in their names. These tools allow you to check the selected foreground colour against the selected background colour. If the contrast is not high enough, adjust the colours in line with the recommendations.

What does that mean?

Text-based graphics are graphics consisting entirely of text characters and symbols, and do not contain any images, photographs or other visual elements. Text-based graphics are frequently used in the design of logos, posters, banners and other marketing materials. 

It is recommended that text should not be represented using text graphics. Instead, the text should be typed and formatted as actual text. If text graphics are used nonetheless, it is necessary to provide alternative text that describes the content of the graphic. If the text graphics are redundant and contain the same text as the surrounding text, they should be marked as decorative.

Why is it important?

The use of text-based graphics can lead to limitations in the accessibility of digital content, as they cannot be recognised by screen readers or text-to-speech software for users with visual impairments. If the text is entered and formatted as actual text, it can be read more easily by assistive technologies. However, if text graphics are used, it is important to provide alternative text to ensure that the content of the graphic can be understood by all users.

How can you put this into practice or check it?

As a general rule, text-based graphics should be avoided. If a text-based graphic must be used, alternative text must be provided that conveys the same content as the graphic. The same procedure as described in section 6.2 should be followed here.

What does that mean?

Animated graphics in the form of GIF files should not be used in a Moodle course. Animated graphics, or GIFs (Graphics Interchange Format), are file formats for graphics that can play a sequence of images in a loop to create a short animation. Due to the looping function, GIFs play repeatedly until the viewer closes them or scrolls on. Still images can also be converted into GIF format, but this significantly reduces the quality.

Why is it important?

Flickering animations should not be used in the design of accessible digital content. Playing them on a loop can be very distracting and disruptive. As a rule, animated content does not offer the option to pause or stop the animation. This makes it difficult, for example, for users with concentration difficulties to take in the content. Furthermore, rapid movements or flickering effects can trigger seizures in users with photosensitivity.

How can you put this into practice or check it?

To explicitly avoid using GIFs in your Moodle course, you can check the content manually to ensure that there are no GIFs present.