Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 24.11.2025
Von Version 234.1
bearbeitet von Katharina Schönefeld (Admin)
am 02.05.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 217.1
bearbeitet von Katharina Schönefeld (Admin)
am 29.02.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 -**Inhalt**
27 +{{panel title="Inhalt"}}
28 +{{toc start="2"/}}
28 28  
29 -{{toc depth="3"/}}
30 -
31 31  **Verwandte Themen**
32 32  
33 33  * [[Texteditor>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]]
34 34  * [[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,10 +86,11 @@
86 86  
87 87  {{/code}}
88 88  
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}}
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}}
92 92  
93 +
93 93  === Listen ===
94 94  
95 95  (% 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.
... ... @@ -171,10 +171,6 @@
171 171  * Wählen Sie "Spalte" bei der Option "Gültigkeitsbereich" aus.
172 172  * 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.
173 173  
174 -{{warning}}
175 -Lassen Sie Kopfzellen niemals leer.
176 -{{/warning}}
177 -
178 178  ===== **Kopfzellen im Texteditor Tiny MCE definieren** =====
179 179  
180 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"]]
... ... @@ -205,8 +205,6 @@
205 205   </tbody>
206 206  </table>
207 207  {{/code}}
208 -
209 -
210 210  {{/layout-cell}}
211 211  
212 212  {{layout-cell}}
... ... @@ -286,9 +286,9 @@
286 286  
287 287  **Bildunterschrift mit den HTML-Elementen figure und figcaption**
288 288  
289 -{{code language="html" layout="LINENUMBERS"}}
284 +{{code language="html" layout="LINENUMBERS" clean="false"}}
290 290  <figure>
291 - <img alt="Alternativtext">
286 + <img data-cke-saved-src="..." src="..." alt="Alternativtext">
292 292   <figcaption>Bildtitel / Bildunterschrift</figcaption>
293 293  </figure>
294 294  {{/code}}
... ... @@ -305,30 +305,28 @@
305 305  
306 306  * Kurz halten: Der Alternativtext sollte nur die wichtigsten Informationen enthalten. Grobe Richtlinie: 125 Zeichen.
307 307  * Informationen beschreiben: Nur die für den Kontext (z.B. den Text) relevanten Informationen, die das Bild übermitteln soll, beschreiben.
308 -* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) erhalten. Im Texteditor können Sie diese Bilder als dekorativ markieren.
303 +* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) haben und idealerweise als Hintergrundbilder via CSS eingebunden werden.
309 309  
310 310  {{info}}
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?
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?
312 312  {{/info}}
313 313  
314 314  
315 315  ==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
316 316  
317 -[[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
312 +[[image:attach:Texteditor-Bildbeschreibung.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
318 318  
319 319  
320 320  ==== Alternativtext im HTML hinterlegen ====
321 321  
317 +**Alternativtext mit dem Attribut alt**
318 +
322 322  {{code}}
323 323  <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
324 324  {{/code}}
325 325  
326 -==== Bild als dekorativ markieren ====
323 +**Leeres alt-Attribut für Bilder ohne relevante Informationen**
327 327  
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 -
332 332  {{code}}
333 333  <img ... alt=" " />
334 334  {{/code}}
... ... @@ -363,6 +363,7 @@
363 363  
364 364  {{layout-section ac:type="two_right_sidebar"}}
365 365  {{layout-cell}}
359 +(% 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.carina
1 +XWiki.XWikiGuest
Größe
... ... @@ -1,1 +1,1 @@
1 -210.2 KB
1 +86.4 KB
Inhalt
Texteditor-Bilder-Alternativtext.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.katharina
Größe
... ... @@ -1,1 +1,0 @@
1 -78.1 KB
Inhalt
Texteditor-Bilder-dekorativ.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.katharina
Größe
... ... @@ -1,1 +1,0 @@
1 -5.8 KB
Inhalt