Änderungen von Dokument Erstellung barrierefreier Inhalte

Zusammenfassung

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

Details

Seiteneigenschaften

Inhalt

...	...	@@ -33,28 +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>>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		-
58	58	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.
59	59
60	60	{{info}}
...	...	@@ -61,20 +61,17 @@
61	61	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.
62	62	{{/info}}
63	63
	44	+=== Überschriften ===
64	64
65		-==== **Überschriften** ====
66		-
67	67	Ü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.
68	68
69	69
70		-(% class="wikigeneratedid" id="HFormateimTexteditorTinyMCEnutzen" %)
71		-Formate im Texteditor Tiny MCE nutzen:
	49	+==== Formate im Texteditor Tiny MCE nutzen ====
72	72
73	73	[[image:attach:Texteditor-Formate-Überschriften_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
74	74
75	75
76		-(% class="wikigeneratedid" id="HHTML-CodefFCrDCberschriften" %)
77		-HTML-Code für Überschriften:
	54	+==== HTML-Code für Überschriften ====
78	78
79	79	{{code language="xml"}}
80	80	<h1>Überschrift 1. Ordnung</h1>
...	...	@@ -85,21 +85,15 @@
85	85	<h6>Überschrift 6. Ordnung</h6>
86	86	{{/code}}
87	87
	65	+=== Absätze und Hervorhebungen ===
88	88
89		-
90		-==== **Absätze und Hervorhebungen** ====
91		-
92	92	Absätze, Gestaltung von Zitaten oder Hervorhebungen durch umrahmte Textabschnitte helfen, einen Text aufzulockern und bei Bedarf zu den relevanten Informationen zu springen.
93	93
	69	+==== Formate im Texteditor Tiny MCE nutzen ====
94	94
95		-
96		-(% class="wikigeneratedid" id="HFormateimTexteditorTinyMCEnutzen-1" %)
97		-Formate im Texteditor Tiny MCE nutzen:
98		-
99	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	100
101		-(% class="wikigeneratedid" id="HHTML-CodefFCrAbsE4tze" %)
102		-HTML-Code für Absätze:
	73	+==== HTML-Code für Absätze ====
103	103
104	104	{{code language="xml"}}
105	105	<p>Absatz</p>
...	...	@@ -111,22 +111,18 @@
111	111	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.
112	112	{{/warning}}
113	113
	85	+=== Listen ===
114	114
115		-
116		-==== **Listen** ====
117		-
118	118	(% 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.
119	119
120	120	{{column}}
121		-(% class="wikigeneratedid wikigeneratedheader" id="HListenimTexteditorTinyMCEnutzen" %)
122		-Listen im Texteditor Tiny MCE nutzen:
	90	+==== Listen im Texteditor Tiny MCE nutzen ====
123	123
124	124	[[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
125	125	{{/column}}
126	126
127	127	{{column}}
128		-(% class="wikigeneratedid wikigeneratedheader" id="HHTML-CodefFCrListen" %)
129		-HTML-Code für Listen:
	96	+==== HTML-Code für Listen ====
130	130
131	131	{{code language="xml" title="Ungeordnete Liste (unordered list <ul>)"}}
132	132	<ul>
...	...	@@ -148,10 +148,9 @@
148	148	{{/column}}
149	149
150	150
151		-==== **Tabellen** ====
	118	+=== Tabellen ===
152	152
153		-(% class="wikigeneratedid" id="HVerwendungvonTabellen" %)
154		-**Verwendung von Tabellen**:
	120	+==== Verwendung von Tabellen ====
155	155
156	156	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).
157	157
...	...	@@ -161,19 +161,17 @@
161	161	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.
162	162	{{/info}}
163	163
164		-(% class="wikigeneratedid" id="HTabellenFCberschrift28Caption29" %)
165		-**Tabellenüberschrift (Caption):**
	130	+==== Tabellenüberschrift (Caption) ====
166	166
167	167	Jede Tabelle sollte eine Überschrift besitzen, die den Inhalt kurz zusammenfasst. Für diese Anforderung kann das HTML-Element <caption> genutzt werden.
168	168
169	169	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.
170	170
	136	+===== **Tabellenbeschriftung im Texteditor Tiny MCE aktivieren** =====
171	171
172		-Tabellenbeschriftung im Texteditor Tiny MCE aktivieren:
173		-
174	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"]]
175	175
176		-Caption im HTML einfügen:
	140	+===== **Caption im HTML einfügen** =====
177	177
178	178	{{code language="html" layout="LINENUMBERS"}}
179	179	<table>
...	...	@@ -183,7 +183,7 @@
183	183	{{/code}}
184	184
185	185
186		-**Spalten- und Zeilenüberschriften**
	150	+==== Spalten- und Zeilenüberschriften ====
187	187
188	188	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>.
189	189
...	...	@@ -200,14 +200,13 @@
200	200	Lassen Sie Kopfzellen niemals leer.
201	201	{{/warning}}
202	202
	167	+===== **Kopfzellen im Texteditor Tiny MCE definieren** =====
203	203
204		-
205		-Kopfzellen im Texteditor Tiny MCE definieren:
206		-
207	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	208
209		-Kopfzellen im HTML auszeichnen:
210	210
	172	+===== **Kopfzellen im HTML auszeichnen** =====
	173	+
211	211	{{code language="html" layout="LINENUMBERS"}}
212	212	<table>
213	213	<caption>Vorträge zu den Gruppenarbeiten</caption>
...	...	@@ -238,8 +238,6 @@
238	238	* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
239	239	{{/panel}}
240	240
241		-
242		-
243	243	== Wie werden Texte gut lesbar? ==
244	244
245	245	Schriftart, Schriftgröße, Zeichen- und Wortabstände, Zeilenlänge und vieles weitere haben einen Einfluss auf die Lesbarkeit von Texten.
...	...	@@ -293,7 +293,7 @@
293	293
294	294	Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
295	295
296		-Bildunterschrift mit den HTML-Elementen figure und figcaption:
	257	+**Bildunterschrift mit den HTML-Elementen figure und figcaption**
297	297
298	298	{{code language="html" layout="LINENUMBERS"}}
299	299	<figure>
...	...	@@ -302,8 +302,6 @@
302	302	</figure>
303	303	{{/code}}
304	304
305		-
306		-
307	307	=== Alternativtext ===
308	308
309	309	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.
...	...	@@ -319,27 +319,24 @@
319	319	{{/info}}
320	320
321	321
322		-(% class="wikigeneratedid" id="HAlternativtextimTexteditorTinyMCEhinterlegen" %)
323		-Alternativtext im Texteditor Tiny MCE hinterlegen:
	281	+==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
324	324
325	325	[[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
326	326
327	327
328		-(% class="wikigeneratedid" id="HAlternativtextimHTMLhinterlegen" %)
329		-Alternativtext im HTML hinterlegen:
	286	+==== Alternativtext im HTML hinterlegen ====
330	330
331	331	{{code}}
332	332	<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
333	333	{{/code}}
334	334
335		-(% class="wikigeneratedid" id="HBildalsdekorativmarkieren" %)
336		-Bild als dekorativ markieren:
	292	+==== Bild als dekorativ markieren ====
337	337
338	338	[[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
339	339
340	340
341	341
342		-Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen
	298	+**Im HTML: Leeres alt-Attribut für Bilder ohne relevante Informationen**
343	343
344	344	{{code}}
345	345	<img src="..." alt=" " />
...	...	@@ -355,8 +355,6 @@
355	355	* [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
356	356	{{/panel}}
357	357
358		-
359		-
360	360	=== Bilder für Smartphones und Tablets optimieren ===
361	361
362	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.
...	...	@@ -367,9 +367,6 @@
367	367	<img src="..." style="max-width: 100%" />
368	368	{{/code}}
369	369
370		-(% class="wikigeneratedid" %)
371		-
372		-
373	373	=== Alternativen für Videos und Audio-Dateien bereitstellen ===
374	374
375	375	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.