Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 23.02.2026
Von Version 231.1
bearbeitet von Katharina Schönefeld (Admin)
am 02.05.2024
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 259.1
bearbeitet von Carina Enke
am 20.02.2026
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.katharina
1 +XWiki.carina
Inhalt
... ... @@ -1,12 +1,11 @@
1 -{{layout}}
2 -{{layout-section ac:type="two_right_sidebar"}}
3 -{{layout-cell}}
1 +{{section}}
2 +{{column width="60%"}}
4 4  Webseiten müssen heute zahlreichen Anforderungen gerecht werden. Jede Person möchte mit jedem Gerät, an jedem Ort Informationen abrufen - ohne Einschränkungen, ohne Barrieren. Das Verwenden von mobilen Geräten mit kleineren Bildschirmen und ggf. langsamer Internetverbindung ist inzwischen selbstverständlich. Aber auch die Bedienbarkeit mit alternativen Technologien, z.B. Screenreadern, die mit Sprachausgabe und Tastaturbedienung funktionieren, muss gewährleistet sein.
5 5  
6 6  Um diesen vielseitigen Anforderungen gerecht zu werden und Informationen somit zugänglich für alle Menschen anzubieten, gibt es einiges zu beachten. Die grundlegenden Richtlinien zu den Themen Usability und Barrierefreiheit geben wichtige Orientierung.
7 7  
8 8  {{info title="**Usability**"}}
9 -Usability, Benutzerfreundlichkeit oder auch Gebrauchstauglichkeit wird in der Norm DIN EN ISO 9241-11 definiert. Ein System muss von bestimmten Benutzer*innen in einem bestimmten Nutzungskontext verwendet werden können, um Arbeitsaufgaben effektiv, effizient und zufriedenstellend zu erledigen und somit bestimmte Ziele zu erreichen.
8 +Usability, Benutzerfreundlichkeit oder auch Gebrauchstauglichkeit wird in der Norm DIN EN ISO 9241-11 definiert. Ein System muss von bestimmten Nutzenden in einem bestimmten Nutzungskontext verwendet werden können, um Arbeitsaufgaben effektiv, effizient und zufriedenstellend zu erledigen und somit bestimmte Ziele zu erreichen.
10 10  
11 11  Eine Einführung sowie viele weitere Informationen bietet die [[Webseite der Nielsen Norman Group (EN)>>url:https://www.nngroup.com/articles/usability-101-introduction-to-usability/||shape="rect"]].
12 12  {{/info}}
... ... @@ -17,32 +17,45 @@
17 17  Wichtig für das Verständnis des Bedarfs ist auch eine Übersicht über vorhandene Einschränkungen von Fähigkeiten und Behinderungen. [[Die W3C Web Accessibility Initiative (WAI) hat eine gute englischsprachige Übersicht über die vielfältigen Fähigkeiten und Barrieren.>>url:https://www.w3.org/WAI/people-use-web/abilities-barriers/||shape="rect"]] Bei Aktion Mensch gibt es einen kurzen [[Überblick über Behinderungsformen in deutscher Sprache>>url:https://www.aktion-mensch.de/inklusion/arbeit/fachkraefte-mit-behinderung-gewinnen/behinderungsformen||shape="rect"]].
18 18  {{/info}}
19 19  
19 +In OPAL und ONYX können Sie als Autorin oder Autor verschiedene Inhalte erstellen und gestalten. Unter anderem besteht die Möglichkeit, über den Texteditor Beschreibungen und Seiteninhalte im Kurs mit Informationen zu füllen. Wir haben einige Tipps und weiterführende Inhalte für Sie vorbereitet.
20 20  
21 -In OPAL und ONYX können Sie als Autor*in verschiedene Inhalte erstellen und gestalten. Unter anderem besteht die Möglichkeit, über den Texteditor Beschreibungen und Seiteninhalte im Kurs mit Informationen zu füllen. Wir haben einige Tipps und weiterführende Inhalte für Sie vorbereitet.
22 -
23 23  
24 -{{/layout-cell}}
22 +{{/column}}
25 25  
26 -{{layout-cell}}
24 +{{column width="30%"}}
27 27  {{panel title="Inhalt"}}
28 -{{toc depth="3" start="2"/}}
26 +{{toc start="2" depth="3"/}}
27 +{{/panel}}
29 29  
30 -**Verwandte Themen**
31 -
29 +{{panel title="Verwandte Themen"}}
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 34  {{/panel}}
35 -{{/layout-cell}}
36 -{{/layout-section}}
33 +{{/column}}
34 +{{/section}}
37 37  
38 -{{layout-section ac:type="single"}}
39 -{{layout-cell}}
40 -== Wie strukturiere ich Inhalte? ==
41 -{{/layout-cell}}
42 -{{/layout-section}}
36 +== Kursbezogene Barrierefreiheitserklärung ==
43 43  
44 -{{layout-section ac:type="two_right_sidebar"}}
45 -{{layout-cell}}
38 +Öffentliche Stellen, einschließlich staatlicher Hochschulen und Schulen, sind gesetzlich verpflichtet, für ihre digitalen Angebote eine Barrierefreiheitserklärung zu erstellen. Diese Erklärung beschreibt, inwieweit die Anforderungen an die Barrierefreiheit erfüllt sind und benennt gegebenenfalls nicht barrierefreie Bereiche. Weitere Informationen finden Sie auf der offiziellen Seite der [[Barrierefreiheitserklärung für Web- und App-Anwendungen des Bundes>>https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/uebergreifende-anforderungen-web-und-app/erklaerung-zur-barrierefreiheit/erklaerung-zur-barrierefreiheit-node.html]] .
39 +
40 +Eine Erklärung auf Softwareebene deckt zwar die Funktionen der Lernplattform ab, nicht jedoch die Inhalte einzelner Kurse. Da ein OPAL-Kurs jedoch wesentlich aus Lernmaterialien besteht, für die die Kursverantwortlichen zuständig sind, ist es sinnvoll, eine kursbezogene Barrierefreiheitserklärung bereitzustellen.
41 +
42 +
43 +Um Lehrenden die Erstellung einer solchen Erklärung zu erleichtern, stellt die** TU Dresden** den **LMS Check Generator für Barrierefreiheit** bereit. Das Tool ermöglicht Kursverantwortlichen:
44 +
45 +* die Erstellung einer kurs-spezifischen Erklärung zur Barrierefreiheit,
46 +* die Identifikation von möglichen Barrieren in Texten, Medien und interaktiven Inhalten,
47 +* die Unterstützung bei der barrierefreien Gestaltung der Lehrmaterialien.
48 +
49 +Das Tool leitet Schritt für Schritt durch die Erstellung der Erklärung. Der Verantwortliche wählt die im Kurs verwendeten Kursbausteine aus und erhält daraufhin eine Checkliste für die Inhalte. Die erzeugte Erklärung wird als barrierefreie HTML-Datei bereitgestellt und kann im Kurs über den Kursbaustein „Einzelne Seite“ als Seite eingebettet werden. So ist die Erklärung direkt im Kurs verfügbar und für Lernende gut auffindbar.
50 +
51 +Sie erreichen das Tool über den Link [[https:~~/~~/lms-check.inf.tu-dresden.de/checklist>>url:https://lms-check.inf.tu-dresden.de/checklist]]
52 +
53 +
54 +== Tipps zur Gestaltung von Inhalten ==
55 +
56 +=== Wie strukturiere ich Inhalte? ===
57 +
46 46  Bei der Strukturierung von Texten auf Webseiten oder in Dokumenten ist eine Orientierung an Büchern oder Artikeln sinnvoll. Die dort verwendeten Überschriften, Aufzählungen sowie ein Inhaltsverzeichnis und visuelle Hervorhebungen verbessern die Lesbarkeit, das Überfliegen bzw. Scannen mit den Augen und damit das schnelle Finden von relevanten Informationen. Außerdem helfen diese Elemente bei der Orientierung auf der Seite. Neben der visuellen Strukturierung über das Design ist auch eine technisch korrekte Strukturierung über passende HTML-Elemente notwendig. Dies ist besonders für die Barrierefreiheit relevant, da Screenreader und andere assistive Technologien basierend auf dem HTML-Code Informationen übermitteln und verschiedene Funktionen bereitstellen.
47 47  
48 48  {{info}}
... ... @@ -49,17 +49,20 @@
49 49  Der in OPAL integrierte [[Texteditor Tiny MCE>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]] unterstützt Sie bei der richtigen Strukturierung Ihrer Inhalte, ohne dass Sie sich HTML-Kenntnisse aneignen müssen.
50 50  {{/info}}
51 51  
52 -=== Überschriften ===
53 53  
65 +==== **Überschriften** ====
66 +
54 54  Überschriften sollten nicht über die Schriftgröße sowie z.B. über die Formatierung Fett/Bold gestaltet werden, sondern über die HTML-Elemente <h1>, <h2>, <h3> bis <h6>. Die Hierarchie der Elemente (z.B. <h2> folgt auf <h1>) muss dabei eingehalten werden.
55 55  
56 56  
57 -==== Formate im Texteditor Tiny MCE nutzen ====
70 +(% class="wikigeneratedid" id="HFormateimTexteditorTinyMCEnutzen" %)
71 +Formate im Texteditor Tiny MCE nutzen:
58 58  
59 -[[image:attach:Texteditor-Formate-Überschriften.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
73 +[[image:attach:Texteditor-Formate-Überschriften_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
60 60  
61 61  
62 -==== HTML-Code für Überschriften ====
76 +(% class="wikigeneratedid" id="HHTML-CodefFCrDCberschriften" %)
77 +HTML-Code für Überschriften:
63 63  
64 64  {{code language="xml"}}
65 65  <h1>Überschrift 1. Ordnung</h1>
... ... @@ -70,16 +70,22 @@
70 70  <h6>Überschrift 6. Ordnung</h6>
71 71  {{/code}}
72 72  
73 -=== Absätze und Hervorhebungen ===
74 74  
89 +
90 +==== **Absätze und Hervorhebungen** ====
91 +
75 75  Absätze, Gestaltung von Zitaten oder Hervorhebungen durch umrahmte Textabschnitte helfen, einen Text aufzulockern und bei Bedarf zu den relevanten Informationen zu springen.
76 76  
77 -==== Formate im Texteditor Tiny MCE nutzen ====
78 78  
79 -[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
80 80  
81 -==== HTML-Code nutzen ====
96 +(% class="wikigeneratedid" id="HFormateimTexteditorTinyMCEnutzen-1" %)
97 +Formate im Texteditor Tiny MCE nutzen:
82 82  
99 +[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
100 +
101 +(% class="wikigeneratedid" id="HHTML-CodefFCrAbsE4tze" %)
102 +HTML-Code für Absätze:
103 +
83 83  {{code language="xml"}}
84 84  <p>Absatz</p>
85 85  <blockquote>Zitat</blockquote>
... ... @@ -90,19 +90,22 @@
90 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 91  {{/warning}}
92 92  
93 -=== Listen ===
94 94  
115 +
116 +==== **Listen** ====
117 +
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.
96 96  
97 -{{section}}
98 98  {{column}}
99 -==== Listen im Texteditor Tiny MCE nutzen ====
121 +(% class="wikigeneratedid wikigeneratedheader" id="HListenimTexteditorTinyMCEnutzen" %)
122 +Listen im Texteditor Tiny MCE nutzen:
100 100  
101 101  [[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
102 102  {{/column}}
103 103  
104 104  {{column}}
105 -==== HTML-Code für Listen ====
128 +(% class="wikigeneratedid wikigeneratedheader" id="HHTML-CodefFCrListen" %)
129 +HTML-Code für Listen:
106 106  
107 107  {{code language="xml" title="Ungeordnete Liste (unordered list <ul>)"}}
108 108  <ul>
... ... @@ -123,12 +123,11 @@
123 123  {{/code}}
124 124  {{/column}}
125 125  
126 -
127 -{{/section}}
128 128  
129 -=== Tabellen ===
151 +==== **Tabellen** ====
130 130  
131 -==== Verwendung von Tabellen ====
153 +(% class="wikigeneratedid" id="HVerwendungvonTabellen" %)
154 +**Verwendung von Tabellen**:
132 132  
133 133  Verwenden Sie Tabellen ausschließlich, um Daten tabellarisch darzustellen. Tabellen sollten nicht verwendet werden, um Texte oder andere Inhalte aus optischen Gründen nebeneinander oder in "Spalten" anzuzeigen (Layout-Tabellen).
134 134  
... ... @@ -138,18 +138,20 @@
138 138  Auf Geräten mit schmalerem Bildschirm (z.B. Smartphones) und bei vergrößerter Darstellung (z.B. 300%) werden Tabellen oft nicht vollständig dargestellt. Inhalte sollten grundsätzlich nicht abgeschnitten angezeigt werden. Prüfen Sie die Darstellung mit verschiedenen Endgeräten und Vergrößerungsstufen und weisen Sie Tabellen nie eine absolute Breite (z.B. 700px) zu.
139 139  {{/info}}
140 140  
141 -==== Tabellenüberschrift (Caption) ====
164 +(% class="wikigeneratedid" id="HTabellenFCberschrift28Caption29" %)
165 +**Tabellenüberschrift (Caption):**
142 142  
143 143  Jede Tabelle sollte eine Überschrift besitzen, die den Inhalt kurz zusammenfasst. Für diese Anforderung kann das HTML-Element <caption> genutzt werden.
144 144  
145 145  Im Texteditor Tiny MCE können Sie über die **Tabelleneigenschaften **die Beschriftung der Tabelle aktivieren. Über der Tabelle erscheint dann ein Text, den Sie entsprechend Ihrer Inhalte anpassen können.
146 146  
147 -===== **Tabellenbeschriftung im Texteditor Tiny MCE aktivieren** =====
148 148  
149 -[[image:Texteditor-Tabellen-Beschriftung.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"]]
172 +Tabellenbeschriftung im Texteditor Tiny MCE aktivieren:
150 150  
151 -===== **Caption im HTML einfügen** =====
174 +[[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"]]
152 152  
176 +Caption im HTML einfügen:
177 +
153 153  {{code language="html" layout="LINENUMBERS"}}
154 154  <table>
155 155   <caption>Vorträge zu den Gruppenarbeiten</caption>
... ... @@ -158,7 +158,7 @@
158 158  {{/code}}
159 159  
160 160  
161 -==== Spalten- und Zeilenüberschriften ====
186 +**Spalten- und Zeilenüberschriften**
162 162  
163 163  Zellen für Überschriften (Kopfzellen) sollten von Datenzellen nicht nur per Design, sondern zusätzlich per HTML unterschieden werden. Kopfzellen in Tabellen werden daher mit dem HTML-Tag <th> ausgezeichnet, Datenzellen mit <td>.
164 164  
... ... @@ -175,12 +175,14 @@
175 175  Lassen Sie Kopfzellen niemals leer.
176 176  {{/warning}}
177 177  
178 -===== **Kopfzellen im Texteditor Tiny MCE definieren** =====
179 179  
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"]]
181 181  
182 -===== **Kopfzellen im HTML auszeichnen** =====
205 +Kopfzellen im Texteditor Tiny MCE definieren:
183 183  
207 +[[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"]]
208 +
209 +Kopfzellen im HTML auszeichnen:
210 +
184 184  {{code language="html" layout="LINENUMBERS"}}
185 185  <table>
186 186   <caption>Vorträge zu den Gruppenarbeiten</caption>
... ... @@ -206,25 +206,15 @@
206 206  </table>
207 207  {{/code}}
208 208  
209 -
210 -{{/layout-cell}}
211 -
212 -{{layout-cell}}
213 213  {{panel title="Weiterführende Informationen"}}
214 214  * [[Kommunikationsdesign für Menschen mit und ohne Sehbehinderung (leserlich.info)>>url:https://www.leserlich.info/||shape="rect"]]
215 -* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>url:https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
238 +* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
216 216  {{/panel}}
217 -{{/layout-cell}}
218 -{{/layout-section}}
219 219  
220 -{{layout-section ac:type="single"}}
221 -{{layout-cell}}
241 +
242 +
222 222  == Wie werden Texte gut lesbar? ==
223 -{{/layout-cell}}
224 -{{/layout-section}}
225 225  
226 -{{layout-section ac:type="two_right_sidebar"}}
227 -{{layout-cell}}
228 228  Schriftart, Schriftgröße, Zeichen- und Wortabstände, Zeilenlänge und vieles weitere haben einen Einfluss auf die Lesbarkeit von Texten.
229 229  
230 230  * Bleiben Sie bei geläufigen **Standardschriftarten** (z.B. Arial) und vermeiden Sie verzierte, ausgefallene Schriftarten oder Schreibschriften.
... ... @@ -234,33 +234,25 @@
234 234  
235 235  Beachten Sie bitte, dass u.a. Schriftgröße, Zeilenabstand und Zeilenlänge sowohl von der Schriftart, als auch vom verwendeten Endgerät abhängig sind.
236 236  
237 -{{info title="Tipp"}}
238 -Prüfen Sie die Lesbarkeit Ihrer Texte an verschiedenen Endgeräten und lassen Sie die Lesbarkeit durch andere Personen bewerten. Idealerweise von Ihren Nutzer*innen. Beziehen Sie Menschen mit Sehbehinderungen oder kognitiven Beeinträchtigungen sowie Lernbehinderungen ein.
254 +{{info}}
255 +Prüfen Sie die Lesbarkeit Ihrer Texte an verschiedenen Endgeräten und lassen Sie die Lesbarkeit durch andere Personen bewerten. Idealerweise von Ihren Nutzenden. Beziehen Sie Menschen mit Sehbehinderungen oder kognitiven Beeinträchtigungen sowie Lernbehinderungen ein.
239 239  {{/info}}
240 -{{/layout-cell}}
241 241  
242 -{{layout-cell}}
243 243  {{panel title="Weiterführende Informationen"}}
244 244  * [[Kommunikationsdesign für Menschen mit und ohne Sehbehinderung (leserlich.info)>>url:https://www.leserlich.info/||shape="rect"]]
245 245  * [[Schriftgrößenrechner>>url:https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index.php||shape="rect"]] von leserlich.info
246 246  {{/panel}}
247 -{{/layout-cell}}
248 -{{/layout-section}}
249 249  
250 -{{layout-section ac:type="single"}}
251 -{{layout-cell}}
263 +
252 252  == Wie sollten Links gesetzt werden? ==
253 253  
254 254  (% 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.
255 255  
256 256  {{info}}
257 -Tipp: Ein Link muss für sich alleine stehen können und das Ziel oder den Zweck trotzdem ausreichend beschreiben.
269 +Ein Link muss für sich alleine stehen können und das Ziel oder den Zweck trotzdem ausreichend beschreiben.
258 258  {{/info}}
259 -{{/layout-cell}}
260 -{{/layout-section}}
261 261  
262 -{{layout-section ac:type="single"}}
263 -{{layout-cell}}
272 +
264 264  == Was ist beim Einsatz von Medien zu beachten? ==
265 265  
266 266  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.
... ... @@ -284,19 +284,17 @@
284 284  
285 285  Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
286 286  
287 -**Bildunterschrift mit den HTML-Elementen figure und figcaption**
296 +Bildunterschrift mit den HTML-Elementen figure und figcaption:
288 288  
289 289  {{code language="html" layout="LINENUMBERS"}}
290 290  <figure>
291 - <img alt="Alternativtext">
300 + <img src="..." alt="Alternativtext">
292 292   <figcaption>Bildtitel / Bildunterschrift</figcaption>
293 293  </figure>
294 294  {{/code}}
295 -{{/layout-cell}}
296 -{{/layout-section}}
297 297  
298 -{{layout-section ac:type="two_right_sidebar"}}
299 -{{layout-cell}}
305 +
306 +
300 300  === Alternativtext ===
301 301  
302 302  Für Bilder, die relevant für den Inhalt einer Seite sind, sollte ein Alternativtext hinterlegt werden. Dieser wird u.a. von einem Screenreader ausgegeben und ist somit für blinde Menschen zugänglich. Aber auch wenn die Bilder auf der Seite deaktiviert sind oder aufgrund einer langsamen Internetverbindung nicht geladen werden, kann die Information trotz fehlendem Bild übermittelt werden.
... ... @@ -305,65 +305,64 @@
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) haben und idealerweise als Hintergrundbilder via CSS eingebunden werden.
315 +* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) erhalten. Im Texteditor können Sie diese Bilder als dekorativ markieren.
309 309  
310 310  {{info}}
311 -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?
318 +**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?
312 312  {{/info}}
313 313  
314 314  
315 -==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
322 +(% class="wikigeneratedid" id="HAlternativtextimTexteditorTinyMCEhinterlegen" %)
323 +Alternativtext im Texteditor Tiny MCE hinterlegen:
316 316  
317 -[[image:attach:Texteditor-Bildbeschreibung.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
325 +[[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
318 318  
319 319  
320 -==== Alternativtext im HTML hinterlegen ====
328 +(% class="wikigeneratedid" id="HAlternativtextimHTMLhinterlegen" %)
329 +Alternativtext im HTML hinterlegen:
321 321  
322 -**Alternativtext mit dem Attribut alt**
323 -
324 324  {{code}}
325 325  <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
326 326  {{/code}}
327 327  
328 -**Leeres alt-Attribut für Bilder ohne relevante Informationen**
335 +(% class="wikigeneratedid" id="HBildalsdekorativmarkieren" %)
336 +Bild als dekorativ markieren:
329 329  
338 +[[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
339 +
340 +
341 +
342 +Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen
343 +
330 330  {{code}}
331 -<img ... alt=" " />
345 + <img src="..." alt=" " />
332 332  {{/code}}
333 333  
334 334  {{info}}
335 335  Für Bilder sollte auch der Kontrast geprüft werden. Das Hauptobjekt im Bild sollte sich ausreichend vom Hintergrund abheben. Tipps erhalten Sie bei [[leserlich.info>>url:https://www.leserlich.info/kapitel/bilder.php||shape="rect"]].
336 336  {{/info}}
337 -{{/layout-cell}}
338 338  
339 -{{layout-cell}}
340 340  {{panel title="Weiterführende Informationen"}}
341 341  * Empfehlungen, wie gute Alternativtexte und Bildbeschreibungen verfasst werden in der [[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"]]
342 342  * [[How to write better alt-text descriptions for accessibility>>url:https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/||shape="rect"]]
343 343  * [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
344 344  {{/panel}}
345 -{{/layout-cell}}
346 -{{/layout-section}}
347 347  
348 -{{layout-section ac:type="single"}}
349 -{{layout-cell}}
358 +
359 +
350 350  === Bilder für Smartphones und Tablets optimieren ===
351 351  
352 -Damit Bilder auf Geräten mit kleineren Bildschirmen vollständig dargestellt werden, ohne das Nutzer*innen horizontal scrollen müssen, sollte die maximale Breite im HTML auf 100% begrenzt werden. Dadurch wird das Bild nur so lange in der gewählten Größe dargestellt, bis es breiter ist, als der verfügbare Platz auf dem Bildschirm. Danach wird es dynamisch an die verfügbare Breite angepasst.
362 +Damit Bilder auf Geräten mit kleineren Bildschirmen vollständig dargestellt werden, ohne das Nutzenden horizontal scrollen müssen, sollte die maximale Breite im HTML auf 100% begrenzt werden. Dadurch wird das Bild nur so lange in der gewählten Größe dargestellt, bis es breiter ist, als der verfügbare Platz auf dem Bildschirm. Danach wird es dynamisch an die verfügbare Breite angepasst.
353 353  
354 354  **Mit max-width eine maximale Breite für Bilder setzen**
355 355  
356 356  {{code language="html"}}
357 -<img ... style="max-width: 100%" />
367 + <img src="..." style="max-width: 100%" />
358 358  {{/code}}
359 -{{/layout-cell}}
360 -{{/layout-section}}
361 361  
362 -{{layout-section ac:type="two_right_sidebar"}}
363 -{{layout-cell}}
364 -(% id="HAlternativenfFCrVideosundAudio-Dateienbereitstellen" class="auto-cursor-target" %)
365 -=== Alternativen für Videos und Audio-Dateien bereitstellen ===
370 +(% class="wikigeneratedid" %)
366 366  
372 +
367 367  === Alternativen für Videos und Audio-Dateien bereitstellen ===
368 368  
369 369  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.
... ... @@ -375,23 +375,14 @@
375 375  {{info}}
376 376  Auf Videoplattformen wie YouTube und Vimeo werden Untertitel automatisch erzeugt. Diese können bei Bedarf korrigiert werden.
377 377  {{/info}}
378 -{{/layout-cell}}
379 379  
380 -{{layout-cell}}
381 381  {{panel title="Weiterführende Informationen"}}
382 382  [[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"]]
383 383  {{/panel}}
384 -{{/layout-cell}}
385 -{{/layout-section}}
386 386  
387 -{{layout-section ac:type="single"}}
388 -{{layout-cell}}
389 +
389 389  == Farben & Kontraste ==
390 -{{/layout-cell}}
391 -{{/layout-section}}
392 392  
393 -{{layout-section ac:type="two_right_sidebar"}}
394 -{{layout-cell}}
395 395  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"]]).
396 396  
397 397  {{error}}
... ... @@ -398,21 +398,15 @@
398 398  (% style="color:#333333" %)Vermeiden Sie kritische Farbkombinationen wie z. B. Rot auf Grün oder Schwarz, da diese von manchen Menschen schlecht wahrgenommen werden können. Auch grelle Farben und blinkende Elemente sollen vermieden werden.
399 399  {{/error}}
400 400  
401 -(% class="auto-cursor-target" %)
402 402  Farbe sollte weiterhin **nie als einzige Hervorhebung** einer Information genutzt werden. Ergänzen Sie z.B. bei Hinweis- oder Fehlermeldungen ein gut erkennbares Icon sowie einen zusätzlichen Texthinweis. Verzichten Sie auf Anleitungen oder Beschreibungen, die sich nur auf eine Farbe oder andere visuelle Eindrücke beziehen, z.B. "Klicken Sie auf den grünen Button".
403 -{{/layout-cell}}
404 404  
405 -{{layout-cell}}
406 406  {{panel title="Weiterführende Informationen"}}
407 407  * [[Kontrastrechner von leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
408 408  * [[Farben auswählen mit color.review (EN)>>url:https://color.review/||shape="rect"]]
409 409  * [[Kontraste prüfen mit dem WCAG contrast checker (EN)>>url:https://contrastchecker.com/||shape="rect"]]
410 410  {{/panel}}
411 -{{/layout-cell}}
412 -{{/layout-section}}
413 413  
414 -{{layout-section ac:type="single"}}
415 -{{layout-cell}}
406 +
416 416  == Nützliche Werkzeuge ==
417 417  
418 418  * Webseiten prüfen mit der [[WAVE Toolbar>>url:https://wave.webaim.org/||shape="rect"]].
... ... @@ -420,6 +420,3 @@
420 420  ** [[WAVE für Firefox>>url:https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/||shape="rect"]] (Browser-Erweiterung)
421 421  * Kostenfreier OpenSource Screenreader für Windows: [[NVDA herunterladen>>url:https://www.nvaccess.org/download/||shape="rect"]]
422 422  * [[Checkliste: barrierefreie PDF-Dokumente>>url:https://www.einfach-fuer-alle.de/artikel/checkliste-barrierefreie-pdf/||shape="rect"]] von Einfach für alle
423 -{{/layout-cell}}
424 -{{/layout-section}}
425 -{{/layout}}
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-Formate-Absätze-Hervorhebungen_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +35.7 KB
Inhalt
Texteditor-Formate-Überschriften_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +38.9 KB
Inhalt
Texteditor-Tabellen-Beschriftung_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +282.6 KB
Inhalt
Texteditor-Tabellen-Zelleneigenschaften-Typ-Gültigkeitsbereich_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +13.2 KB
Inhalt
Texteditor-Tabellen-Zelleneigenschaften_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.carina
Größe
... ... @@ -1,0 +1,1 @@
1 +50.0 KB
Inhalt