zum Prüfen auf Barrierefreiheit
Aufgabe
Prüfe die nachfolgenden Inhalte und Gestaltung auf ihre Barrierefreiheit und mache Vorschläge, wie man diese verbessern könnte.
Beispiel Inhalt
I’m an english sentence, inside a german website.
I’m an english sentence, inside a german website.
Zott Sahne Werbung
Vollbepackt mit tollen Sachen, die das Leben schöner machen,
Hinein ins Weekend-Feeling!
Mit Zott Sahnejoghurt, sahnig, fruchtig, frisch und dann
Hinein ins Weekend-Feeling!
Mmmh lass Dich mal geh’n, schalt‘ einfach ab,
Erleb‘ den sahnigen Geschmack!
Mit Zott ins Weekend-Feeling!
-Zott Sahnejoghurt, sahnig, fruchtig, frisch-
Das Video findest du hier
Rügenwalder – Pommersche Werbung
Feierabend, wie das duftet
Kräftig, deftig, würzig, gut.
Pommersche aus dem Buchenrauch
Naturgewürzt und das schmeckt man auch,
Pommersche aus dem Buchenrauch
Frisch auf den Tisch, so ists der Brauch.
Das Video findest du hier
Videos
WordPress Strong
iPhone
Sketch
2024 Easterseals Disability Film Challenge Entry
Loriot
Gummibären Theme Song
Gestaltung (Texte sind Beispieltexte)
Die Verwendung der vorgesehenen HTML-Strukturelemente stellt sicher, dass die Gliederung der Inhalte auch programmatisch ermittelbar festgelegt und zugänglich ist. So können z.B. Screenreader-Nutzende im Lesemodus die Inhalte Absatz für Absatz durchlaufen. Benutzer, die mit der vorgegebenen visuellen Präsentation der Elemente auf der Seite nichts anfangen können, finden sich dann trotzdem zurecht, oder sie können eine eigene, besser passende Präsentation anwenden. Werden Absatzumbrüche über doppelte br– Elemente geschaffen, entstehen im Lesemodus der Screenreader ggf. leere Fokuspositionen, die irritieren und das Erfassen der Inhalte verlangsamen.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Die Verwendung der vorgesehenen HTML-Strukturelemente stellt sicher, dass die Gliederung der Inhalte auch programmatisch ermittelbar festgelegt und zugänglich ist. So können z.B. Screenreader-Nutzende im Lesemodus die Inhalte Absatz für Absatz durchlaufen. Benutzer, die mit der vorgegebenen visuellen Präsentation der Elemente auf der Seite nichts anfangen können, finden sich dann trotzdem zurecht, oder sie können eine eigene, besser passende Präsentation anwenden. Werden Absatzumbrüche über doppelte br– Elemente geschaffen, entstehen im Lesemodus der Screenreader ggf. leere Fokuspositionen, die irritieren und das Erfassen der Inhalte verlangsamen.
Die Verwendung der vorgesehenen HTML-Strukturelemente stellt sicher, dass die Gliederung der Inhalte auch programmatisch ermittelbar festgelegt und zugänglich ist. So können z.B. Screenreader-Nutzende im Lesemodus die Inhalte Absatz für Absatz durchlaufen. Benutzer, die mit der vorgegebenen visuellen Präsentation der Elemente auf der Seite nichts anfangen können, finden sich dann trotzdem zurecht, oder sie können eine eigene, besser passende Präsentation anwenden. Werden Absatzumbrüche über doppelte br– Elemente geschaffen, entstehen im Lesemodus der Screenreader ggf. leere Fokuspositionen, die irritieren und das Erfassen der Inhalte verlangsamen.
Die Verwendung der vorgesehenen HTML-Strukturelemente stellt sicher, dass die Gliederung der Inhalte auch programmatisch ermittelbar festgelegt und zugänglich ist. So können z.B. Screenreader-Nutzende im Lesemodus die Inhalte Absatz für Absatz durchlaufen. Benutzer, die mit der vorgegebenen visuellen Präsentation der Elemente auf der Seite nichts anfangen können, finden sich dann trotzdem zurecht, oder sie können eine eigene, besser passende Präsentation anwenden. Werden Absatzumbrüche über doppelte br– Elemente geschaffen, entstehen im Lesemodus der Screenreader ggf. leere Fokuspositionen, die irritieren und das Erfassen der Inhalte verlangsamen.
Beispiel Seiten zum Testen
- https://giphy.com/search/computer
- https://www.awwwards.com/
- https://www.german-design-award.com/
- https://www.torebentsen.com/
- https://theyearofgreta.com/
- Obi.de
- https://store.steampowered.com/?l=german
- http://webtestingcourse.dequecloud.com/laptopsandnotebooks.php
- Wikipedia
- WordPress.org
- rbb.de/kultur
- fitnessfirst.de
- fressnapf.de
- tchibo.de
- mehr Beispiele unter: https://www.spinxdigital.com/blog/best-website-design/
Auflösung
- Beispiel-Inhalt: der erste englische Satz ist nicht als Englisch im HTML gekennzeichent.
- Zott Sahne:
- Zweiter Vers hat keinen ausreichenden Farbkontrast
- der erste Link „hier“ hat keinen eindeutigen LinkText
- Rügenwalder Werbung:
- Farbkontrast ist nicht ausreichend. Im Light Mode hat die Überschrift einen komplementär-Kontrast, was vermieden werden sollte.
- der Link „hier“ ist nicht unterstrichen und hat keinen aussagekräftigen Link-Text
- Video „WordPress Strong“: es gibt keine Untertitel
- Video: iPhone: Es wird kein Wort gesprochen. Daher ist für blinde User der Inhalt des Videos nicht zugänglich
- Video Sketch:
- Es gibt Untertitel im Video, die als Pixel enthalten sind. Dies ist nicht nutzbar für alle.
- Bei Untertitel in der Close Caption wurde automatisch erzeugt und zeigen bei einem Gespräch nicht an, wer spricht
- Video: 2024 Easterseals Disability Film Challenge Entry
- Positiv Beispiel mit Audio Description und Close Caption. In den Close Caption wird auch aufgeführt wer spricht und was passiert
- Video Loriot: Untertitel wurden automatisch erzeugt, haben aber die falsche Sprache erkannt.
- Gummibären-Song: es ist kein Transkript vom Liedtext erhältlich
- Gestaltung (Texte sind Beispieltexte)
- 1. Absatz links: Zeilenhöhe ist zu niedrig, dadurch ist der Text schwer zu lesen
- 2. Absatz rechts: Uppercase lässt sich schwerer lesen, als die natürliche Schreibweise der Wörter
- 3. Absatz links: kursiv lässt sich schwerer lesen, weil die Schrift unruhig und dünner wird. Daher nur punktuell einsetzen und auf eine ausreichend große Schriftart achten. Zudem ist es als Blocksatz gestaltet, was sich vor allem auf kleinen Bildschirmen schlecht lesen lässt (vor allem in der deutschen Sprache).
- 4. Absatz rechts: bei zentrierten Texten ist die Gefahr höher in der Zeile zu verrutschen. Daher sollte dies nur für kurze Zeilen (Überschriften usw.) eingesetzte werden und nicht für Fließtexte.
- Gesamtseite: Die Überschriften-Hierarchie stimmt nicht