[Leitfaden] Viele Museen und Kulturinstitutionen beschäftigen sich mit dem Thema Barrierefreiheit, wenn es um den Zugang zu ihren Angeboten vor Ort geht. Doch auch im digitalen Raum muss Barrierefreiheit eine Rolle spielen. Eine barrierefreie Website ermöglicht es allen Nutzern, sich einen Überblick über zentrale Informationen zu verschaffen. Dies ist jedoch nur möglich, wenn technische, gestalterische oder inhaltliche Barrieren vermieden werden. Für öffentliche Institutionen ist eine barrierefreie Website übrigens kein nice-to-have sondern wird von der Europäischen Union mit der Richtlinie (EU) 2016/2012 vorgeschrieben. Im Folgenden geben wir einen Überblick über grundlegende Aspekte, die es zu beachten gilt, und empfehlen Tools, die zu einer Überprüfung der Barrierefreiheit genutzt werden können.
Dieser Beitrag stellt keine Rechtsberatung dar. Für Vollständigkeit, Aktualität oder Richtigkeit der hier bereitgestellten Inhalte und der verlinkten Seiten und Dokumente wird keine Haftung übernommen.
EU-Vorgaben zur Barrierefreiheit
Öffentliche Stellen sind dazu verpflichtet, einen barrierefreien Zugang zu Websites und zu mobilen Anwendungen wie Apps zu ermöglichen. Dies gibt die EU-Richtlinie 2016/2012 vor, die bis zum 23. September 2020 von den entsprechenden Websites erfüllt werden muss und bis zum 23. Juni 2021 von Apps. In der EU-Richtlinie werden einheitliche europaweite Standards zur Barrierefreiheit vorgegeben. Verbunden mit der EU-Richtlinie ist eine Verpflichtung zur Veröffentlichung einer Erklärung zur Barrierefreiheit für jede Website und für jede App.
Fristen zur Richtlinie (EU) 2016/2012
- Von Websites, die vor dem 23.09.2018 bereits existierten, muss spätestens ab dem 23.09.2020 die EU-Richtlinie erfüllt werden.
- Websites, die erst nach dem 23.09.2018 veröffentlicht wurden, sind bereits seit dem 23.09.2019 betroffen.
- Für Apps finden die Regelungen ab 23.06.2021 Anwendung.
- Auch PDF-Dokumente, die auf Internetseiten angeboten werden, müssen zu den entsprechenden Umsetzungsfristen barrierefrei zur Verfügung gestellt werden. PDF-Dokumente, die vor September 2018 angelegt wurden, können bestehen bleiben.
Zur Umsetzung auf Bundesebene
- Es gibt ein neues Behinderten-Gleichstellungsgesetz (BGG) mit neuer Barrierefreie-Informationstechnik-Verordnung (BITV 2.0). BITV 2.0 verweist auf „harmonisierte Standards“, gemeint sind damit von der EU bekanntgegebene europäische Normen.
- Gemäß des Durchführungsbeschlusses (EU) 2018/2048 der EU Kommission vom 20. Dezember 2018 ist das die Norm EN 301 549 V2.1.2 (2018-08). Dies verweist wiederum auf den Standard „Web Content Accessibility Guidelines“ (WCAG), aktuell in der Version 2.1.
Zur Umsetzung auf Landesebene
In allen Bundesländern gibt es zur Barrierefreiheit neue gesetzliche Anforderungen. Diese gelten für Behörden und öffentliche Unternehmen. In Hamburg gibt es zum Beispiel ein neues Hamburgisches Behinderten-Gleichstellungsgesetz (HmbBGG), dies ist seit dem 08.01.2020 in Kraft.
- Übersicht zu Vorgaben in den Bundesländern: BIK für Alle: Landesgesetze zu barrierefreier Informationstechnik
Was bedeutet das für betroffene Institutionen?
Barrierefreiheit muss gemäß der Richtlinie (EU) 2016/2012 auf allen Websites und Apps von öffentliche Stellen (auf Bundes- und Landesebene sowie auf kommunaler Ebene) gewährleistet werden. Die Mindestanforderung ist die Veröffentlichung einer Erklärung zur Barrierefreiheit auf jeder App und auf jeder Website.
Diese Erklärung zur Barrierefreiheit muss folgende Punkte enthalten:
- Es müssen Aussagen dazu getroffen werden, inwieweit den „harmonisierten Normen“ (= WCAG 2.1) genügt wird (und inwieweit nicht). In der Erklärung muss also genannt werden, welche Teile des Inhalts nicht barrierefrei zugänglich sind, warum dies so ist und ob Alternativen zur Verfügung stehen.
- Es muss ein Feedback-Mechanismus zu einer für Barrierefreiheit zuständigen Stelle angeboten werden. Nutzer sollen hier Mängel mitteilen und Informationen anfordern können, die bisher noch nicht barrierefrei zur Verfügung gestellt werden. Um dies zu ermöglichen, müssen öffentliche Website-Betreiber hierzu eine barrierefrei gestaltete Möglichkeit schaffen, elektronisch Kontakt aufzunehmen, etwa über eine E-Mail-Adresse.
- Es muss ein Link zum Durchsetzungsverfahren ausgewiesen werden für den Fall, dass der Website-Betreiber auf das Feedback der Nutzer nicht oder nicht ausreichend reagiert. (Laut EU-Richtlinie müssen die Mitgliedstaaten eine bzw. mehrere Stellen benennen, die für die Durchsetzung der Richtlinie zuständig ist, also eine Beschwerde- oder Schlichtungsstelle.)
- Es müssen ggf. auch weitere Pflichtaufgaben aus dem Landesrecht gemacht werden. (Eine Übererfüllung des EU-Rechts durch das Recht der Bundesländer ist möglich.)
Wichtig: Bis zum 23.09.2020 müssen die Grundlagen für die Erfüllung der Erklärungspflicht geschaffen und ein entsprechender Text für eine eigene Unterseite für jede Website erstellt werden.
Beispiele:
Tipp: Amtsblatt der Europäischen Union: Mustererklärung zur Barrierefreiheit
Du findest unsere Inhalte bei musermeku.org für deinen Job hilfreich? Dann zeige uns deine Wertschätzung und unterstütze uns finanziell mit einem kleinen Beitrag.
Tipps für eine barrierearme bzw. eine barrierefreie Website
Gestaltung von Texten
Zur Formatierung von Texten gibt das World Wide Web Consortium (W3C) für eine barrierefreie Website genaue Empfehlungen.
1) Gliederung mit Überschriften
Ein Text lässt sich nicht nur durch Absätze gliedern, sondern auch durch Überschriften. Diese ermöglichen es den Lesern, sich auf einer Website zu orientieren. Hier kommt es darauf an, die Überschriften nicht nur optisch vom übrigen Text zu trennen. Eine rein optische Gestaltung von Überschriften durch fette Formatierung, durch eine andere Schriftgröße oder durch eine unterschiedliche Farbe entspricht nicht einer technisch korrekten Kennzeichnung von Überschriften. Hier sollten in HTML sogenannte h-Tags genutzt werden, und war hierarchisch absteigend.
Üblicherweise ist der Titel einer Seite automatisch mit h1 ausgewiesen, der wichtigsten Überschrift. Der Text einer Seite sollte deshalb durch h2-Überschriften weiter gegliedert werden. Zwischenüberschriften können dann mit h3, darunter mit h4 usw. gegliedert werden.
Eine solche technisch korrekte Textgliederung durch Überschriften auf jeder Seite einer Website erleichtert nicht nur blinden und sehbehinderten Nutzern die Orientierung, wenn diese einen Screenreader nutzen, um sich den Text vorlesen zu lassen. Auch Suchmaschinen wie Google oder Bing erleichtert diese technische Gliederung die Bewertung eines Website-Inhalts.
Tipp: Überschriften sollten nicht nur optisch durch eine fette Formatierung, durch Schriftgröße oder durch Schriftfarbe vom Text abgesetzt werden. Leserfreundlich ist eine eindeutige hierarchische Gliederung mit absteigenden h-Formatierungen für Überschriften.
2) Textformatierung und Schriftgröße
Bei Texten sollte eine kognitive Desorientierung oder das Hervorrufen einer visuellen Müdigkeit bei den Lesern vermieden werfen. Eine leichte Orientierung ermöglicht eine linksbündige Formatierung des Textes, bei der ein durchgängig gleicher Abstand zwischen Worten eingehalten wird.
Auch die Textgröße erleichtert den Lesefluss. W3C empfiehlt eine Größe von 16 Pixeln für regulären Text. Überschriften können entsprechend ihrer Hierarchie (h1 bis h6) davon abweichen und größer dargestellt werden. Da die meisten Browser die Möglichkeit bieten, die Darstellung einer Website in ihrer Größe anzupassen (100%, 125%, 150% usw.) können Nutzer allerdings auch selbst entscheiden, ob sie den Text einer Seite für sich vergrößern möchten.
Tipp: Auf eine rechtsbündige Textformatierung oder auf Blocksatz sollte verzichtet werden, da beide Formatierungen den Lesefluss behindern. Nutzerfreundlich ist eine linksbündige Formatierung und eine Textgröße von 16 px.
3) Kennzeichnung von Links
Für zusätzliche Informationen bietet es sich an, auf weitere Inhalte auf der eigenen Website zu verlinken oder auch auf externe Websites. In einem Text sollten daher auch Links entsprechend gekennzeichnet werden. Es erleichtert den Lesefluss, wenn nicht die tatsächliche Internetadresse im Text auftaucht, sondern wenn die URL mit einem beschreibenden Text verbunden wird. Statt also https://… auszuschreiben oder die Linkadresse mit nichtssagenden Worten wie „Hier klicken“ zu verbinden, sollte eine aussagekräftige Wortgruppe als Ausgang eines Links gewählt werden, damit Nutzer hieraus ableiten können, worauf hier verlinkt wird.
Um Links nicht nur technisch sichtbar zu machen, sollten sich ein Link auch vom übrigen Text optisch abheben. Dies sollte durch die Gestaltung in einer gut lesbaren Kontrastfarbe erfolgen sowie durch eine Kennzeichnung eines Link als unterstrichener Text. Menschen mit Schwierigkeiten in der Farbwahrnehmung können die Kontrastfarbe nämlich möglicherweise nicht erkennen; sie benötigen zusätzlich die Unterstreichung zur Orientierung. Um Verwirrung zu vermeiden, sollte aus diesem Grund aber auch nur Text unterstrichen werden, bei dem es sich um einen Link handelt.
Tipp: Statt eine Internetadresse komplett in einem Text zu platzieren, sollte der Link mit beschreibenden Worten verknüpft werden. Zudem sollte sich ein Link auch optisch vom übrigen Text unterscheiden, etwa durch eine andere Farbe und eine Unterstreichung.
4) Nutzung von Farben
Farben sollten auf einer barrierefreien Website immer kontrastreich eingesetzt werden. Dabei spielt es keine Rolle, ob ein heller Hintergrund mit einer dunklen Schrift bevorzugt wird oder ein dunkler Hintergrund mit einer hellen Schrift. Wichtig ist vor allem, dass der Kontrast so deutlich ist, dass die Schrift leicht lesbar ist. Dies gilt besonders auch dann, wenn Schrift auf einem Bildhintergrund eingesetzt wird. Hier sollte das Bild mit einem hellen oder einem dunklen Farblayer überlagert werden, um eine kontrastfarbige Schrift besser lesbar zu gestalten.
Tipp: Je ähnlicher eine Textfarbe dem Hintergrund ist, umso schwerer lesbar ist diese. Schrift sollte daher immer einen starken Kontrast zum Hintergrund aufweisen, um leicht lesbar zu sein.
Tool-Tipps:
5) Barrierefreie Bilder
Blinde und sehbehinderte Nutzer können Bilder auf einer Website nicht oder nur schwer erkennen. Aus diesem Grund sollten Bilder für eine barrierefreie Website immer mit einer Bildunterschrift, einem Alternativtext und mit einer Bildbeschreibung versehen werden.
- Die Bildunterschrift erläutert den Kontext des Bildes.
- Der Alternativtext bietet weitere Informationen zum Bild. Falls das Bild Text beinhaltet, kann an dieser Stelle der Text vom Bild wiederholt werden.
- Die Bildbeschreibung umschreibt, was auf dem Bild zu sehen ist.
Diese Angaben ermöglichen es Nutzern, den Inhalt eines Bildes zu erfassen, auch wenn dies nicht gesehen werden kann.
Tipp: Jedes Bild einer Website sollte mit zusätzlichen Metadaten versehen werden; neben der Bildunterschrift gehört dazu auch ein Alternativtext und eine Bildbeschreibung.
6) Barrierefreie Infografiken und Diagramme
Infografiken lassen sich für Blinde und Sehbehinderte natürlich wie Bilder mit entsprechenden Metadaten versehen. Während ansonsten für Sehbehinderte wieder ein hoher Farbkontrast eine Rolle spielt, muss für Farbenblinde die Farbnutzung überdacht werden. Neben der Farbe spielen im Hinblick auf die Barrierefreiheit aber noch weitere Gestaltungsaspekte eine Rolle, und zwar die Beschriftungen, die genutzten Symbole sowie verwendete Formen und Muster.
Tipp: Diagramme und Infografiken sollten kontrastreiche Farben nutzen, gut erkennbare Beschriftungen, sowie leicht voneinander zu unterscheidende Formen und Muster.
7) Medieninhalte zugänglich machen
Eine barrierefreie Website sollte zu Audio- oder Video-Inhalten immer auch eine Textversion anbieten, um die Informationen auch Nutzern mit Hörproblemen zugänglich zu machen. Während Videos mit Untertiteln ausgestattet werden können, kann zu Audioinhalten auch der Volltext auf der Website bereitgestellt werden. Natürlich ist das auch für Videos möglich, wenn man Untertitel nicht innerhalb eines Videos bereitstellen kann.
Die automatische Medienwiedergabe auf einer Website sollte übrigens blockiert werden, da dies für Nutzer verwirrend sein kann und der Ton auch die Funktion eines Screenreaders für sehbehinderte Nutzer überlagert. Medieninhalte sollten daher immer erst aktiv von Nutzern gestartet werden.
Tipp: Audioinhalte von mp3 oder mp4 Dateien sollten auf einer barrierefreien Website immer auch als Volltext zum Mitlesen bereitgestellt werden. Die automatische Wiedergabe der Media-Formate sollte zudem deaktiviert werden.
Linktipps:
Tools zur Prüfung von Barrierefreiheit
Weitere Linktipps für eine barrierefreie Website
Header-Bild: Angelika Schoder – Hamburger Kunsthalle, 2020
Wir brauchen deine Unterstützung
Werde jetzt Mitglied im musermeku Freundeskreis: Erhalte wöchentlich News zu Kunst und Kultur direkt per E-Mail, sichere dir den Zugang zu exklusiven Inhalten und hilf uns dabei, unsere Betriebskosten für musermeku.org zu decken.
Bei musermeku schreibt Dr. Angelika Schoder über Themen zur Digitalisierung, über Museen und Ausstellungen sowie über Reise- und Kultur-Tipps.
Linktipps
Der Newsletter zu Kunst & Kultur
In unserem kostenlosen Newsletter informieren wir einmal im Monat über aktuelle Neuigkeiten aus dem Kunst- und Kulturbereich.