Skip to Content
Last modified by Carina Enke on 12.11.2024
From version 179.1
edited by Carina Enke
on 11.08.2021
Change comment: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 13.2.
To version 180.1
edited by Carina Enke
on 07.07.2021
Change comment: Mittels Scroll Versions veröffentlicht aus dem Bereich LMSintern und Version 13.1.

Summary

Details

Page properties
Content
... ... @@ -1,84 +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-xSgzr"/}}
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 -* Tools
77 -* Medien - Dateiname: lesbar + keywords (auch für SEO sinnvoll)
78 -* Verweis auf Kurslayout + ONYX-CSS
79 -)))
80 -{{/details}}
81 -{{/layout-cell}}
4 +{{layout-cell}}{{/layout-cell}}
82 82  {{/layout-section}}
83 83  
84 84  {{layout-section ac:type="two_right_sidebar"}}
... ... @@ -129,7 +129,7 @@
129 129  
130 130  {{layout-section ac:type="two_right_sidebar"}}
131 131  {{layout-cell}}
132 -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.
55 +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. Dabei ist nicht nur eine visuelle Strukturierung über das Design notwendig, sondern auch eine technisch korrekte über passende HTML-Elemente. 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.
133 133  
134 134  {{info}}
135 135  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.
... ... @@ -137,7 +137,7 @@
137 137  
138 138  === Überschriften ===
139 139  
140 -Überschriften sollten nicht über die Schriftgröße sowie z.B. über die Formatierung Fett/Bold gestaltet werden, sondern über die HTML-Elemente <h1>, <h2>, <h3> bis <h6>. Die Hierarchie der Elemente (z.B. <h2> folgt auf <h1>) muss dabei eingehalten werden.
63 +Überschriften sollten nicht über die Schriftgröße sowie z.B. über die Formatierung Fett/Bold gestaltet werden, sondern über die HTML-Elemente <h1>, <h2>, <h3> bis <h6>. Die Hierarchie muss dabei eingehalten werden.
141 141  
142 142  \\
143 143  
... ... @@ -252,34 +252,6 @@
252 252  {{layout-section ac:type="single"}}
253 253  {{layout-cell}}
254 254  == Was ist beim Einsatz von Medien zu beachten? ==
255 -
256 -Grundsätzlich sollte bei der Verwendung von Medien neben Speicherverbrauch und Ladezeiten auch die Nutzbarkeit unterwegs, z.B. mit einem Smartphone und schlechter Internetverbindung bedacht werden. Außerdem sollten Informationen stets auch über einen zweiten Weg, z.B. Text zugänglich sein.
257 -
258 -Wir haben für Sie einige Tipps mit Blick auf Barrierefreiheit und Mobilfähigkeit zusammengefasst.
259 -
260 -=== Dateigröße ===
261 -
262 -* Für Fotos sollte das Format JPEG bevorzugt und je nach Bildinhalt mittlere bis hohe Qualität gewählt werden.
263 -* Bilder sollten eine Dateigröße von 100-200kB nicht überschreiten.
264 -* Speichern Sie die Bilder direkt in der benötigten Bildgröße (Breite x Höhe) mit der Auflösung 72dpi ab.
265 -* Für sehr große Dateien, z.B. Videos, empfiehlt sich die Einbindung über ein externes Tool (z.B. Videocampus Sachsen, YouTube, Vimeo u.ä.)
266 -
267 -{{info}}
268 -Gängige Bildbearbeitungsprogramme aber auch Online-Tools können bei der Komprimierung von Bildern ohne sichtbare Qualitätsverluste helfen.
269 -{{/info}}
270 -
271 -=== Bildunterschrift ===
272 -
273 -Die Bildunterschrift bzw. der Bildtitel stellt eine zusätzliche Beschreibung zum Bild dar. Ein Bildtitel ist notwendig, wenn wichtige Informationen zum Bild vermittelt werden sollen. Im Gegensatz zur Bildbeschreibung (Alternativtext) ist der Bildtitel auch für Sehende zugänglich.
274 -
275 -Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
276 -
277 -{{code language="xml" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
278 -<figure>
279 - <img src="" alt="Alternativtext">
280 - <figcaption>Bildtitel / Bildunterschrift</figcaption>
281 -</figure>
282 -{{/code}}
283 283  {{/layout-cell}}
284 284  {{/layout-section}}
285 285  
... ... @@ -287,7 +287,7 @@
287 287  {{layout-cell}}
288 288  === Bildbeschreibung ===
289 289  
290 -Für Bilder, die relevant für den Inhalt einer Seite sind, sollte eine Bildbeschreibung (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.
185 +Für Bilder, die relevant für den Inhalt einer Seite sind, sollte eine Bildbeschreibung (Alternativtext) hinterlegt werden. Der Alternativtext ist wichtig für Menschen, die einen Screenreader benutzen. 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.
291 291  
292 292  **Folgendes ist bei Alternativtexten für Bilder zu beachten:**
293 293  
... ... @@ -334,63 +334,36 @@
334 334  
335 335  {{layout-section ac:type="single"}}
336 336  {{layout-cell}}
337 -=== Bilder für Smartphones und Tablets optimieren ===
338 -
339 -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.
340 -
341 -{{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
342 -<img src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
343 -{{/code}}
232 +== Farben & Kontraste ==
344 344  {{/layout-cell}}
345 345  {{/layout-section}}
346 346  
347 347  {{layout-section ac:type="two_right_sidebar"}}
348 348  {{layout-cell}}
349 -(% class="auto-cursor-target" %)
350 -=== Alternativen für Videos und Audio-Dateien bereitstellen ===
238 +Achten sie bei der Auswahl von Farben auf ausreichend Kontrast zwischen Hintergrund- und Textfarbe. Grundsätzlich hat Schwarz auf Weiß das beste Kontrastverhältnis, generell sollte das Verhältnis mindestens 4,5:1 betragen ([[WCAG 2.1 - Contrast>>url:https://www.w3.org/TR/WCAG21/#contrast-minimum||shape="rect"]]).
351 351  
352 -Beim Einsatz von Medien sollten die Informationen stets auch in einer alternativen Form angeboten werden. Neben der Bildbeschreibung (Alternativtext) für Bilder sollte an reine Audio-Inhalte (z.B. Podcasts) und Video-Inhalte mit Bild und Ton gedacht werden.
240 +{{error}}
241 +(% style="color: rgb(51,51,51);" %)Vermeiden Sie kritische Farbkombinationen wie z. B. Rot auf Grün oder Schwarz, da diese von manchen Menschen schlecht wahrgenommen werden können. Auch grelle Farben und blinkende Elemente sollen vermieden werden.
353 353  
354 -* Bieten Sie alternativen Inhalt oder ein Transkript an, wenn Sie Audio-Dateien wie z.B. einen Podcast verwenden.
355 -* Stellen Sie Untertitel oder eine Übersetzung in Gebärdensprache für Video-Inhalte bereit.
356 -* Binden Sie Medien von externen Plattformen, wie z.B. YouTube oder [[Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]] ein.
357 -
358 -\\
359 -
360 -{{info}}
361 -Auf Videoplattformen wie YouTube und Vimeo werden Untertitel automatisch erzeugt. Diese können bei Bedarf korrigiert werden.
362 -{{/info}}
243 +{{/error}}
363 363  {{/layout-cell}}
364 364  
365 365  {{layout-cell}}
366 366  {{panel title="Weiterführende Informationen"}}
367 -[[Videocampus Sachsen: Erstellung von Untertiteln für Videos (TU Chemnitz)>>url:https://blog.hrz.tu-chemnitz.de/urzcommunity/2021/06/16/erstellung-von-untertiteln-fuer-videos/||shape="rect"]]
248 +* [[Kontrastrechner von leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
249 +* [[Farben auswählen mit color.review (EN)>>url:https://color.review/||shape="rect"]]
250 +* [[Ccontrast checker (EN)>>url:https://webaim.org/resources/contrastchecker/||shape="rect"]]
368 368  {{/panel}}
369 369  {{/layout-cell}}
370 370  {{/layout-section}}
371 371  
372 -{{layout-section ac:type="single"}}
373 -{{layout-cell}}
374 -== Farben & Kontraste ==
375 -{{/layout-cell}}
376 -{{/layout-section}}
377 -
378 378  {{layout-section ac:type="two_right_sidebar"}}
379 379  {{layout-cell}}
380 -Achten sie bei der Auswahl von Farben auf ausreichend Kontrast zwischen Hintergrund- und Textfarbe. Grundsätzlich hat Schwarz auf Weiß das beste Kontrastverhältnis, generell sollte das Verhältnis mindestens 4,5:1 betragen ([[WCAG 2.1 - Contrast>>url:https://www.w3.org/TR/WCAG21/#contrast-minimum||shape="rect"]]).
381 -
382 -{{error}}
383 -(% style="color: rgb(51,51,51);" %)Vermeiden Sie kritische Farbkombinationen wie z. B. Rot auf Grün oder Schwarz, da diese von manchen Menschen schlecht wahrgenommen werden können. Auch grelle Farben und blinkende Elemente sollen vermieden werden.
384 -
385 -{{/error}}
257 +\\
386 386  {{/layout-cell}}
387 387  
388 388  {{layout-cell}}
389 -{{panel title="Weiterführende Informationen"}}
390 -* [[Kontrastrechner von leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
391 -* [[Farben auswählen mit color.review (EN)>>url:https://color.review/||shape="rect"]]
392 -* [[Contrast checker (EN)>>url:https://webaim.org/resources/contrastchecker/||shape="rect"]]
393 -{{/panel}}
261 +\\
394 394  {{/layout-cell}}
395 395  {{/layout-section}}
396 396  {{/layout}}
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -476775099
1 +476774626
url
... ... @@ -1,1 +1,1 @@
1 -https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/476775099/Usability Barrierefreiheit
1 +https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/476774626/Usability Barrierefreiheit