Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 26.11.2025
Von Version 218.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.
... ... @@ -287,9 +287,9 @@
287 287  
288 288  **Bildunterschrift mit den HTML-Elementen figure und figcaption**
289 289  
290 -{{code language="html" layout="LINENUMBERS" clean="false"}}
289 +{{code language="html" layout="LINENUMBERS"}}
291 291  <figure>
292 - <img data-cke-saved-src="..." src="..." alt="Alternativtext">
291 + <img alt="Alternativtext">
293 293   <figcaption>Bildtitel / Bildunterschrift</figcaption>
294 294  </figure>
295 295  {{/code}}
... ... @@ -306,28 +306,30 @@
306 306  
307 307  * Kurz halten: Der Alternativtext sollte nur die wichtigsten Informationen enthalten. Grobe Richtlinie: 125 Zeichen.
308 308  * Informationen beschreiben: Nur die für den Kontext (z.B. den Text) relevanten Informationen, die das Bild übermitteln soll, beschreiben.
309 -* 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.
310 310  
311 311  {{info}}
312 -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?
313 313  {{/info}}
314 314  
315 315  
316 316  ==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
317 317  
318 -[[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"]]
319 319  
320 320  
321 321  ==== Alternativtext im HTML hinterlegen ====
322 322  
323 -**Alternativtext mit dem Attribut alt**
324 -
325 325  {{code}}
326 326  <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
327 327  {{/code}}
328 328  
329 -**Leeres alt-Attribut für Bilder ohne relevante Informationen**
326 +==== Bild als dekorativ markieren ====
330 330  
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 +
331 331  {{code}}
332 332  <img ... alt=" " />
333 333  {{/code}}
... ... @@ -362,7 +362,6 @@
362 362  
363 363  {{layout-section ac:type="two_right_sidebar"}}
364 364  {{layout-cell}}
365 -(% id="HAlternativenfFCrVideosundAudio-Dateienbereitstellen" class="auto-cursor-target" %)
366 366  === Alternativen für Videos und Audio-Dateien bereitstellen ===
367 367  
368 368  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