Ä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.carina
	1	+XWiki.katharina

Inhalt

...	...	@@ -5,8 +5,7 @@
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		-{{info title="
9		-Usability"}}
	8	+{{info title="Usability"}}
10	10	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.
11	11
12	12	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"]].
...	...	@@ -25,18 +25,14 @@
25	25	{{/layout-cell}}
26	26
27	27	{{layout-cell}}
28		-
29	29	{{panel title="Inhalt"}}
	28	+{{toc start="2"/}}
30	30
31		-
32		-{{toc maxLevel="3"/}}
33		-
34	34	**Verwandte Themen**
35	35
36		-* [[doc:Texteditor]]
37		-* [[Kurslayout in OPAL>>doc:Kurslayout]]
	32	+* [[Texteditor>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]]
	33	+* [[Kurslayout in OPAL>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurseinstellungen.Kurslayout.WebHome]]
38	38	{{/panel}}
39		-
40	40	{{/layout-cell}}
41	41	{{/layout-section}}
42	42
...	...	@@ -51,7 +51,7 @@
51	51	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.
52	52
53	53	{{info}}
54		-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.
	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.
55	55	{{/info}}
56	56
57	57	=== Überschriften ===
...	...	@@ -62,7 +62,7 @@
62	62	{{column}}
63	63	==== Formate im Texteditor Tiny MCE nutzen ====
64	64
65		-[[image:attach:Texteditor-Formate-Überschriften.png]]
	60	+[[image:attach:Texteditor-Formate-Überschriften.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
66	66	{{/column}}
67	67
68	68	{{column}}
...	...	@@ -87,7 +87,7 @@
87	87	{{column}}
88	88	==== Formate im Texteditor Tiny MCE nutzen ====
89	89
90		-[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen.png]]
	85	+[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
91	91	{{/column}}
92	92
93	93	{{column}}
...	...	@@ -113,7 +113,7 @@
113	113	{{column}}
114	114	==== Listen im Texteditor Tiny MCE nutzen ====
115	115
116		-[[image:attach:Texteditor-Listen.png]]
	111	+[[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
117	117	{{/column}}
118	118
119	119	{{column}}
...	...	@@ -218,10 +218,12 @@
218	218
219	219	Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
220	220
221		-{{code language="xml" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
	216	+**Bildunterschrift mit den HTML-Elementen figure und figcaption**
	217	+
	218	+{{code layout="LINENUMBERS"}}
222	222	<figure>
223		- <img data-cke-saved-src="" src="" alt="Alternativtext">
224		- <figcaption>Bildtitel / Bildunterschrift</figcaption>
	220	+ <img ... alt="Alternativtext">
	221	+ <figcaption>Bildtitel / Bildunterschrift</figcaption>
225	225	</figure>
226	226	{{/code}}
227	227	{{/layout-cell}}
...	...	@@ -247,18 +247,22 @@
247	247	{{column}}
248	248	==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
249	249
250		-[[image:attach:Texteditor-Bildbeschreibung.png]]
	247	+[[image:attach:Texteditor-Bildbeschreibung.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
251	251	{{/column}}
252	252
253	253	{{column}}
254	254	==== HTML-Code nutzen ====
255	255
256		-{{code language="xml" title="Alternativtext mit dem Attribut alt"}}
257		-<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
	253	+**Alternativtext mit dem Attribut alt**
	254	+
	255	+{{code}}
	256	+<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
258	258	{{/code}}
259	259
260		-{{code language="xml" title="Leeres alt-Attribut für Bilder ohne relevante Informationen"}}
261		-<img data-cke-saved-src="banner.jpg" src="banner.jpg" alt=" " />
	259	+**Leeres alt-Attribut für Bilder ohne relevante Informationen**
	260	+
	261	+{{code}}
	262	+<img ... alt=" " />
262	262	{{/code}}
263	263	{{/column}}
264	264	{{/section}}
...	...	@@ -283,7 +283,9 @@
283	283
284	284	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.
285	285
286		-{{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
	287	+**Mit max-width eine maximale Breite für Bilder setzen**
	288	+
	289	+{{code language="html"}}
287	287	<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
288	288	{{/code}}
289	289	{{/layout-cell}}
...	...	@@ -351,4 +351,3 @@
351	351	{{/layout-cell}}
352	352	{{/layout-section}}
353	353	{{/layout}}
354		-