3. Web design with minimal accessibility barriers

Image content should always include an alternative text, which can be read out by special software. Descriptions of images allow blind people to grasp the content of the image and thus get all the information that people with eyesight have.  

In Moodle, you can enter alternative texts for your images directly while uploading them.

A brief digression into technology

The alternative text is then stored in the source code of the website. The <alt>-tag is used for alternative texts in HTML. Based on this tag, screen readers can automatically identify the alternative text and read it out. Using your browser’s developer options, you can have the source code and thus the alternative text displayed in code.

Please note: Complex image content can often not be appropriately described in an alternative text. In such cases, it may be necessary to include a detailed description in the body text or create an alternative in text form.

Icons

Icons are also a suitable way of flagging certain information, content or activities They help users quickly find recurring elements. However, the meaning of icons is not unambiguous, which is why they also need text descriptions.

Numerous sets of icons are available free of charge on the Internet. Please always take note of the licensing terms.

Thumbnails

Thumbnails, i.e. small picture previews, only take up a small amount of space within a text. They are clearer indicators that an illustration is available than text links.

Due to the smaller volume of data, pages with thumbnails require less time to load than pages with large images.

In the example below, a small image preview (thumbnail) was created for each large image. The thumbnail’s size is 60x60 px and it shows a detail from the larger image. A detail is frequently more meaningful than the entire image scaled down to an extreme. This image preview is entered in the text editor as an image and selected. It is subsequently linked to the uploaded larger image. Like icons and images in general, thumbnails also require an alternative text.

Links

In addition to resources and activities, links, e.g. to additional resources (texts, websites, etc.), are also frequently included in Moodle courses. The target of a link should always be clear from the link text or the immediate context. A link should be designed in such a way that it gives users the chance to decide whether they would like to open it or not based on the link text. 

When including links in a text, the following is a popular option: ‘Please find further information here.’ The word ‘here’ contains the hyperlink. However, it is not clear to the user where the link leads. Below, we would like to show you how you can embed links in your course in an accessible manner. 

In Moodle, you have several options for including links. You can either add links directly in your text or include them via the ‘Add resources’ function.

 Option A: Including a link directly within a text (e.g. in a topic block, a text field or a text page)

1. Including the link directly by using the ‘naked’ URL: https://www.e-teaching.org/didaktik/konzeption/barrierefreiheit
2. Attaching the link to a text: Link to an article on inclusive e-learning on e-teaching.org (in German)

If at all possible, use descriptive links as shown in item 2 as URLs may be quite long. If you would like to include a link in a text, you can do so using the Atto editor from Moodle (see the ‘Guide on adding links’ note below).

Option B: Including links via the ‘Add resources’ function

To do so, go to ‘Add an activity or resource’ in the bottom right corner of the relevant topic and select the ‘URL’ item in the ‘Resources’ section.

Tables

In the early years of the Internet, tables were frequently also used in the formatting and layout of websites. This should be avoided under all circumstances. Assistive software (such as a screen reader) is able to identify tables. However, if tables are used for something other than their intended purpose, their content might not be presented in a sensible manner. Therefore, only use tables to present data.

Moodle provides an easy-to-use table tool in the Atto text editor.

Mathematical content

Markup language