Skip to Content
Last modified by Carina Enke on 12.11.2024
From version 177.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
... ... @@ -52,7 +52,7 @@
52 52  
53 53  {{layout-section ac:type="two_right_sidebar"}}
54 54  {{layout-cell}}
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. 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.
56 56  
57 57  {{info}}
58 58  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,7 +60,7 @@
60 60  
61 61  === Überschriften ===
62 62  
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 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.
64 64  
65 65  \\
66 66  
... ... @@ -175,34 +175,6 @@
175 175  {{layout-section ac:type="single"}}
176 176  {{layout-cell}}
177 177  == Was ist beim Einsatz von Medien zu beachten? ==
178 -
179 -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.
180 -
181 -Wir haben für Sie einige Tipps mit Blick auf Barrierefreiheit und Mobilfähigkeit zusammengefasst.
182 -
183 -=== Dateigröße ===
184 -
185 -* Für Fotos sollte das Format JPEG bevorzugt und je nach Bildinhalt mittlere bis hohe Qualität gewählt werden.
186 -* Bilder sollten eine Dateigröße von 100-200kB nicht überschreiten.
187 -* Speichern Sie die Bilder direkt in der benötigten Bildgröße (Breite x Höhe) mit der Auflösung 72dpi ab.
188 -* Für sehr große Dateien, z.B. Videos, empfiehlt sich die Einbindung über ein externes Tool (z.B. Videocampus Sachsen, YouTube, Vimeo u.ä.)
189 -
190 -{{info}}
191 -Gängige Bildbearbeitungsprogramme aber auch Online-Tools können bei der Komprimierung von Bildern ohne sichtbare Qualitätsverluste helfen.
192 -{{/info}}
193 -
194 -=== Bildunterschrift ===
195 -
196 -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.
197 -
198 -Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
199 -
200 -{{code language="xml" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
201 -<figure>
202 - <img src="" alt="Alternativtext">
203 - <figcaption>Bildtitel / Bildunterschrift</figcaption>
204 -</figure>
205 -{{/code}}
206 206  {{/layout-cell}}
207 207  {{/layout-section}}
208 208  
... ... @@ -210,7 +210,7 @@
210 210  {{layout-cell}}
211 211  === Bildbeschreibung ===
212 212  
213 -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.
214 214  
215 215  **Folgendes ist bei Alternativtexten für Bilder zu beachten:**
216 216  
... ... @@ -257,63 +257,36 @@
257 257  
258 258  {{layout-section ac:type="single"}}
259 259  {{layout-cell}}
260 -=== Bilder für Smartphones und Tablets optimieren ===
261 -
262 -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.
263 -
264 -{{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
265 -<img src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
266 -{{/code}}
232 +== Farben & Kontraste ==
267 267  {{/layout-cell}}
268 268  {{/layout-section}}
269 269  
270 270  {{layout-section ac:type="two_right_sidebar"}}
271 271  {{layout-cell}}
272 -(% class="auto-cursor-target" %)
273 -=== 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"]]).
274 274  
275 -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.
276 276  
277 -* Bieten Sie alternativen Inhalt oder ein Transkript an, wenn Sie Audio-Dateien wie z.B. einen Podcast verwenden.
278 -* Stellen Sie Untertitel oder eine Übersetzung in Gebärdensprache für Video-Inhalte bereit.
279 -* Binden Sie Medien von externen Plattformen, wie z.B. YouTube oder [[Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]] ein.
280 -
281 -\\
282 -
283 -{{info}}
284 -Auf Videoplattformen wie YouTube und Vimeo werden Untertitel automatisch erzeugt. Diese können bei Bedarf korrigiert werden.
285 -{{/info}}
243 +{{/error}}
286 286  {{/layout-cell}}
287 287  
288 288  {{layout-cell}}
289 289  {{panel title="Weiterführende Informationen"}}
290 -[[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"]]
291 291  {{/panel}}
292 292  {{/layout-cell}}
293 293  {{/layout-section}}
294 294  
295 -{{layout-section ac:type="single"}}
296 -{{layout-cell}}
297 -== Farben & Kontraste ==
298 -{{/layout-cell}}
299 -{{/layout-section}}
300 -
301 301  {{layout-section ac:type="two_right_sidebar"}}
302 302  {{layout-cell}}
303 -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"]]).
304 -
305 -{{error}}
306 -(% 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.
307 -
308 -{{/error}}
257 +\\
309 309  {{/layout-cell}}
310 310  
311 311  {{layout-cell}}
312 -{{panel title="Weiterführende Informationen"}}
313 -* [[Kontrastrechner von leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
314 -* [[Farben auswählen mit color.review (EN)>>url:https://color.review/||shape="rect"]]
315 -* [[Contrast checker (EN)>>url:https://webaim.org/resources/contrastchecker/||shape="rect"]]
316 -{{/panel}}
261 +\\
317 317  {{/layout-cell}}
318 318  {{/layout-section}}
319 319  {{/layout}}
Confluence.Code.ConfluencePageClass[0]
id
... ... @@ -1,1 +1,1 @@
1 -485228858
1 +476774626
url
... ... @@ -1,1 +1,1 @@
1 -https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/485228858/Usability Barrierefreiheit
1 +https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/476774626/Usability Barrierefreiheit