Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 26.11.2025
Von Version 103.1
bearbeitet von Carina Enke
am 11.04.2023
Änderungskommentar: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 13.12.
Auf Version 62.1
bearbeitet von Carina Enke
am 28.11.2023
Änderungskommentar: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 13.15.

Zusammenfassung

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