Barrierefreie Inhalte – ein Schnelleinstieg
"Nicht jeder hat eine Behinderung…aber fast jeder profitiert von Barrierefreiheit"
(Domingos de Oliveira - Berater und Dozent für digitale Barrierefreiheit)
Warum barrierefrei?
Zum einen hilft es jedem Nutzer, wenn er die gesuchten Informationen schnell findet und diese übersichtlich, klar und verständlich aufbereitet sind (Barrierefreiheit = höchste Nutzerfreundlichkeit). Zum anderen sollen barrierefreie Internetangebote von allen Menschen - unabhängig von ihren Einschränkungen und den technischen Voraussetzungen - genutzt werden können. Dabei sind folgende Formen von Einschränkungen zu berücksichtigen:
- Sinnes- und Körperbehinderungen: Blinde/Sehbehinderte können visuelle Inhalte schlecht wahrnehmen und benötigen Hilfsmittel wie Screen-Reader, Vergrößerungs-Software oder Vorlesesoftware. Schwerhörige und Gehörlose haben Probleme bei Audio-Inhalten und motorisch Behinderte haben Probleme bei der Benutzung von Maus und Tastatur.
- Wahrnehmen oder Verarbeiten von Informationen: Menschen mit Down-Syndrom erleben eine Überforderung mit komplexen Inhalten. Autisten und Epileptiker reagieren empfindlich auf starke Reize schlechte Konzentration.
- Verstehen und merken: In Deutschland gab es 2019 in etwa 6,2 Millionen Menschen mit einer Leseschwäche und viele, oft ältere Menschen, können überhaupt nicht mit Webseiten umgehen.
Die Web Content Accessibility Guidelines (WCAG) ist ein weltweit gültiger Standard für barrierefreie Webinhalte. Die WCAG 2.1 ist seit Juni 2018 gültig. Die Basis der Richtlinien stellen diese vier Prinzipien dar:
Die vier Prinzipen der Barrierefreiheit
- Prinzip 1: Wahrnehmbar - Die Website folgt dem Zwei-Sinne-Prinzip.
- Prinzip 2: Bedienbar - Man kommt auch ohne Maus, Tippen und Wischen ans Ziel.
- Prinzip 3: Verständlich - Die Informationen und die Bedienung der Benutzerschnittstelle müssen verständlich sein.
- Prinzip 4: Robust - Bedenken Sie die Kompatibilität mit möglichst allen Benutzeragenten einschließlich assistiver Technologien.
Wie können Sie nun redaktionell vorgehen, um Webseiten barrierefrei zu gestalten!
Das Ziel soll sein, dass Ihr Webauftritt die Informationen gleichermaßen für behinderte und nicht-behinderte zur Verfügung stellt und auch im gleichen Maße bedienbar ist.
Page Title / Menüpunkt
Der Page Title liefert im Frontend (= Nutzeransicht) als auch im Backend als Menüpunkt (= TYPO3-Redaktionansicht) den ersten wichtigen Überblick, welcher Inhalt zu erwarten ist. Beachten Sie bitte:
- Der Page Title wird von Screen-Readern ausgelesen und wird in Suchmaschinen angezeigt
- Aus diesem Grund soll dieser so prägnant und passend wie möglich gewählt werden
Neben dem Page Title können Sie im Reiter SEO eine Beschreibung (Description) hinzufügen, die ebenso ausgelesen wird. Versetzen Sie sich in die Lage des Besuchers. Welche Informationen werden zu dem Thema erwartet? Geben Sie ihm einen kurzen Überblick.
Tipp!
Die Description wird auch bei den Suchmaschinen angezeigt. Die Länge sollte maximal 160 Zeichen betragen, da die Beschreibung sonst abgeschnitten wird.
Die Seiteninhalte
Gestalten Sie Ihre Seite einfach
Je einfacher die Seite gestaltet ist, desto barrierefreier ist sie:
- Schreiben Sie kurze Sätze und vermeiden Sie Schachtelsätze und Füllwörter
- Abkürzungen schreiben Sie am besten aus (wenn möglich)
- Im wissenschaftlichen Kontext ist es sicherlich schwierig keine Fach- und Fremdwörter zu benutzen – aber vielleicht gibt es die ein- oder andere Stelle im Text, die etwas einfacher formuliert werden kann
Bemühen Sie sich um einen guten Seitenaufbau
Ihr Webauftritt sollte übersichtlich sein, er wird dadurch ansprechend:
- Das Wichtigste kommt immer zuerst
- Benutzen Sie zur Strukturierung Überschriften, Listen und Trennlinien
- Unser Template ist responsive. Schauen Sie sich trotzdem die Seiten Ihres Webauftritts in der mobilen Darstellung an. Ist durch die unterschiedliche Darstellung wirklich alles logisch untereinander gegliedert und übersichtlich? Behinderte Menschen sind privat mehrheitlich mit Smartphones online. Diese haben häufig assistive Technologien eingebaut.
Zeichnen Sie Text-Inhalte semantisch aus
Überschriften (H1 - H6) strukturieren Ihre Webseite und haben eine logische Reihenfolge. Die H1-Überschrift darf dabei nur einmal auf einer Webseite verwendet werden.
Inkonsistente Überschriftenhierarchien sind verwirrend. Screen-Reader-Nutzer sowie Suchmaschinen können die Inhalte nicht richtig zuordnen. Auch sind fett markierte Textbereiche für Screen-Reader-Nutzer nicht wahrnehmbar. Beachten Sie deshalb:
- Eine gute Überschriftenhierarchie funktioniert wie ein Inhaltsverzeichnis in einem Buch
- Fügen Sie keine leeren Absätze ein, um Abstände zu erzeugen
- Zeichnen Sie Zitate mit Block Quote aus
- Verwenden Sie Listen mit Aufzählungszeichen bzw. mit Nummerierung (nutzen Sie die Schaltflächen, erzeugen Sie keine Liste durch die Eingabe von Bindestrichen)
- Stylen Sie nicht selbst, sondern nutzen Sie die Formatvorlagen
Ausführliche Informationen zu Überschriften finden Sie in unserer Anleitung.
Tabellen
Blinde Nutzer erschließen sich Tabellen strukturell – sie navigieren mit der Tastatur durch die Spalten und Zeilen. Es ist daher wichtig:
- Tabellen so einfach wie möglich zu gestalten
- In den Zellen ausschließlich Daten zur Verfügung zu stellen
- Keine leeren Zellen für mehr Abstand einzufügen
- Definieren Sie Spaltenüberschriften
Die Verwendung des Content Elements Typ "Table" ist aus Gründen der Usability und Barrierefreiheit nur noch zu empfehlen, wenn Sie Ihre Tabelle mit Bilder befüllen möchten. In allen anderen Fällen verwenden Sie bitte RTE-Tabellen.
Alternativtexte für Bilder und Grafiken
Der Screen-Reader kann nicht wiedergeben, was auf Bilder oder Grafiken zu sehen ist. Deshalb müssen Sie sich als Redakteur überlegen, warum dieses Bild eingebunden wird und was dieses Bild vermitteln soll. So kann auch eine Stimmung beschrieben werden. Verwenden Sie dabei einen sprechenden Dateinamen und fügen Sie bei den Bild-Metadaten eine Beschreibung über das Feld "Alternative Text" hinzu. Halten Sie sich an folgende Regeln:
- Kurz und aussagekräftig (80 Zeichen maximal)
- Das gehört nicht rein: Einleitungen wie "Das Bild zeigt…" oder Copyright Nachweise
- Ein Bild, das einen Link darstellt, benötigt einen Alternativtext, aber keinen Link-Text
Steigen Sie tiefer in das Thema ein und lesen Sie mehr darüber in unserer Anleitung.
Einbinden von Videos
Achten Sie bitte beim Einbinden von Videos darauf, dass diese
- Untertitel für höreingeschränkte Menschen und/oder die Übersetzung in Gebärdensprache
- Audiodeskription für sehbehinderte Menschen enthalten und
- Die Videos nicht von alleine starten
Youtube z.B. stellt einen kostenlosen Untertitel-Editor zur Verfügung.
Info!
Damit halten Sie bei den Bildern und Videos das sogenannte Mehrkanal-Prinzip ein: Die Informationen sollten über mindestens zwei Sinne zugänglich sein.
Verlinkungen
Verfassen Sie aussagekräftige Links, bei denen Nutzer schnell entscheiden können, ob sie ihnen folgen möchten.
- Bei internen Links übernimmt TYPO3 die Bezeichnung und setzt den Seitentitel ein.
- Verweist ein Link nicht auf eine Seite, sondern auf eine Datei, muss im Link ein Hinweis auf das Dateiformat erfolgen, z.B. Broschüre (PDF). Warum? Der Screen-Reader benötigt ein Programm / Plugin zum Öffnen einer Datei. Und:
- Der Benutzer weiß dann, was auf ihn zukommt.
- Er ist nicht überrascht oder irritiert, wenn plötzlich Browserfunktionen nicht mehr vorhanden sind oder ein anderes Programm geöffnet wird.
Wichtig!
Bitte achten Sie darauf, dass dabei auch die Dateien selbst (word, pdf, etc.) barrierefrei sein müssen.