Änderungen von Dokument Erstellung barrierefreier Inhalte

Zusammenfassung

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

Details

Seiteneigenschaften

Dokument-Autor

...	...	@@ -1,1 +1,1 @@
1		-XWiki.katharina
	1	+XWiki.carina

Inhalt

...	...	@@ -25,12 +25,12 @@
25	25
26	26	{{layout-cell}}
27	27	{{panel title="Inhalt"}}
28		-{{toc start="2"/}}
	28	+{{toc maxLevel="3"/}}
29	29
30	30	**Verwandte Themen**
31	31
32		-* [[Texteditor>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]]
33		-* [[Kurslayout in OPAL>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurseinstellungen.Kurslayout.WebHome]]
	32	+* [[doc:Texteditor]]
	33	+* [[Kurslayout in OPAL>>doc:Kurslayout]]
34	34	{{/panel}}
35	35	{{/layout-cell}}
36	36	{{/layout-section}}
...	...	@@ -46,7 +46,7 @@
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		-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.
	49	+Der in OPAL integrierte [[Texteditor Tiny MCE>>doc:LMS.Benutzerhandbuch OPAL.Barrierefreiheit.Erstellung barrierefreier Inhalte.Texteditor]] unterstützt Sie bei der richtigen Strukturierung Ihrer Inhalte, ohne dass Sie sich HTML-Kenntnisse aneignen müssen.
50	50	{{/info}}
51	51
52	52	=== Überschriften ===
...	...	@@ -57,7 +57,7 @@
57	57	{{column}}
58	58	==== Formate im Texteditor Tiny MCE nutzen ====
59	59
60		-[[image:attach:Texteditor-Formate-Überschriften.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
	60	+[[image:attach:Texteditor-Formate-Überschriften.png]]
61	61	{{/column}}
62	62
63	63	{{column}}
...	...	@@ -82,7 +82,7 @@
82	82	{{column}}
83	83	==== Formate im Texteditor Tiny MCE nutzen ====
84	84
85		-[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
	85	+[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen.png]]
86	86	{{/column}}
87	87
88	88	{{column}}
...	...	@@ -108,7 +108,7 @@
108	108	{{column}}
109	109	==== Listen im Texteditor Tiny MCE nutzen ====
110	110
111		-[[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
	111	+[[image:attach:Texteditor-Listen.png]]
112	112	{{/column}}
113	113
114	114	{{column}}
...	...	@@ -213,12 +213,10 @@
213	213
214	214	Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
215	215
216		-**Bildunterschrift mit den HTML-Elementen figure und figcaption**
217		-
218		-{{code layout="LINENUMBERS"}}
	216	+{{code language="xml" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
219	219	<figure>
220		- <img ... alt="Alternativtext">
221		- <figcaption>Bildtitel / Bildunterschrift</figcaption>
	218	+ <img data-cke-saved-src="" src="" alt="Alternativtext">
	219	+ <figcaption>Bildtitel / Bildunterschrift</figcaption>
222	222	</figure>
223	223	{{/code}}
224	224	{{/layout-cell}}
...	...	@@ -244,22 +244,18 @@
244	244	{{column}}
245	245	==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
246	246
247		-[[image:attach:Texteditor-Bildbeschreibung.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
	245	+[[image:attach:Texteditor-Bildbeschreibung.png]]
248	248	{{/column}}
249	249
250	250	{{column}}
251	251	==== HTML-Code nutzen ====
252	252
253		-**Alternativtext mit dem Attribut alt**
254		-
255		-{{code}}
256		-<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
	251	+{{code language="xml" title="Alternativtext mit dem Attribut alt"}}
	252	+<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
257	257	{{/code}}
258	258
259		-**Leeres alt-Attribut für Bilder ohne relevante Informationen**
260		-
261		-{{code}}
262		-<img ... alt=" " />
	255	+{{code language="xml" title="Leeres alt-Attribut für Bilder ohne relevante Informationen"}}
	256	+<img data-cke-saved-src="banner.jpg" src="banner.jpg" alt=" " />
263	263	{{/code}}
264	264	{{/column}}
265	265	{{/section}}
...	...	@@ -284,9 +284,7 @@
284	284
285	285	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.
286	286
287		-**Mit max-width eine maximale Breite für Bilder setzen**
288		-
289		-{{code language="html"}}
	281	+{{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
290	290	<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
291	291	{{/code}}
292	292	{{/layout-cell}}