Zum Inhalt springen

Änderungen von Dokument Erstellung barrierefreier Inhalte

Zuletzt geändert von Carina Enke am 26.11.2025
Von Version 102.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 191.8
bearbeitet von Carina Enke
am 15.01.2024
Änderungskommentar: Renamed from xwiki:LMS.BenutzerhandbuchOPAL.Barrierefreiheit.Erstellung barrierefreier Inhalte.WebHome

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -Usability Barrierefreiheit
1 +Erstellung barrierefreier Inhalte
Übergeordnete Seite
... ... @@ -1,0 +1,1 @@
1 +LMS.BenutzerhandbuchOPAL.Barrierefreiheit.WebHome
Tags
... ... @@ -1,0 +1,1 @@
1 +barrierefreiheit|usability
Inhalt
... ... @@ -1,82 +2,6 @@
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}}
3 +{{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.
15 +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"]].
21 +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}}
... ... @@ -133,7 +133,7 @@
133 133  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.
134 134  
135 135  {{info}}
136 -Der in OPAL integrierte [[Texteditor Tiny MCE>>doc:Texteditor]] unterstützt Sie bei der richtigen Strukturierung Ihrer Inhalte, ohne dass Sie sich HTML-Kenntnisse aneignen müssen.
60 +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.
137 137  {{/info}}
138 138  
139 139  === Überschriften ===
... ... @@ -191,7 +191,7 @@
191 191  {{/column}}
192 192  {{/section}}
193 193  
194 -=== Listen ===
118 +=== Listen ===
195 195  
196 196  (% style="color: rgb(51,51,51);" %)Listen können verwendet werden, um Informationen übersichtlich, kurz und knapp darzustellen. Wählen Sie zwischen ungeordneten und geordneten bzw. nummerierten Aufzählungen.
197 197  
... ... @@ -316,15 +316,15 @@
316 316  
317 317  {{layout-section ac:type="two_right_sidebar"}}
318 318  {{layout-cell}}
319 -=== Bildbeschreibung ===
243 +=== 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.
245 +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.
251 +* 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 ====
260 +==== 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"}}
268 +{{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="" />
273 +<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"]].
278 +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"}}
284 +* 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}}
... ... @@ -440,10 +440,9 @@
440 440  {{/layout-cell}}
441 441  {{/layout-section}}
442 442  {{/layout}}
443 -{{/sv-translation}}
444 444  
445 -{{sv-translation language="en"}}
446 446  
447 447  
371 +
372 +
448 448  {{includeplus spaceKey="LMS" scrollPageId="8AC9158F0169E71FC07AAFD92398FD30"/}}
449 -{{/sv-translation}}
Texteditor-Bildbeschreibung.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Größe
... ... @@ -1,0 +1,1 @@
1 +86.4 KB
Inhalt
Texteditor-Formate-Absätze-Hervorhebungen.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Größe
... ... @@ -1,0 +1,1 @@
1 +22.7 KB
Inhalt
Texteditor-Formate-Überschriften.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Größe
... ... @@ -1,0 +1,1 @@
1 +13.4 KB
Inhalt
Texteditor-Listen.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
Größe
... ... @@ -1,0 +1,1 @@
1 +12.3 KB
Inhalt
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -675251285
1 +463405205
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/463405205/Erstellung barrierefreier Inhalte