Skip to Content
Last modified by Anna Paul-Hasenfuss on 19.06.2025
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 == How do I structure content? ==
37
38 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.
39
40 {{info}}
41 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.
42 {{/info}}
43
44 === Headings ===
45
46 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.
47
48
49 ==== Formats in the Tiny MCE text editor ====
50
51 [[image:attach:Texteditor-Formate-Überschriften_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
52
53
54 ==== HTML code for headings ====
55
56 {{code language="xml"}}
57 <h1>heading 1. hierarchy</h1>
58 <h2>heading 2. hierarchy</h2>
59 <h3>heading 3. hierarchy</h3>
60 <h4>heading 4. hierarchy</h4>
61 <h5>heading 5. hierarchy</h5>
62 <h6>heading 6. hierarchy</h6>
63 {{/code}}
64
65 === Paragraphs and highlighting ===
66
67 Paragraphs, quotations or highlighted text in boxes help to break up a text and allow readers to jump to the relevant information if necessary.
68
69
70 ==== Formats in the Tiny MCE text editor ====
71
72 [[image:attach:Texteditor-Formate-Absätze-Hervorhebungen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
73
74 ==== ====
75
76 ==== HTML code for paragraphs ====
77
78 {{code language="xml"}}
79 <p>paragraph</p>
80 <blockquote>quote</blockquote>
81
82 {{/code}}
83
84 {{warning}}
85 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.
86 {{/warning}}
87
88 === Lists ===
89
90 Lists can be used to present information clearly, briefly and concisely. Choose between unordered and ordered or numbered lists.
91
92 {{column}}
93 ==== Lists in the Tiny MCE text editor ====
94
95 [[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
96 {{/column}}
97
98 {{column}}
99 ==== HTML code for lists ====
100
101 {{code language="xml" title="unordered list"}}
102 <ul>
103 <li>list entry</li>
104 <li>list entry</li>
105 <li>list entry</li>
106 </ul>
107
108 {{/code}}
109
110 {{code language="xml" title="ordered list"}}
111 <ol>
112 <li>list entry</li>
113 <li>list entry</li>
114 <li>list entry</li>
115 </ol>
116
117 {{/code}}
118 {{/column}}
119
120
121 === Tables ===
122
123 ==== Using tables ====
124
125 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).
126
127 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.
128
129 {{info}}
130 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).
131 {{/info}}
132
133 ==== Table headings (Caption) ====
134
135 Each table should have a heading that provides a brief summary of its content. You can use the HTML element <caption> for this purpose.
136
137 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.
138
139 ===== =====
140
141 ===== **How to activate table captions in the Tiny MCE text editor** =====
142
143 [[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"]]
144
145 ===== =====
146
147 ===== **HTML code for captions** =====
148
149 {{code language="html" layout="LINENUMBERS"}}
150 <table>
151 <caption>presentations on group work</caption>
152 ...
153 </table>
154 {{/code}}
155
156
157 ==== Column and row headings ====
158
159 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>.
160
161 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.
162
163 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.
164
165 * To do this, select your preferred cells and open the **cell properties** via the menu (Table > Cell > Cell Properties).
166 * Now select ‘Header cell’ in the dialogue box under ‘Cell type’.
167 * Select ‘Column’ from the ‘Scope’ option.
168 * Repeat this action if you use row headings in addition to column headings. In this case, select ‘Line’ under the ‘Scope’ option.
169
170 {{warning}}
171 Please do not leave your header cells empty.
172 {{/warning}}
173
174 ===== **How to define header cells in the Tiny MCE text editor** =====
175
176 [[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"]]
177
178
179 ===== **How to mark header cells in HTML** =====
180
181 {{code language="html" layout="LINENUMBERS"}}
182 <table>
183 <caption>presentations on group work</caption>
184 <thead>
185 <tr>
186 <th scope="col">date</th>
187 <th scope="col">time</th>
188 <th scope="col">topic</th>
189 <th scope="col">place</th>
190 </tr>
191 </thead>
192 <tbody>
193 <tr>
194 <td>04.03.</td>
195 <td>10 - 11 a.m.</td>
196 <td>sustainability<td>
197 <td>room3b</td>
198 </tr>
199
200 ...
201
202 </tbody>
203 </table>
204 {{/code}}
205
206 {{panel title="Further information"}}
207 * [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]]
208 * [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
209 {{/panel}}
210
211 == How can texts be made easy to read? ==
212
213 Font, font size, character and word spacing, line length and many other factors influence the readability of texts.
214
215 * Make sure to use **common fonts** (like Arial) and avoid fancy or hard-to-read ones.
216 * 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.
217 * The **line spacing** should be at least 120% of the font size, preferably 150%.
218 * The **line length** should be between 45 and 80 characters per line, including punctuation and spaces.
219
220 Please keep in mind that font size, line spacing, and line length depend on both the font and the device you're using.
221
222 {{info}}
223 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.
224 {{/info}}
225
226 {{panel title="Further information"}}
227 * [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]]
228 * [[Font size calculator (legibility.info)>>url:https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index.php||shape="rect"]]
229 {{/panel}}
230
231
232 == How should links be set? ==
233
234 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.
235
236 {{info}}
237 A link has to stand on its own and still describe the destination or purpose well enough.
238 {{/info}}
239
240
241 == What should be considered when using media? ==
242
243 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.
244
245 Here are some tips you might find useful regarding accessibility and mobile compatibility.
246
247 === File size ===
248
249 * For photos, JPEG format should be preferred and medium to high quality should be selected depending on the image content.
250 * Images should not exceed a file size of 100-200kB.
251 * Save the images directly in the required image size (width x height) with a resolution of 72 dpi.
252 * For very large files, such as videos, we recommend embedding them via an external tool (e.g. Videocampus Sachsen, YouTube, Vimeo, etc.).
253
254 {{info}}
255 Common image editing programmes and online tools can help to compress images without any visible loss of quality.
256 {{/info}}
257
258 === Captions ===
259
260 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.
261
262 Use the following HTML code to make the image and image title accessible:
263
264 **Caption with the HTML elements figure and figcaption**
265
266 {{code language="html" layout="LINENUMBERS"}}
267 <figure>
268 <img src="..." alt="alternative text">
269 <figcaption>title / caption</figcaption>
270 </figure>
271 {{/code}}
272
273 === Alternative text (alt text) ===
274
275 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.
276
277 **The following should be kept in mind when providing alt text for images:**
278
279 * Keep it short: The alternative text should only contain the most important information. A useful guideline is 125 characters.
280 * Describing information: Only describe information that is relevant to the context (e.g. the text) and that the image is intended to convey.
281 * 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.
282
283 {{info}}
284 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?
285 {{/info}}
286
287
288 ==== How to store alternative text in the Tiny MCE text editor ====
289
290 [[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
291
292
293 ==== HTML code for alt text ====
294
295 {{code}}
296 <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
297 {{/code}}
298
299 ==== How to mark an image as decorative ====
300
301 [[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
302
303
304 **How to empty the alt attribute for images without relevant information in HTML**
305
306 {{code}}
307 <img src="..." alt=" " />
308 {{/code}}
309
310 {{info}}
311 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"]].
312 {{/info}}
313
314 {{panel title="Further information"}}
315 * 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"]]
316 * [[How to write better alt-text descriptions for accessibility>>url:https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/||shape="rect"]]
317 * [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
318 {{/panel}}
319
320 === Optimizing images for smartphones and tablets ===
321
322 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.
323
324 HTML code for max-width
325
326 {{code language="html"}}
327 <img src="..." style="max-width: 100%" />
328 {{/code}}
329
330 === Providing alternatives for videos and audio files ===
331
332 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.
333
334 * Provide alternative content or a transcript if you use audio files such as podcasts.
335 * Provide subtitles and sign language translation for video content.
336 * Integrate media from external platforms, such as YouTube or[[ Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]]
337
338 {{info}}
339 On video platforms such as YouTube and Vimeo, subtitles are generated automatically. You can edit them if you need to.
340 {{/info}}
341
342 {{panel title="Further information"}}
343 [[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"]]
344 {{/panel}}
345
346
347 == Colours & contrasts ==
348
349 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"]]).
350
351 {{error}}
352 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.
353 {{/error}}
354
355 **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’.
356
357 {{panel title="Further information"}}
358 * [[Contrast calculator from leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
359 * [[Choose your colours with color.review (EN)>>url:https://color.review/||shape="rect"]]
360 * [[Check your contrasts with the WCAG contrast checker (EN)>>url:https://contrastchecker.com/||shape="rect"]]
361 {{/panel}}
362
363
364 == Useful tools ==
365
366 * Check websites with [[WAVE Toolbar>>url:https://wave.webaim.org/||shape="rect"]].
367 ** [[WAVE für Google Chrome>>url:https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh||shape="rect"]] (browser extension)
368 ** [[WAVE für Firefox>>url:https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/||shape="rect"]] (browser extension)
369 * Free open source screen reader for Windows: [[NVDA download>>url:https://www.nvaccess.org/download/||shape="rect"]]
370 * [[Checkliste: barrierefreie PDF-Dokumente>>url:https://www.einfach-fuer-alle.de/artikel/checkliste-barrierefreie-pdf/||shape="rect"]] from Einfach für alle