Skip to Content
Last modified by Carina Enke on 20.02.2026
Show last authors
1 {{section}}
2 {{column width="60%"}}
3 Websites today have to meet numerous requirements. Everyone wants to be able to access information on any device, anywhere, without restrictions or barriers. The use of mobile devices with smaller screens and sometimes slow internet connections is now commonplace. However, usability with alternative technologies, such as screen readers that work with voice output and keyboard operation, must also be ensured.
4
5 To meet all these requirements and make information accessible to everyone, there are a number of things to consider. The basic guidelines on usability and accessibility provide important orientation.
6
7 {{info title="**Usability**"}}
8 Usability is defined in the DIN EN ISO 9241-11 standard. A system must be able to be used by certain users in a certain context of use in order to complete work tasks effectively, efficiently and satisfactorily, and thus achieve certain goals.
9
10 The [[Website of the Nielsen Norman Group (EN)>>url:https://www.nngroup.com/articles/usability-101-introduction-to-usability/||shape="rect"]] provides an introduction and more information.
11 {{/info}}
12
13 {{info title="Accessibility"}}
14 The guidelines for fulfilling accessibility requirements can be found in the [[Web Content Accessibility Guidelines (WCAG 2.2)>>url:https://www.w3.org/TR/WCAG22/||shape="rect"]]. A German-language introduction to the topic of accessibility can be found on the website [["Einfach für alle">>url:https://www.einfach-fuer-alle.de/artikel/einfuehrung-barrierefreiheit/||shape="rect"]].
15
16 It is important to have an overview of the existing limitations of abilities and disabilities in order to understand the requirements. The[[ W3C Web Accessibility Initiative (WAI) >>url:https://www.w3.org/WAI/people-use-web/abilities-barriers/||shape="rect"]] website has a good English-language overview of the various abilities and barriers. Aktion Mensch provides a brief overview of forms of disability in German: [[Überblick über Behinderungsformen in deutscher Sprache>>url:https://www.aktion-mensch.de/inklusion/arbeit/fachkraefte-mit-behinderung-gewinnen/behinderungsformen||shape="rect"]].
17 {{/info}}
18
19 In OPAL and ONYX, authors can create and design various types of content. Among other things, you can use the text editor to provide descriptions and page content in the course. We have prepared some tips and further content for you.
20
21
22 {{/column}}
23
24 {{column width="30%"}}
25 {{panel title="Content"}}
26 {{toc start="2" depth="3"/}}
27 {{/panel}}
28
29 {{panel title="Related Topics"}}
30 * [[Text editor>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]]
31 * [[Use your own course layout in OPAL>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurseinstellungen.Kurslayout.WebHome]]
32 {{/panel}}
33 {{/column}}
34 {{/section}}
35
36
37 == Course-related accessibility statement ==
38
39 Public bodies, including state universities and schools, are legally obliged to produce an accessibility statement for their digital offerings. This statement describes the extent to which accessibility requirements are met and, where applicable, identifies areas that are not accessible. Further information can be found on the official website for the accessibility statement for web and app applications of the Federal Government.
40
41 A declaration at the software level covers the functions of the learning platform, but not the content of individual courses. However, since an OPAL course consists mainly of learning materials for which the course coordinators are responsible, it makes sense to provide a course-related accessibility statement.
42
43
44 To make it easier for teachers to create such a statement, TU Dresden provides the LMS Check Generator for accessibility. The tool enables course administrators to:
45
46 * create a course-specific accessibility statement,
47 * identify potential barriers in texts, media and interactive content,
48 * provide support for the accessible design of teaching materials.
49
50
51
52 The tool guides you step by step through the creation of the declaration. The person responsible selects the course modules used in the course and then receives a checklist for the content. The generated declaration is provided as an accessible HTML file and can be embedded in the course as a page using the ‘Single Page’ course module. This means that the declaration is directly available in the course and easy for learners to find.
53
54 {{panel title="Further information"}}
55 * LMS Check Generator tool for accessibility from TU Dresden: [[https:~~/~~/lms-check.inf.tu-dresden.de/checklist?lang=en>>url:https://lms-check.inf.tu-dresden.de/checklist?lang=en]]
56 * Federal government information on accessibility declarations for web and app applications: [[https:~~/~~/www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it>>https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/uebergreifende-anforderungen-web-und-app/erklaerung-zur-barrierefreiheit/erklaerung-zur-barrierefreiheit-node.html]]
57 {{/panel}}
58
59
60 == Tips for designing content ==
61
62 === How do I structure content? ===
63
64 When structuring texts on websites or in documents, it makes sense to use books or articles as a guideline. The headlines, bulleted lists, table of contents and visual highlighting used there help to improve readability, skimming or scanning with the eyes, and, therefore, make it easier to find relevant information quickly. These elements also help users to find their way around the site. In addition to visual structuring through design, technically correct structuring by means of suitable HTML elements is also necessary. This is particularly relevant for accessibility, as screen readers and other assistive technologies transmit information based on HTML code and provide various functions.
65
66 {{info}}
67 OPAL's integrated [[Text editor Tiny MCE>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]] helps you to structure your content correctly without having to learn HTML.
68 {{/info}}
69
70 === Headings ===
71
72 Headings should not be created by changing the font size or using formatting such as bold, but rather using the HTML elements <h1>, <h2>, <h3> to <h6>. The element hierarchy (e.g. <h2> follows <h1>) must be maintained.
73
74
75 ==== Formats in the Tiny MCE text editor ====
76
77 [[image:attach:Texteditor-Formate-Überschriften_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
78
79
80 ==== HTML code for headings ====
81
82 {{code language="xml"}}
83 <h1>heading 1. hierarchy</h1>
84 <h2>heading 2. hierarchy</h2>
85 <h3>heading 3. hierarchy</h3>
86 <h4>heading 4. hierarchy</h4>
87 <h5>heading 5. hierarchy</h5>
88 <h6>heading 6. hierarchy</h6>
89 {{/code}}
90
91 === Paragraphs and highlighting ===
92
93 Paragraphs, quotations or highlighted text in boxes help to break up a text and allow readers to jump to the relevant information if necessary.
94
95
96 ==== Formats in the Tiny MCE text editor ====
97
98 [[image:attach:Texteditor-Formate-Absätze-Hervorhebungen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
99
100 ==== ====
101
102 ==== HTML code for paragraphs ====
103
104 {{code language="xml"}}
105 <p>paragraph</p>
106 <blockquote>quote</blockquote>
107
108 {{/code}}
109
110 {{warning}}
111 The elements <div> and <span> have no meaning (semantics) and should only be used, for example, to realize the design via CSS or dynamic adjustments via JavaScript.
112 {{/warning}}
113
114 === Lists ===
115
116 Lists can be used to present information clearly, briefly and concisely. Choose between unordered and ordered or numbered lists.
117
118 {{column}}
119 ==== Lists in the Tiny MCE text editor ====
120
121 [[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
122 {{/column}}
123
124 {{column}}
125 ==== HTML code for lists ====
126
127 {{code language="xml" title="unordered list"}}
128 <ul>
129 <li>list entry</li>
130 <li>list entry</li>
131 <li>list entry</li>
132 </ul>
133
134 {{/code}}
135
136 {{code language="xml" title="ordered list"}}
137 <ol>
138 <li>list entry</li>
139 <li>list entry</li>
140 <li>list entry</li>
141 </ol>
142
143 {{/code}}
144 {{/column}}
145
146
147 === Tables ===
148
149 ==== Using tables ====
150
151 Please use tables only to present data in tabular form. Tables should not be used to display text or other content side by side or in “columns” for visual reasons (layout tables).
152
153 It is worth considering whether a table is necessary or whether the content could be presented more simply, e.g. by means of a list.
154
155 {{info}}
156 On small screen devices (e.g. smartphones) and when zoomed in (e.g. 300%), tables are often not displayed in full. As a rule, content should not be cut off. Therefore, check the display on different devices and different zoom levels, and never assign tables an absolute width (e.g. 700px).
157 {{/info}}
158
159 ==== Table headings (Caption) ====
160
161 Each table should have a heading that provides a brief summary of its content. You can use the HTML element <caption> for this purpose.
162
163 In the Tiny MCE text editor, you can activate the table caption in the **table properties**. When you do this, some text will appear above the table, which you can change to match your content.
164
165 ===== =====
166
167 ===== **How to activate table captions in the Tiny MCE text editor** =====
168
169 [[image:Texteditor-Tabellen-Beschriftung_de.png||alt="Beschriftung für Tabellen aktivieren im Dialog Tabelleneigenschaften im Texteditor (Screenshot)" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
170
171 ===== =====
172
173 ===== **HTML code for captions** =====
174
175 {{code language="html" layout="LINENUMBERS"}}
176 <table>
177 <caption>presentations on group work</caption>
178 ...
179 </table>
180 {{/code}}
181
182
183 ==== Column and row headings ====
184
185 Cells for headings (header cells) should be distinguished from data cells not only by design, but also by HTML. Header cells in tables are therefore marked with the HTML tag <th>, data cells with <td>.
186
187 You can additionally link the header cells to the data cells via the ‘scope’ attribute. This ensures that your headings are assigned to the rows or columns and that the output via screen readers is correct.
188
189 In the Tiny MCE text editor, you can use the **cell properties** to define your selected cells as headings and assign them to columns or rows.
190
191 * To do this, select your preferred cells and open the **cell properties** via the menu (Table > Cell > Cell Properties).
192 * Now select ‘Header cell’ in the dialogue box under ‘Cell type’.
193 * Select ‘Column’ from the ‘Scope’ option.
194 * Repeat this action if you use row headings in addition to column headings. In this case, select ‘Line’ under the ‘Scope’ option.
195
196 {{warning}}
197 Please do not leave your header cells empty.
198 {{/warning}}
199
200 ===== **How to define header cells in the Tiny MCE text editor** =====
201
202 [[image:Texteditor-Tabellen-Zelleneigenschaften_de.png||alt="Screenshot einer Seite mit einer Tabelle im Texteditor Tiny MCE. Die Kopfzeilen der Tabelle sind markiert und der Weg zu den Zelleneigenschaften ist hervorgehoben." data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="320" width="660"]] [[image:Texteditor-Tabellen-Zelleneigenschaften-Typ-Gültigkeitsbereich_de.png||alt="Screenshot des Dialogs Zelleneigenschaften. Hervorgehoben sind die Optionen Zellentyp und Gültigkeitsbereich." data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="320" width="323"]]
203
204
205 ===== **How to mark header cells in HTML** =====
206
207 {{code language="html" layout="LINENUMBERS"}}
208 <table>
209 <caption>presentations on group work</caption>
210 <thead>
211 <tr>
212 <th scope="col">date</th>
213 <th scope="col">time</th>
214 <th scope="col">topic</th>
215 <th scope="col">place</th>
216 </tr>
217 </thead>
218 <tbody>
219 <tr>
220 <td>04.03.</td>
221 <td>10 - 11 a.m.</td>
222 <td>sustainability<td>
223 <td>room3b</td>
224 </tr>
225
226 ...
227
228 </tbody>
229 </table>
230 {{/code}}
231
232 {{panel title="Further information"}}
233 * [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]]
234 * [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
235 {{/panel}}
236
237
238
239 === How can texts be made easy to read? ===
240
241 Font, font size, character and word spacing, line length and many other factors influence the readability of texts.
242
243 * Make sure to use **common fonts** (like Arial) and avoid fancy or hard-to-read ones.
244 * The **font size** for large screens should be between 18px and 26px. For small devices, such as smartphones, you should use smaller font sizes because the device is usually closer to the eye.
245 * The **line spacing** should be at least 120% of the font size, preferably 150%.
246 * The **line length** should be between 45 and 80 characters per line, including punctuation and spaces.
247
248 Please keep in mind that font size, line spacing, and line length depend on both the font and the device you're using.
249
250 {{info}}
251 Check the readability of your texts on various devices and have them evaluated by other people. Ideally, by your users. Involve people with visual impairments or cognitive impairments as well as those with learning disabilities.
252 {{/info}}
253
254 {{panel title="Further information"}}
255 * [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]]
256 * [[Font size calculator (legibility.info)>>url:https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index.php||shape="rect"]]
257 {{/panel}}
258
259
260
261 === How should links be set? ===
262
263 Links need meaningful titles and should describe the purpose or destination of the link. Ambiguous link texts such as ‘more’, “here” or ‘read more’ should be avoided. Relevant information about the format or size of a file (e.g. for a download link) should also be included in the linked text.
264
265 {{info}}
266 A link has to stand on its own and still describe the destination or purpose well enough.
267 {{/info}}
268
269
270
271 === What should be considered when using media? ===
272
273 When using media, consider not only storage consumption and loading times, but also its accessibility on the go, e.g. on a smartphone with a poor internet connection. Ensure that information is always available via a second channel, such as text.
274
275 Here are some tips you might find useful regarding accessibility and mobile compatibility.
276
277 ==== File size ====
278
279 * For photos, JPEG format should be preferred and medium to high quality should be selected depending on the image content.
280 * Images should not exceed a file size of 100-200kB.
281 * Save the images directly in the required image size (width x height) with a resolution of 72 dpi.
282 * For very large files, such as videos, we recommend embedding them via an external tool (e.g. Videocampus Sachsen, YouTube, Vimeo, etc.).
283
284 {{info}}
285 Common image editing programmes and online tools can help to compress images without any visible loss of quality.
286 {{/info}}
287
288 ==== Captions ====
289
290 Captions or titles provide additional information about images. A title is necessary if important information about the image needs to be conveyed. Unlike image descriptions (alternative text), titles are also accessible to sighted users.
291
292 Use the following HTML code to make the image and image title accessible:
293
294 **Caption with the HTML elements figure and figcaption**
295
296 {{code language="html" layout="LINENUMBERS"}}
297 <figure>
298 <img src="..." alt="alternative text">
299 <figcaption>title / caption</figcaption>
300 </figure>
301 {{/code}}
302
303
304
305 ==== Alternative text (alt text) ====
306
307 You should always provide alternative text for images that are relevant to the content of a page. Alt text is read out by screen readers and, therefore, accessible to blind people. Even if the images on the page are disabled or cannot be loaded due to a slow internet connection, the information can still be conveyed despite the missing image.
308
309 **The following should be kept in mind when providing alt text for images:**
310
311 * Keep it short: The alternative text should only contain the most important information. A useful guideline is 125 characters.
312 * Describing information: Only describe information that is relevant to the context (e.g. the text) and that the image is intended to convey.
313 * Images that are used primarily for design purposes should not be given alt text (empty alt attribute). In the text editor, you can mark these images as decorative.
314
315 {{info}}
316 Imagine you are describing a picture of a person on the phone. Which details would you mention, and which would you leave out because they are not relevant in this context?
317 {{/info}}
318
319
320 ===== How to store alternative text in the Tiny MCE text editor =====
321
322 [[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
323
324
325 ===== HTML code for alt text =====
326
327 {{code}}
328 <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
329 {{/code}}
330
331 ===== How to mark an image as decorative =====
332
333 [[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
334
335
336 **How to empty the alt attribute for images without relevant information in HTML**
337
338 {{code}}
339 <img src="..." alt=" " />
340 {{/code}}
341
342 {{info}}
343 The contrast should also be checked for images. The main subject in the image should stand out sufficiently from the background. Tips can be found at [[leserlich.info>>url:https://www.leserlich.info/kapitel/bilder.php||shape="rect"]].
344 {{/info}}
345
346 {{panel title="Further information"}}
347 * Tips on how to write good alternative texts and image descriptions: [[Broschüre "Gut Fürs Image" (PDF)>>url:https://weiterbildung.dvbs-online.de/files/ibob-daten/Inhalt/Infothek/Brosch%C3%BCren/bf_Gut%20f%C3%BCrs%20Image%20-%20Praxisleitfaden%20zur%20Erstellung%20textbasierter%20Alternativen%20f%C3%BCr%20Grafiken.pdf||rel="nofollow" shape="rect" class="external-link"]]
348 * [[How to write better alt-text descriptions for accessibility>>url:https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/||shape="rect"]]
349 * [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
350 {{/panel}}
351
352
353
354 === Optimizing images for smartphones and tablets ===
355
356 For images to be displayed in full on small-screen devices and without users having to scroll horizontally, the maximum width in HTML should be limited to 100%. This ensures that the image is only displayed in the selected size until it is wider than the available space on the screen.
357
358 HTML code for max-width
359
360 {{code language="html"}}
361 <img src="..." style="max-width: 100%" />
362 {{/code}}
363
364
365
366 === Providing alternatives for videos and audio files ===
367
368 When using media, make sure to always offer the info in an alternative format. In addition to image descriptions (alternative text) for images, think about pure audio content (e.g. podcasts) and video content with images and sound.
369
370 * Provide alternative content or a transcript if you use audio files such as podcasts.
371 * Provide subtitles and sign language translation for video content.
372 * Integrate media from external platforms, such as YouTube or[[ Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]]
373
374 {{info}}
375 On video platforms such as YouTube and Vimeo, subtitles are generated automatically. You can edit them if you need to.
376 {{/info}}
377
378 {{panel title="Further information"}}
379 [[Videocampus Sachsen: Erstellung von Untertiteln für Videos (TU Chemnitz)>>url:https://blog.hrz.tu-chemnitz.de/urzcommunity/2021/06/16/erstellung-von-untertiteln-fuer-videos/||shape="rect"]]
380 {{/panel}}
381
382
383
384 == Colours & contrasts ==
385
386 When selecting colours, make sure there is **sufficient contrast between the background and text colours.** Black on white generally offers the best **contrast ratio**, which should be at least** 4.5:1 **([[WCAG 2.1 - Contrast>>url:https://www.w3.org/TR/WCAG21/#contrast-minimum||shape="rect"]]).
387
388 {{error}}
389 Avoid challenging colour combinations such as red on green or black, as these can be difficult for some people to see. Bright colours and flashing elements should also be avoided.
390 {{/error}}
391
392 **Colour should never be used as the only means of highlighting information**. Instead, supplement information such as notices or error messages with a clearly recognisable icon and additional text. Avoid instructions or descriptions that refer only to a colour or other visual cues, e.g. ‘Click on the green button’.
393
394 {{panel title="Further information"}}
395 * [[Contrast calculator from leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
396 * [[Choose your colours with color.review (EN)>>url:https://color.review/||shape="rect"]]
397 * [[Check your contrasts with the WCAG contrast checker (EN)>>url:https://contrastchecker.com/||shape="rect"]]
398 {{/panel}}
399
400
401 == Useful tools ==
402
403 * Check websites with [[WAVE Toolbar>>url:https://wave.webaim.org/||shape="rect"]].
404 ** [[WAVE für Google Chrome>>url:https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh||shape="rect"]] (browser extension)
405 ** [[WAVE für Firefox>>url:https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/||shape="rect"]] (browser extension)
406 * Free open source screen reader for Windows: [[NVDA download>>url:https://www.nvaccess.org/download/||shape="rect"]]
407 * [[Checkliste: barrierefreie PDF-Dokumente>>url:https://www.einfach-fuer-alle.de/artikel/checkliste-barrierefreie-pdf/||shape="rect"]] from Einfach für alle