Changes for page Erstellung barrierefreier Inhalte

Last modified by Carina Enke on 12.11.2024

From 179.1 to 178.1 From 181.1 to 180.1

From 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.

To 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.

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- Confluence.Code.ConfluencePageClass[0]

Details

Page properties

Content

@@ -1,7 +1,84 @@
  {{sv-translation language="de"}}
  {{layout}}
  {{layout-section ac:type="single"}}
--{{layout-cell}}{{/layout-cell}}
++{{layout-cell}}
++
++
++{{details}}
++(% class="wrapped" %)
++|=(((
++Verantwortliche
++)))|(((
++{{mention reference="XWiki.katharina" style="FULL_NAME" anchor="XWiki-katharina-xSgzr"/}}
++)))
++|=(% colspan="1" %)(% colspan="1" %)
++(((
++Status
++)))|(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)(% class="highlight-yellow" colspan="1" data-highlight-colour="yellow" %)
++(((
++(% class="content-wrapper" %)
++(((
++
++
++{{sv-metadata type="workflow-status"/}}
++)))
++)))
++|=(% colspan="1" %)(% colspan="1" %)
++(((
++Varianten
++)))|(% colspan="1" %)(% colspan="1" %)
++(((
++(% class="content-wrapper" %)
++(((
++{{sv-metadata type="variants"/}}
++)))
++)))
++|=(% colspan="1" %)(% colspan="1" %)
++(((
++Attribute
++)))|(% colspan="1" %)(% colspan="1" %)
++(((
++(% class="content-wrapper" %)
++(((
++{{sv-metadata type="attributes"/}}
++)))
++)))
++|=(% colspan="1" %)(% colspan="1" %)
++(((
++Pagekey
++)))|(% colspan="1" %)(% colspan="1" %)
++(((
++(% class="content-wrapper" %)
++(((
++{{sv-metadata type="pagekey"/}}
++)))
++)))
++|=(% colspan="1" %)(% colspan="1" %)
++(((
++Übersetzung
++)))|(% colspan="1" %)(% colspan="1" %)
++(((
++(% class="content-wrapper" %)
++(((
++{{status colour="Red" title="Offen"/}}
++)))
++)))
++|=(% colspan="1" %)(% colspan="1" %)
++(((
++TODOs
++)))|(% colspan="1" %)(% colspan="1" %)
++(((
++(% class="auto-cursor-target" %)
++Weitere Themen für später:
++
++* barrierefreie Doks (PDF)
++* Inhaltsverzeichnis (Anker zum Springen auf Abschnitte auf der Seite)
++* Tools
++* Medien - Dateiname: lesbar + keywords (auch für SEO sinnvoll)
++* Verweis auf Kurslayout + ONYX-CSS
++)))
++{{/details}}
++{{/layout-cell}}
  {{/layout-section}}
  {{layout-section ac:type="two_right_sidebar"}}
@@ -52,7 +52,7 @@
  {{layout-section ac:type="two_right_sidebar"}}
  {{layout-cell}}
--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.
++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.
  {{info}}
  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 @@
  === Überschriften ===
--Ü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.
++Ü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.
  \\
@@ -175,6 +175,34 @@
  {{layout-section ac:type="single"}}
  {{layout-cell}}
  == Was ist beim Einsatz von Medien zu beachten? ==
++
++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.
++
++Wir haben für Sie einige Tipps mit Blick auf Barrierefreiheit und Mobilfähigkeit zusammengefasst.
++
++=== Dateigröße ===
++
++* Für Fotos sollte das Format JPEG bevorzugt und je nach Bildinhalt mittlere bis hohe Qualität gewählt werden.
++* Bilder sollten eine Dateigröße von 100-200kB nicht überschreiten.
++* Speichern Sie die Bilder direkt in der benötigten Bildgröße (Breite x Höhe) mit der Auflösung 72dpi ab.
++* Für sehr große Dateien, z.B. Videos, empfiehlt sich die Einbindung über ein externes Tool (z.B. Videocampus Sachsen, YouTube, Vimeo u.ä.)
++
++{{info}}
++Gängige Bildbearbeitungsprogramme aber auch Online-Tools können bei der Komprimierung von Bildern ohne sichtbare Qualitätsverluste helfen.
++{{/info}}
++
++=== Bildunterschrift ===
++
++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.
++
++Verwenden Sie folgenden HTML-Code um das Bild und den Bildtitel barrierefrei zu gestalten:
++
++{{code language="xml" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
++<figure>
++	<img src="" alt="Alternativtext">
++	<figcaption>Bildtitel / Bildunterschrift</figcaption>
++</figure>
++{{/code}}
  {{/layout-cell}}
  {{/layout-section}}
@@ -182,7 +182,7 @@
  {{layout-cell}}
  === Bildbeschreibung ===
--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.
++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.
  **Folgendes ist bei Alternativtexten für Bilder zu beachten:**
@@ -229,36 +229,63 @@
  {{layout-section ac:type="single"}}
  {{layout-cell}}
--== Farben & Kontraste ==
++=== Bilder für Smartphones und Tablets optimieren ===
++
++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.
++
++{{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
++<img src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
++{{/code}}
  {{/layout-cell}}
  {{/layout-section}}
  {{layout-section ac:type="two_right_sidebar"}}
  {{layout-cell}}
--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"]]).
++(% class="auto-cursor-target" %)
++=== Alternativen für Videos und Audio-Dateien bereitstellen ===
--{{error}}
--(% 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.
++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.
--{{/error}}
++* Bieten Sie alternativen Inhalt oder ein Transkript an, wenn Sie Audio-Dateien wie z.B. einen Podcast verwenden.
++* Stellen Sie Untertitel oder eine Übersetzung in Gebärdensprache für Video-Inhalte bereit.
++* Binden Sie Medien von externen Plattformen, wie z.B. YouTube oder [[Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]] ein.
++
++\\
++
++{{info}}
++Auf Videoplattformen wie YouTube und Vimeo werden Untertitel automatisch erzeugt. Diese können bei Bedarf korrigiert werden.
++{{/info}}
  {{/layout-cell}}
  {{layout-cell}}
  {{panel title="Weiterführende Informationen"}}
--* [[Kontrastrechner von leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
--* [[Farben auswählen mit color.review (EN)>>url:https://color.review/||shape="rect"]]
--* [[Ccontrast checker (EN)>>url:https://webaim.org/resources/contrastchecker/||shape="rect"]]
++[[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"]]
  {{/panel}}
  {{/layout-cell}}
  {{/layout-section}}
++{{layout-section ac:type="single"}}
++{{layout-cell}}
++== Farben & Kontraste ==
++{{/layout-cell}}
++{{/layout-section}}
++
  {{layout-section ac:type="two_right_sidebar"}}
  {{layout-cell}}
--\\
++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"]]).
++
++{{error}}
++(% 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.
++
++{{/error}}
  {{/layout-cell}}
  {{layout-cell}}
--\\
++{{panel title="Weiterführende Informationen"}}
++* [[Kontrastrechner von leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]]
++* [[Farben auswählen mit color.review (EN)>>url:https://color.review/||shape="rect"]]
++* [[Contrast checker (EN)>>url:https://webaim.org/resources/contrastchecker/||shape="rect"]]
++{{/panel}}
  {{/layout-cell}}
  {{/layout-section}}
  {{/layout}}

Confluence.Code.ConfluencePageClass[0]

id

@@ -1,1 +1,1 @@
--476774626
++476775099

url

@@ -1,1 +1,1 @@
--https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/476774626/Usability Barrierefreiheit
++https://www.bps-system.de/help/display/SOV/wiki/spaces/LMS/pages/476775099/Usability Barrierefreiheit

Changes for page Erstellung barrierefreier Inhalte

Summary

Details

Search

OPALGlobal

OPALMenü

Recently Visited