Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 24.11.2025
Von Version 236.1
bearbeitet von Carina Enke
am 12.08.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 235.2
bearbeitet von Carina Enke
am 12.08.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -30,7 +30,6 @@
30 30  * [[Kurslayout in OPAL>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurseinstellungen.Kurslayout.WebHome]]
31 31  {{/panel}}
32 32  {{/column}}
33 -
34 34  {{/section}}
35 35  
36 36  
... ... @@ -87,6 +87,7 @@
87 87  
88 88  (% 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.
89 89  
89 +
90 90  {{column}}
91 91  ==== Listen im Texteditor Tiny MCE nutzen ====
92 92  
... ... @@ -115,7 +115,9 @@
115 115  {{/code}}
116 116  {{/column}}
117 117  
118 +
118 118  
120 +
119 119  === Tabellen ===
120 120  
121 121  ==== Verwendung von Tabellen ====
... ... @@ -196,6 +196,8 @@
196 196  </table>
197 197  {{/code}}
198 198  
201 +
202 +
199 199  {{panel title="Weiterführende Informationen"}}
200 200  * [[Kommunikationsdesign für Menschen mit und ohne Sehbehinderung (leserlich.info)>>url:https://www.leserlich.info/||shape="rect"]]
201 201  * [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>url:https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
... ... @@ -221,7 +221,6 @@
221 221  * [[Schriftgrößenrechner>>url:https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index.php||shape="rect"]] von leserlich.info
222 222  {{/panel}}
223 223  
224 -
225 225  == Wie sollten Links gesetzt werden? ==
226 226  
227 227  (% style="color:#333333" %)Texte für Verlinkungen brauchen eine aussagekräftige Bezeichnung und sollten den Zweck bzw. das Ziel des Links beschreiben. Mehrdeutige Link-Texte wie "mehr", "hier" oder "weiter lesen" sollten vermieden werden. Relevante Informationen über das Format oder die Größe einer Datei (z.B. bei einem Download-Link) sollten ebenfalls im verlinkten Text berücksichtigt werden.
... ... @@ -230,7 +230,6 @@
230 230  Tipp: Ein Link muss für sich alleine stehen können und das Ziel oder den Zweck trotzdem ausreichend beschreiben.
231 231  {{/info}}
232 232  
233 -
234 234  == Was ist beim Einsatz von Medien zu beachten? ==
235 235  
236 236  Grundsätzlich sollte bei der Verwendung von Medien neben Speicherverbrauch und Ladezeiten auch die Nutzbarkeit unterwegs, z.B. mit einem Smartphone und schlechter Internetverbindung bedacht werden. Außerdem sollten Informationen stets auch über einen zweiten Weg, z.B. Text zugänglich sein.
... ... @@ -258,7 +258,7 @@
258 258  
259 259  {{code language="html" layout="LINENUMBERS"}}
260 260  <figure>
261 - <img src="..." alt="Alternativtext">
263 + <img alt="Alternativtext">
262 262   <figcaption>Bildtitel / Bildunterschrift</figcaption>
263 263  </figure>
264 264  {{/code}}
... ... @@ -293,12 +293,10 @@
293 293  
294 294  [[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
295 295  
296 -
297 -
298 298  **Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen**
299 299  
300 300  {{code}}
301 - <img src="..." alt=" " />
301 +<img ... alt=" " />
302 302  {{/code}}
303 303  
304 304  {{info}}
... ... @@ -318,7 +318,7 @@
318 318  **Mit max-width eine maximale Breite für Bilder setzen**
319 319  
320 320  {{code language="html"}}
321 - <img src="..." style="max-width: 100%" />
321 +<img ... style="max-width: 100%" />
322 322  {{/code}}
323 323  
324 324  === Alternativen für Videos und Audio-Dateien bereitstellen ===
... ... @@ -337,8 +337,6 @@
337 337  [[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"]]
338 338  {{/panel}}
339 339  
340 -
341 -
342 342  == Farben & Kontraste ==
343 343  
344 344  Achten sie bei der Auswahl von Farben auf **ausreichend Kontrast zwischen Hintergrund- und Textfarbe**. Grundsätzlich hat Schwarz auf Weiß das beste Kontrastverhältnis, generell sollte das **Verhältnis mindestens 4,5:1** betragen ([[WCAG 2.1 - Contrast>>url:https://www.w3.org/TR/WCAG21/#contrast-minimum||shape="rect"]]).
... ... @@ -355,7 +355,6 @@
355 355  * [[Kontraste prüfen mit dem WCAG contrast checker (EN)>>url:https://contrastchecker.com/||shape="rect"]]
356 356  {{/panel}}
357 357  
358 -
359 359  == Nützliche Werkzeuge ==
360 360  
361 361  * Webseiten prüfen mit der [[WAVE Toolbar>>url:https://wave.webaim.org/||shape="rect"]].
... ... @@ -363,3 +363,4 @@
363 363  ** [[WAVE für Firefox>>url:https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/||shape="rect"]] (Browser-Erweiterung)
364 364  * Kostenfreier OpenSource Screenreader für Windows: [[NVDA herunterladen>>url:https://www.nvaccess.org/download/||shape="rect"]]
365 365  * [[Checkliste: barrierefreie PDF-Dokumente>>url:https://www.einfach-fuer-alle.de/artikel/checkliste-barrierefreie-pdf/||shape="rect"]] von Einfach für alle
363 +