Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 26.11.2025
Von Version 215.1
bearbeitet von Katharina Schönefeld (Admin)
am 29.02.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 234.1
bearbeitet von Katharina Schönefeld (Admin)
am 02.05.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -24,14 +24,14 @@
24 24  {{/layout-cell}}
25 25  
26 26  {{layout-cell}}
27 -{{panel title="Inhalt"}}
28 -{{toc start="2"/}}
27 +**Inhalt**
29 29  
29 +{{toc depth="3"/}}
30 +
30 30  **Verwandte Themen**
31 31  
32 32  * [[Texteditor>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]]
33 33  * [[Kurslayout in OPAL>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurseinstellungen.Kurslayout.WebHome]]
34 -{{/panel}}
35 35  {{/layout-cell}}
36 36  {{/layout-section}}
37 37  
... ... @@ -86,11 +86,10 @@
86 86  
87 87  {{/code}}
88 88  
89 -{{error}}
90 -(% style="color:#333333" %)Die Elemente <div> und <span> haben keine Bedeutung (Semantik) und sollten nur verwendet werden, um z.B. die Gestaltung per CSS oder dynamische Anpassungen per JavaScript zu realisieren.
91 -{{/error}}
89 +{{warning}}
90 +Die Elemente <div> und <span> haben keine Bedeutung (Semantik) und sollten nur verwendet werden, um z.B. die Gestaltung per CSS oder dynamische Anpassungen per JavaScript zu realisieren.
91 +{{/warning}}
92 92  
93 -
94 94  === Listen ===
95 95  
96 96  (% style="color:#333333" %)Listen können verwendet werden, um Informationen übersichtlich, kurz und knapp darzustellen. Wählen Sie zwischen ungeordneten und geordneten bzw. nummerierten Aufzählungen.
... ... @@ -172,9 +172,13 @@
172 172  * Wählen Sie "Spalte" bei der Option "Gültigkeitsbereich" aus.
173 173  * Wiederholen Sie die Aktion, falls Sie neben Spaltenüberschriften auch Zeilenüberschriften nutzen. In diesem Fall wählen Sie bei der Option "Gültigkeitsbereich" "Zeile" aus.
174 174  
174 +{{warning}}
175 +Lassen Sie Kopfzellen niemals leer.
176 +{{/warning}}
177 +
175 175  ===== **Kopfzellen im Texteditor Tiny MCE definieren** =====
176 176  
177 -[[image:Texteditor-Tabellen-Beschriftung.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" width="500"]]
180 +[[image:Texteditor-Tabellen-Zelleneigenschaften.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" width="500"]] [[image:Texteditor-Tabellen-Zelleneigenschaften-Typ-Gültigkeitsbereich.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="314" width="320"]]
178 178  
179 179  ===== **Kopfzellen im HTML auszeichnen** =====
180 180  
... ... @@ -202,6 +202,8 @@
202 202   </tbody>
203 203  </table>
204 204  {{/code}}
208 +
209 +
205 205  {{/layout-cell}}
206 206  
207 207  {{layout-cell}}
... ... @@ -281,9 +281,9 @@
281 281  
282 282  **Bildunterschrift mit den HTML-Elementen figure und figcaption**
283 283  
284 -{{code language="html" layout="LINENUMBERS" clean="false"}}
289 +{{code language="html" layout="LINENUMBERS"}}
285 285  <figure>
286 - <img data-cke-saved-src="..." src="..." alt="Alternativtext">
291 + <img alt="Alternativtext">
287 287   <figcaption>Bildtitel / Bildunterschrift</figcaption>
288 288  </figure>
289 289  {{/code}}
... ... @@ -300,28 +300,30 @@
300 300  
301 301  * Kurz halten: Der Alternativtext sollte nur die wichtigsten Informationen enthalten. Grobe Richtlinie: 125 Zeichen.
302 302  * Informationen beschreiben: Nur die für den Kontext (z.B. den Text) relevanten Informationen, die das Bild übermitteln soll, beschreiben.
303 -* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) haben und idealerweise als Hintergrundbilder via CSS eingebunden werden.
308 +* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) erhalten. Im Texteditor können Sie diese Bilder als dekorativ markieren.
304 304  
305 305  {{info}}
306 -Tipp: Stellen Sie sich vor, Sie würden das Bild einer Person am Telefon beschreiben. Welche Details erwähnen Sie, welche lassen Sie aus, da sie im Kontext nicht relevant sind?
311 +**Tipp für gute Alternativtexte:** Stellen Sie sich vor, Sie würden das Bild einer Person am Telefon beschreiben. Welche Details erwähnen Sie, welche lassen Sie aus, da sie im Kontext nicht relevant sind?
307 307  {{/info}}
308 308  
309 309  
310 310  ==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
311 311  
312 -[[image:attach:Texteditor-Bildbeschreibung.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
317 +[[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
313 313  
314 314  
315 315  ==== Alternativtext im HTML hinterlegen ====
316 316  
317 -**Alternativtext mit dem Attribut alt**
318 -
319 319  {{code}}
320 320  <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
321 321  {{/code}}
322 322  
323 -**Leeres alt-Attribut für Bilder ohne relevante Informationen**
326 +==== Bild als dekorativ markieren ====
324 324  
328 +[[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
329 +
330 +**Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen**
331 +
325 325  {{code}}
326 326  <img ... alt=" " />
327 327  {{/code}}
... ... @@ -356,7 +356,6 @@
356 356  
357 357  {{layout-section ac:type="two_right_sidebar"}}
358 358  {{layout-cell}}
359 -(% id="HAlternativenfFCrVideosundAudio-Dateienbereitstellen" class="auto-cursor-target" %)
360 360  === Alternativen für Videos und Audio-Dateien bereitstellen ===
361 361  
362 362  Beim Einsatz von Medien sollten die Informationen stets auch in einer alternativen Form angeboten werden. Neben der Bildbeschreibung (Alternativtext) für Bilder sollte an reine Audio-Inhalte (z.B. Podcasts) und Video-Inhalte mit Bild und Ton gedacht werden.
Texteditor-Bildbeschreibung.png
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.XWikiGuest
1 +XWiki.carina
Größe
... ... @@ -1,1 +1,1 @@
1 -86.4 KB
1 +210.2 KB
Inhalt
Texteditor-Bilder-Alternativtext.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.katharina
Größe
... ... @@ -1,0 +1,1 @@
1 +78.1 KB
Inhalt
Texteditor-Bilder-dekorativ.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.katharina
Größe
... ... @@ -1,0 +1,1 @@
1 +5.8 KB
Inhalt
Texteditor-Tabellen-Zelleneigenschaften-Typ-Gültigkeitsbereich.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.katharina
Größe
... ... @@ -1,0 +1,1 @@
1 +9.3 KB
Inhalt
Texteditor-Tabellen-Zelleneigenschaften.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.katharina
Größe
... ... @@ -1,0 +1,1 @@
1 +20.9 KB
Inhalt