Änderungen von Dokument Erstellung barrierefreier Inhalte

Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Inhalt

...	...	@@ -33,32 +33,8 @@
33	33	{{/column}}
34	34	{{/section}}
35	35
36		-== Kursbezogene Barrierefreiheitserklärung ==
	36	+== Wie strukturiere ich Inhalte? ==
37	37
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.
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		-{{panel title="Weiterführende Informationen"}}
52		-* Tool **LMS Check Generator für Barrierefreiheit** der TU Dresden: [[https:~~/~~/lms-check.inf.tu-dresden.de/checklist>>url:https://lms-check.inf.tu-dresden.de/checklist]]
53		-* Informationen des Bundes zu Barrierefreiheitserklärungen für Web- und App-Anwendungen: [[https:~~/~~/www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it>>https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/uebergreifende-anforderungen-web-und-app/erklaerung-zur-barrierefreiheit/erklaerung-zur-barrierefreiheit-node.html]]
54		-{{/panel}}
55		-
56		-
57		-
58		-== Tipps zur Gestaltung von Inhalten ==
59		-
60		-=== Wie strukturiere ich Inhalte? ===
61		-
62	62	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.
63	63
64	64	{{info}}
...	...	@@ -65,20 +65,17 @@
65	65	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.
66	66	{{/info}}
67	67
	44	+=== Überschriften ===
68	68
69		-==== **Überschriften** ====
70		-
71	71	Ü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.
72	72
73	73
74		-(% class="wikigeneratedid" id="HFormateimTexteditorTinyMCEnutzen" %)
75		-Formate im Texteditor Tiny MCE nutzen:
	49	+==== Formate im Texteditor Tiny MCE nutzen ====
76	76
77	77	[[image:attach:Texteditor-Formate-Überschriften_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
78	78
79	79
80		-(% class="wikigeneratedid" id="HHTML-CodefFCrDCberschriften" %)
81		-HTML-Code für Überschriften:
	54	+==== HTML-Code für Überschriften ====
82	82
83	83	{{code language="xml"}}
84	84	<h1>Überschrift 1. Ordnung</h1>
...	...	@@ -89,21 +89,15 @@
89	89	<h6>Überschrift 6. Ordnung</h6>
90	90	{{/code}}
91	91
	65	+=== Absätze und Hervorhebungen ===
92	92
93		-
94		-==== **Absätze und Hervorhebungen** ====
95		-
96	96	Absätze, Gestaltung von Zitaten oder Hervorhebungen durch umrahmte Textabschnitte helfen, einen Text aufzulockern und bei Bedarf zu den relevanten Informationen zu springen.
97	97
	69	+==== Formate im Texteditor Tiny MCE nutzen ====
98	98
99		-
100		-(% class="wikigeneratedid" id="HFormateimTexteditorTinyMCEnutzen-1" %)
101		-Formate im Texteditor Tiny MCE nutzen:
102		-
103	103	[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
104	104
105		-(% class="wikigeneratedid" id="HHTML-CodefFCrAbsE4tze" %)
106		-HTML-Code für Absätze:
	73	+==== HTML-Code für Absätze ====
107	107
108	108	{{code language="xml"}}
109	109	<p>Absatz</p>
...	...	@@ -115,22 +115,18 @@
115	115	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.
116	116	{{/warning}}
117	117
	85	+=== Listen ===
118	118
119		-
120		-==== **Listen** ====
121		-
122	122	(% 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.
123	123
124	124	{{column}}
125		-(% class="wikigeneratedid wikigeneratedheader" id="HListenimTexteditorTinyMCEnutzen" %)
126		-Listen im Texteditor Tiny MCE nutzen:
	90	+==== Listen im Texteditor Tiny MCE nutzen ====
127	127
128	128	[[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
129	129	{{/column}}
130	130
131	131	{{column}}
132		-(% class="wikigeneratedid wikigeneratedheader" id="HHTML-CodefFCrListen" %)
133		-HTML-Code für Listen:
	96	+==== HTML-Code für Listen ====
134	134
135	135	{{code language="xml" title="Ungeordnete Liste (unordered list <ul>)"}}
136	136	<ul>
...	...	@@ -152,10 +152,9 @@
152	152	{{/column}}
153	153
154	154
155		-==== **Tabellen** ====
	118	+=== Tabellen ===
156	156
157		-(% class="wikigeneratedid" id="HVerwendungvonTabellen" %)
158		-**Verwendung von Tabellen**:
	120	+==== Verwendung von Tabellen ====
159	159
160	160	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).
161	161
...	...	@@ -165,19 +165,17 @@
165	165	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.
166	166	{{/info}}
167	167
168		-(% class="wikigeneratedid" id="HTabellenFCberschrift28Caption29" %)
169		-**Tabellenüberschrift (Caption):**
	130	+==== Tabellenüberschrift (Caption) ====
170	170
171	171	Jede Tabelle sollte eine Überschrift besitzen, die den Inhalt kurz zusammenfasst. Für diese Anforderung kann das HTML-Element <caption> genutzt werden.
172	172
173	173	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.
174	174
	136	+===== **Tabellenbeschriftung im Texteditor Tiny MCE aktivieren** =====
175	175
176		-Tabellenbeschriftung im Texteditor Tiny MCE aktivieren:
177		-
178	178	[[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"]]
179	179
180		-Caption im HTML einfügen:
	140	+===== **Caption im HTML einfügen** =====
181	181
182	182	{{code language="html" layout="LINENUMBERS"}}
183	183	<table>
...	...	@@ -187,7 +187,7 @@
187	187	{{/code}}
188	188
189	189
190		-**Spalten- und Zeilenüberschriften**
	150	+==== Spalten- und Zeilenüberschriften ====
191	191
192	192	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>.
193	193
...	...	@@ -204,14 +204,13 @@
204	204	Lassen Sie Kopfzellen niemals leer.
205	205	{{/warning}}
206	206
	167	+===== **Kopfzellen im Texteditor Tiny MCE definieren** =====
207	207
208		-
209		-Kopfzellen im Texteditor Tiny MCE definieren:
210		-
211	211	[[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"]]
212	212
213		-Kopfzellen im HTML auszeichnen:
214	214
	172	+===== **Kopfzellen im HTML auszeichnen** =====
	173	+
215	215	{{code language="html" layout="LINENUMBERS"}}
216	216	<table>
217	217	<caption>Vorträge zu den Gruppenarbeiten</caption>
...	...	@@ -242,10 +242,8 @@
242	242	* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
243	243	{{/panel}}
244	244
	204	+== Wie werden Texte gut lesbar? ==
245	245
246		-
247		-=== Wie werden Texte gut lesbar? ===
248		-
249	249	Schriftart, Schriftgröße, Zeichen- und Wortabstände, Zeilenlänge und vieles weitere haben einen Einfluss auf die Lesbarkeit von Texten.
250	250
251	251	* Bleiben Sie bei geläufigen **Standardschriftarten** (z.B. Arial) und vermeiden Sie verzierte, ausgefallene Schriftarten oder Schreibschriften.
...	...	@@ -265,7 +265,7 @@
265	265	{{/panel}}
266	266
267	267
268		-=== Wie sollten Links gesetzt werden? ===
	225	+== Wie sollten Links gesetzt werden? ==
269	269
270	270	(% 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.
271	271
...	...	@@ -274,13 +274,13 @@
274	274	{{/info}}
275	275
276	276
277		-=== Was ist beim Einsatz von Medien zu beachten? ===
	234	+== Was ist beim Einsatz von Medien zu beachten? ==
278	278
279	279	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.
280	280
281	281	Wir haben für Sie einige Tipps mit Blick auf Barrierefreiheit und Mobilfähigkeit zusammengefasst.
282	282
283		-==== Dateigröße ====
	240	+=== Dateigröße ===
284	284
285	285	* Für Fotos sollte das Format JPEG bevorzugt und je nach Bildinhalt mittlere bis hohe Qualität gewählt werden.
286	286	* Bilder sollten eine Dateigröße von 100-200kB nicht überschreiten.
...	...	@@ -291,13 +291,13 @@
291	291	Gängige Bildbearbeitungsprogramme aber auch Online-Tools können bei der Komprimierung von Bildern ohne sichtbare Qualitätsverluste helfen.
292	292	{{/info}}
293	293
294		-==== Bildunterschrift ====
	251	+=== Bildunterschrift ===
295	295
296	296	Die Bildunterschrift bzw. der Bildtitel stellt eine zusätzliche Beschreibung zum Bild dar. Ein Bildtitel ist notwendig, wenn wichtige Informationen zum Bild vermittelt werden sollen. Im Gegensatz zur Bildbeschreibung (Alternativtext) ist der Bildtitel auch für Sehende zugänglich.
297	297
298	298	Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
299	299
300		-Bildunterschrift mit den HTML-Elementen figure und figcaption:
	257	+**Bildunterschrift mit den HTML-Elementen figure und figcaption**
301	301
302	302	{{code language="html" layout="LINENUMBERS"}}
303	303	<figure>
...	...	@@ -306,10 +306,8 @@
306	306	</figure>
307	307	{{/code}}
308	308
	266	+=== Alternativtext ===
309	309
310		-
311		-==== Alternativtext ====
312		-
313	313	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.
314	314
315	315	**Folgendes ist bei Alternativtexten für Bilder zu beachten:**
...	...	@@ -323,27 +323,24 @@
323	323	{{/info}}
324	324
325	325
326		-(% class="wikigeneratedid" id="HAlternativtextimTexteditorTinyMCEhinterlegen" %)
327		-Alternativtext im Texteditor Tiny MCE hinterlegen:
	281	+==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
328	328
329	329	[[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
330	330
331	331
332		-(% class="wikigeneratedid" id="HAlternativtextimHTMLhinterlegen" %)
333		-Alternativtext im HTML hinterlegen:
	286	+==== Alternativtext im HTML hinterlegen ====
334	334
335	335	{{code}}
336	336	<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
337	337	{{/code}}
338	338
339		-(% class="wikigeneratedid" id="HBildalsdekorativmarkieren" %)
340		-Bild als dekorativ markieren:
	292	+==== Bild als dekorativ markieren ====
341	341
342	342	[[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
343	343
344	344
345	345
346		-Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen
	298	+**Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen**
347	347
348	348	{{code}}
349	349	<img src="..." alt=" " />
...	...	@@ -359,10 +359,8 @@
359	359	* [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
360	360	{{/panel}}
361	361
	314	+=== Bilder für Smartphones und Tablets optimieren ===
362	362
363		-
364		-==== Bilder für Smartphones und Tablets optimieren ====
365		-
366	366	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.
367	367
368	368	**Mit max-width eine maximale Breite für Bilder setzen**
...	...	@@ -371,10 +371,8 @@
371	371	<img src="..." style="max-width: 100%" />
372	372	{{/code}}
373	373
	324	+=== Alternativen für Videos und Audio-Dateien bereitstellen ===
374	374
375		-
376		-==== Alternativen für Videos und Audio-Dateien bereitstellen ====
377		-
378	378	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.
379	379
380	380	* Bieten Sie alternativen Inhalt oder ein Transkript an, wenn Sie Audio-Dateien wie z.B. einen Podcast verwenden.