Änderungen von Dokument Erstellung barrierefreier Inhalte

Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)
• Objekte (1 geändert, 0 hinzugefügt, 0 gelöscht)
  • Confluence.Code.ConfluencePageClass[0]

Details

Seiteneigenschaften

Titel

...	...	@@ -1,1 +1,1 @@
1		-Usability Barrierefreiheit
	1	+Erstellung barrierefreier Inhalte

Inhalt

...	...	@@ -1,82 +1,7 @@
1	1	{{sv-translation language="de"}}
2	2	{{layout}}
3	3	{{layout-section ac:type="single"}}
4		-{{layout-cell}}
5		-
6		-
7		-{{details}}
8		-(% class="wrapped" %)
9		-|=(((
10		-Verantwortliche
11		-)))|(((
12		-{{mention reference="XWiki.katharina" style="FULL_NAME" anchor="XWiki-katharina-Qndqn"/}}
13		-)))
14		-|=(% colspan="1" %)(% colspan="1" %)
15		-(((
16		-Status
17		-)))|(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)
18		-(((
19		-(% class="content-wrapper" %)
20		-(((
21		-
22		-
23		-{{sv-metadata type="workflow-status"/}}
24		-)))
25		-)))
26		-|=(% colspan="1" %)(% colspan="1" %)
27		-(((
28		-Varianten
29		-)))|(% colspan="1" %)(% colspan="1" %)
30		-(((
31		-(% class="content-wrapper" %)
32		-(((
33		-{{sv-metadata type="variants"/}}
34		-)))
35		-)))
36		-|=(% colspan="1" %)(% colspan="1" %)
37		-(((
38		-Attribute
39		-)))|(% colspan="1" %)(% colspan="1" %)
40		-(((
41		-(% class="content-wrapper" %)
42		-(((
43		-{{sv-metadata type="attributes"/}}
44		-)))
45		-)))
46		-|=(% colspan="1" %)(% colspan="1" %)
47		-(((
48		-Pagekey
49		-)))|(% colspan="1" %)(% colspan="1" %)
50		-(((
51		-(% class="content-wrapper" %)
52		-(((
53		-{{sv-metadata type="pagekey"/}}
54		-)))
55		-)))
56		-|=(% colspan="1" %)(% colspan="1" %)
57		-(((
58		-Übersetzung
59		-)))|(% colspan="1" %)(% colspan="1" %)
60		-(((
61		-(% class="content-wrapper" %)
62		-(((
63		-{{status colour="Red" title="Offen"/}}
64		-)))
65		-)))
66		-|=(% colspan="1" %)(% colspan="1" %)
67		-(((
68		-TODOs
69		-)))|(% colspan="1" %)(% colspan="1" %)
70		-(((
71		-(% class="auto-cursor-target" %)
72		-Weitere Themen für später:
73		-
74		-* barrierefreie Doks (PDF)
75		-* Inhaltsverzeichnis (Anker zum Springen auf Abschnitte auf der Seite)
76		-* Medien - Dateiname: lesbar + keywords (auch für SEO sinnvoll)
77		-)))
78		-{{/details}}
79		-{{/layout-cell}}
	4	+{{layout-cell}}{{/layout-cell}}
80	80	{{/layout-section}}
81	81
82	82	{{layout-section ac:type="two_right_sidebar"}}
...	...	@@ -88,13 +88,13 @@
88	88	\\
89	89
90	90	{{info title="Usability"}}
91		-Usability, Benutzerfreundlichkeit oder auch Gebrauchtauglichkeit 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.
	16	+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.
92	92
93	93	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"]].
94	94	{{/info}}
95	95
96	96	{{info title="Barrierefreiheit"}}
97		-Die Richtlinien zur Erfüllung der Barrierefreiheit (Englisch: Accessibility) sind in den [[Web Content Accessibility Guidelines (WCAG)>>url:https://www.w3.org/TR/WCAG21/||shape="rect"]] zu finden. Eine deutschsprachige Einführung in das Thema Barrierfreiheit bietet die Webseite [["Einfach für alle">>url:https://www.einfach-fuer-alle.de/artikel/einfuehrung-barrierefreiheit/||shape="rect"]].
	22	+Die Richtlinien zur Erfüllung der Barrierefreiheit (Englisch: Accessibility) sind in den [[Web Content Accessibility Guidelines (WCAG 2.2)>>url:https://www.w3.org/TR/WCAG22/||shape="rect"]] zu finden. Eine deutschsprachige Einführung in das Thema Barrierefreiheit bietet die Webseite [["Einfach für alle">>url:https://www.einfach-fuer-alle.de/artikel/einfuehrung-barrierefreiheit/||shape="rect"]].
98	98
99	99	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"]].
100	100	{{/info}}
...	...	@@ -316,15 +316,15 @@
316	316
317	317	{{layout-section ac:type="two_right_sidebar"}}
318	318	{{layout-cell}}
319		-=== Bildbeschreibung ===
	244	+=== Alternativtext ===
320	320
321		-Für Bilder, die relevant für den Inhalt einer Seite sind, sollte eine Bildbeschreibung (Alternativtext) hinterlegt werden. Diese 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.
	246	+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.
322	322
323	323	**Folgendes ist bei Alternativtexten für Bilder zu beachten:**
324	324
325	325	* Kurz halten: Der Alternativtext sollte nur die wichtigsten Informationen enthalten. Grobe Richtlinie: 125 Zeichen.
326	326	* Informationen beschreiben: Nur die für den Kontext (z.B. den Text) relevanten Informationen, die das Bild übermitteln soll, beschreiben.
327		-* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeren alt-Attribut) haben und idealerweise als Hintergrundbilder via CSS eingebunden werden.
	252	+* Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) haben und idealerweise als Hintergrundbilder via CSS eingebunden werden.
328	328
329	329	\\
330	330
...	...	@@ -333,7 +333,7 @@
333	333	{{/info}}
334	334
335	335	{{section}}{{column}}
336		-==== Bildbeschreibung im Texteditor Tiny MCE hinterlegen ====
	261	+==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
337	337
338	338	[[image:attach:Texteditor-Bildbeschreibung.png]]
339	339	{{/column}}
...	...	@@ -341,22 +341,23 @@
341	341	{{column}}
342	342	==== HTML-Code nutzen ====
343	343
344		-{{code language="xml" title="Bildbescheibung mit dem Attribut alt"}}
	269	+{{code language="xml" title="Alternativtext mit dem Attribut alt"}}
345	345	<img src="coffee-smile.jpg" alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
346	346	{{/code}}
347	347
348	348	{{code language="xml" title="Leeres alt-Attribut für Bilder ohne relevante Informationen"}}
349		-<img src="banner.jpg" alt="" />
	274	+<img src="banner.jpg" alt=" " />
350	350	{{/code}}
351	351	{{/column}}{{/section}}\\
352	352
353	353	{{info}}
354		-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"]].
	279	+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"]].
355	355	{{/info}}
356	356	{{/layout-cell}}
357	357
358	358	{{layout-cell}}
359	359	{{panel title="Weiterführende Informationen"}}
	285	+* 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"]]
360	360	* [[How to write better alt-text descriptions for accessibility>>url:https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/||shape="rect"]]
361	361	* [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
362	362	{{/panel}}

Confluence.Code.ConfluencePageClass[0]

id

...	...	@@ -1,1 +1,1 @@
1		-675251285
	1	+754155709

url

...	...	@@ -1,1 +1,1 @@
1		-https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/675251285/Usability Barrierefreiheit
	1	+https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/754155709/Erstellung barrierefreier Inhalte