Barrierefreie Inhalte – ein Schnelleinstieg
“Barrierefreiheit ist ein Grundrecht”
(Charta der Grundrechte der Europäischen Union, Art. 21 und 26)
Für Menschen mit Behinderung bedeutet digitale Barrierefreiheit eine bessere Lebensqualität, soziale Teilhabe, ein “normales“ Leben, das für viele Menschen ohne Einschränkung selbstverständlich ist.
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.
- 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.
4 Prinzipien
Die Web Content Accessibility Guidelines (WCAG) sind 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 Prinzipien 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 vielen Benutzeragenten, einschließlich assistiver Technologien.
Vorteile einer barrierefreien Website
Warum sollte Ihre Webseite barrierefrei sein?
- Sie erweitern Ihre Zielgruppe: Barrierefreie Websites sind für alle zugänglich, unabhängig von individuellen Fähigkeiten oder Beeinträchtigungen. Dadurch erreichen Sie eine breitere Zielgruppe.
- Sie haben Vorteile bei der Suchmaschinenoptimierung: Barrierefreie Websites sind gut strukturiert und dies verbessert ihre Auffindbarkeit durch Suchmaschinen was zu einem höheren Ranking führen kann.
- Sie stärken Ihr Image und zeigen soziale Verantwortung: Eine inklusive Website kann das Vertrauen der Nutzer stärken und den Markenwert erhöhen.
Empfohlenes Vorgehen
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.
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 ebenfalls 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 Beschreibung wird auch in Suchmaschinen angezeigt. Die Länge sollte maximal 160 Zeichen betragen, da die Beschreibung sonst abgeschnitten wird.
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
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 responsiv. 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 überwiegend mit Smartphones online. Diese haben häufig assistive Technologien eingebaut.
Überschriften (H1–H6) strukturieren Ihre Webseite und haben eine logische Reihenfolge. Die H1-Überschrift darf auf einer Webseite nur einmal verwendet werden.
Inkonsistente Überschriftenhierarchien sind verwirrend. Screenreader-Nutzer sowie Suchmaschinen können die Inhalte nicht korrekt zuordnen. Auch fett markierte Textbereiche sind 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 “Blockquote” 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.
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 vom Typ "Table" ist aus Gründen der Usability und Barrierefreiheit nur noch zu empfehlen, wenn Sie Ihre Tabelle mit Bildern befüllen möchten. In allen anderen Fällen verwenden Sie bitte RTE-Tabellen.
Der Screenreader kann nicht wiedergeben, was auf Bildern oder Grafiken zu sehen ist. Deshalb müssen Sie sich als Redakteur*in überlegen, warum dieses Bild eingebunden wird und was es vermitteln soll. So lässt sich auch eine Stimmung beschreiben. Verwenden Sie dabei einen sprechenden Dateinamen und fügen Sie in den Bildmetadaten eine Beschreibung im 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 dazu in unserer Anleitung.
Achten Sie bitte beim Einbinden von Videos darauf, dass diese
- Untertitel für höreingeschränkte Menschen und/oder die Übersetzung in Gebärdensprache enthalten
- Audiodeskription für sehbehinderte Menschen enthalten und
- Die Videos nicht von alleine starten
Youtube z.B. stellt einen kostenlosen Untertitel-Editor zur Verfügung.
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.