Online-Barrierefreiheit – Was bedeutet das für Kommunen?

Barrierefreie Internetangebote sind für öffentliche Einrichtungen inzwischen Pflicht, deshalb ist dieses Thema auch für Kommunen besonders dringlich. Noch genügen längst nicht alle kommunalen Websites der Barrierefreie-Informationstechnik-Verordnung (BITV) 2.0. Auch bei der Arbeit von Exploredesign nimmt Barrierefreiheit einen immer höheren Stellenwert ein. Ich habe meine bisherigen Erfahrungen und Lektüre deshalb hier einmal kurz zusammengefasst.

Barrierefreiheit macht wirklich Sinn

Wenn „von oben“ neue Anforderungen kommen, hält sich die Begeisterung oft in Grenzen. Der Nutzen der DSGVO etwa hat sich vielen Leuten nie erschlossen, wobei der Aufwand für die Website-Entwicklung glücklicherweise gering war Barrierefreiheit ist ein ganz anderer Fall: Ob eine Seite barrierefrei ist oder nicht, entscheidet für die betroffenen Nutzer, ob sie die enthaltenen Informationen oder Dienst­leistun­gen nutzen können oder nicht. Das wird um so gravierender, je mehr der Online-Auftritt zum wichtigsten oder einzigen Kommunikationsmittel wird und die Informationen auf anderem Wege gar nicht oder nur noch sehr umständlich beschafft werden können.

Barrierefreiheit soll vor allem Behinderten zugutekommen, doch eigentlich profitieren alle Nutzer davon:

• Barrierefreiheit verlangt standardkonforme HTML-Programmierung, das wirkt sich positiv auf die Suchmaschinenoptimierung SEO aus und damit auf die Besucherzahlen.
• Meist gehen Barrierefreiheit und Nutzerfreundlichkeit Usability Hand in Hand.
• Auch Senioren und Nicht-Muttersprachler profitieren von vielen Maßnahmen… Die erreichte Zielgruppe wird größer

Arten der Behinderung und spezifische Hilfsmittel

Es gibt nicht „die Behinderten“ als Zielgruppe, denn die möglichen Beeinträchtigungen sind sehr heterogen

Vorgaben nachweisbar erfüllen

Für kommunale Websites ist BITV 2.0 ist die geltende Vorgabe. Für Bayern gilt, dass jede kommunale Website eine „Barrierefreiheitserklärung“ enthalten muss. Darin ist transparent darzulegen, nach welcher Methode die Website getestet wurde und wie das Ergebnis ausfiel. Und eine Absichtserklärung, welche weiteren Maßnahmen man noch unternehmen wird.
Ob der Stand der Barrierefreiheit und der Barrierefreiheitserklärung einer kommunalen Website den Anforderungen genügt, wird in Zukunft immer häufiger geprüft werden. In Bayern macht das die „Durchsetzungs- und Überwachungsstelle für die Barrierefreiheit von Websites und mobilen Anwendungen“.

Testmethoden

• Offiziell barrierefrei ist eine Website, wenn sie den „BITV-Test“ bestanden hat. Dieser Test wird von anerkannten Prüfstellen durchgeführt und ist kostenintensiv.
• Mit dem „BITV-Selbsttest“ kann sich jeder selbst ein Bild von der Barrierefreiheit einer Website machen – und wie die Website im offiziellen BITV-Test wohl abschneiden würde. Allerdings sind lediglich 4 von 60 Prüfschritten gestalterischer Natur, der Rest dreht sich um die Programmierung und erfordert einige Fachkenntnisse. Auch Exploredesign bietet einen BITV-Selbsttest mit anschließender Dokumentation und Handlungsempfehlungen an.
• Für die Barrierefreiheitserklärung reicht aktuell ein automatisierter kostenfreier Test aus, z.B. WAVE. Auch die Ergebnisse dieses Tests müssen allerdings ins Deutsche übersetzt und professionell dokumentiert werden.

Barrierefreies Webdesign

Warum Barrierefreiheit sichtbar sein muss

Viele wichtige Maßnahmen der Barrierefreiheit sind für den „Normal“-Nutzer nicht auf den Ersten Block sichtbar, z.B. ob eine Datentabelle als Bild oder als HTML-Tabelle eingebunden ist. Auffallen wird dagegen, wenn es nur noch relativ große Schrift gibt und zwischen Texte und Hintergrund noch sehr starke Kontraste herrschen.
Warum auf Kontraste achten, wenn die betroffenen Nutzer mit diversen Hilfsmitteln sowieso eine individuelle Ausgabe erhalten? Die für normalen Nutzer spürbaren Anpassungen helfen vor allem Menschen mit leichteren Sehbehinderungen und dazu gehört schon leichte Weitsichtigkeit. Das Ziel ist es, möglichst viele Nutzer mit der normalen Website zu versorgen, ohne dass sie auch besondere Hilfsmittel zurückgreifen müssen.

Kontrastreiche Texte

Für die Gestaltung ist es schade, weil Kontraste ein ganz wesentliches Gestaltungselement sind. Aber es gilt ja nur für Text und Hintergrund. Für Bilder und Schmuckelemente gelten dagegen nach wie vor alle gestalterischen Freiheiten.

Verzicht auf in Grafiken umgewandelte Texte

Ausnahme: Logos mit Textelement (Wort-Bild-Marke).

Standardschriftgröße 16px

Als ich in den 90er Jahren mit Webdesign angefangen habe, galten 12px als angenehme Lesegröße, allzu extrem ist die Anpassung also nicht ausgefallen.

Einbau von Steuerelementen in Entwurf

Icons für Sprachausgabe, Kontrast, Schriftgröße usw. sollen vor allem signalisieren: Man tut was. Tatsächlich nutzen Behinderte meist andere Hilfsmittel. Diese Steuerelemente sind allerdings eine sinnvolle Einladung für Leute, die sich selbst noch gar nicht als behindert empfinden, aber den angebotenen Service dennoch gut brauchen können. Wirklich wichtig sind Steuerungselemente für alle Animationen und Sounds. Hintergrundmusik oder Bewegung ist für manche Nutzer sehr irritierend und kann sie am Erfassen der Inhalte hindern.

Responsivität

Das Layout soll nicht gesprengt werden, auch wenn der Nutzer im Browser eine größere Standardschrift einstellt. Diese wichtige Anforderung erfüllen heutzutage die meisten Websites, weil sie sich nahtlos an verschiedenste Bildschirmgrößen anpassen müssen.

Konzeptionelle Elemente

Diese Maßnahmen sollten im Design-Entwurf bereits mit einfließen und visualisiert werden:

• Mehr-Wege-Kommunikation, z.B. Pfadnavigation zusätzlich zur Menü-Navigation.
• Inhaltlich wichtige Sachen wie Link-Listen und Glossar mit vorsehen.
• Wortwahl für Menüpunkte (Keine zu großen Wörter in sensiblen Bereichen) Silbentrennprogramme haben sich noch nicht allgemein durchgesetzt.

Barrierefreie Programmierung

Programmierer sollen vor allem Inhalte, Design und Interaktive Skripte sauber voneinander zu trennen und den HTML-Code regelkonform zu strukturieren. Das macht es den diversen Werkzeugen leichter, die Inhalte sauber auszulesen und für die Betroffenen nutzbar zu machen.
Besser ist es, diese Regeln besser bereits bei der Entwicklung zu beachten und nicht im Nachhinein reparieren. Der beste Zeitpunkt für richtige Barrierefreiheit ist daher ein Web-Relaunch.
Fast alle kommunalen Websites arbeiten heutzutage mit einem CMS (Content-Management-System). Verbreitete Systeme wie Joomla oder WordPress lassen sich gut individuell von einem Programmierer anpassen, auch in Bezug auf Barrierefreiheit.
Es gibt auch einige spezielle auch Barrierefreiheit ausgelegte CMS-Angebote, wie z.B. Plone. Die Gestaltungsmöglichkeiten erscheinen aber ziemlich eingeschränkt und für den Bedarf von Kommunen nicht passend.
Exploredesign arbeitet für kommunale Websites mit dem kommunalen IT-Dienstleister DigitalfabriX zusammen. Deren System „komXcms“ hat sich seit vielen seit vielen Jahren für die besonderen Belange von Gemeinden und Landkreisen bewährt berücksichtigt auch von Vornherein die Barrierefreiheit. Unnötige Barrieren können sich dann nur noch durch die eingepflegten Inhalte einschleichen.

Inhalte – Die Mühen der Ebenen

Wenn Webdesign und Programmierung geklärt sind, ist es an den Online-Redakteuren, das Niveau der Barrierefreiheit weiter zu halten und wenn möglich auszubauen. Ein wichtiger Teil der Barrieren liegt in den Inhalten selbst.

Laufende Qualitätssicherung

Die Online-Redaktion sollte die eigene Website regelmäßig proaktiv durchgehen und Verbesserungsvorschläge zu Usability und Barrierefreiheit zusammentragen. Dazu gehört auch, betroffene Nutzer zu Feedback zu ermuntern und auf deren Hinweise einzugehen.

Videos

Die wichtigste und einfachste Maßnahme ist das manuelle Einpflegen von Untertiteln. Dazu gibt es z.B. bei YouTube eine komfortable und kostenlose Untertitel-Funktion. Wenn das Video auf der eigenen Website einbettet, kann man über die Parameter die Untertitel dann gleich automatisch aktivieren.
Wenn es zum Video einen beschreibenden Text gibt, kann man dort auch darauf hinweisen, wenn das Video mit Untertitel und ggf. weiteren Hilfsmitteln versehen ist.
Vollkommen barrierefrei ist ein Video allerdings erst dann, wenn es auch über Audiodeskriptionen (Zusätzliche Tonspur mit Beschreibung der zu sehenden Inhalte) und über eine Videospur Gebärdensprache verfügt. Das kann allerdings schnell kostenintensiv werden. Wenn ein Video barrierefrei ist, kann man auch den Player von Aktion Mensch verwenden.

Alternativtexte für Grafikelemente

Alle Bildelemente sollten mit einem erklärenden Alternativtext versehen.

• Eine Ausnahme sind rein dekorative Elemente ohne jeglichen inhaltlicher Zusatznutzen.
• Solche Deko-Elemente sind vielleicht im Webdesign sinnvoll, aber nicht für Online-Redakteure… also lieber weglassen.
• Bilder, die zur Veranschaulichung dienen, sollten mit einem knappen Alternativtext beschrieben werden. Wenn es zusätzlich eine Bildunterschrift gibt, dann sollte der Alternativtext den Inhalt des Bildes Beschreiben, den man auch ohne Bildunterschrift erkennen könnte. Beispiel Alternativtext: „Ein Mann mäht den Rasen“; Bildunterschrift „Auch Rasenmähen sollte man während der Ruhezeiten in einem Wohngebiet unterlassen.“
• Infografiken enthalten oft wichtige Inhalte, die sonst nicht im Text vorkommen. Dazu braucht es immer eine Textalternative, die das Bild genauer beschreibt. Natürlich kann z.B. der unmittelbare Überblickscharakter einer Karte Eindruck einer Karte nie vollständig mit einer linearen Beschreibung wiedergegeben werden, aber man kann sich zumindest bemühen. Stellen Sie sich einfach vor, sie müssten Jemanden eine Kartengrafik und die wichtigsten darin enthaltenen Informationen am Telefon erklären.

Tabellen

• Tabellen nie als Bilder, sondern als HTML-Tabellen einbauen
• Tabellen immer mit einem Titel, einer Kopfzeile und einer Beschreibung versehen. Dieser kann unsichtbar sein und nur für Screenreader gedacht sein.
• Layout-Elemente in Tabellen meiden z.B. Leerzeilen und Leerspalten nicht zur Gliederung benutzen.
• Wenn es zu komplex wird, ggf. Aufteilung in mehrere Tabellen.

Links

• Links in Teaserboxen
  Diese Elemente sind wichtige Schaufenster für tiefer liegende Inhalte. Nach einem oft automatisch aus dem verlinkten Inhalt generierten Teaser-Text geht es weiter mit „Lesen Sie weiter“, oder „Mehr…“. Das ist leider nicht aussagekräftig und stellt eine große Barriere dar. Linktitel müssen stattdessen das Linkziel so genau angeben, dass sich ein für blinde und sehbehinderte Menschen mühseliger Kontextwechsel lohnt.
  Der Teaser-Text sollte am besten manuell formuliert sein und die wesentlichen Inhalte des verlinkten Ziels verraten. Programmiertechnisch sollte der Teasertext mit dem „Mehr-“ Link in einem Absatz-Tag zusammengefasst sein, um dem Link zugeordnet werden zu können.
  Über die Programmierung sollte zusätzlich gewährleistet sein, dass für Bild, Teasertext und Mehr-Link nicht 3mal denselben Link vorgelesen wird. oder dass sich Teasertext und Alternativtext für das Teaserbild nicht doppeln.
• Links im Text
  Alle Hyperlinks sollten das Ziel explizit nennen und den Inhalt Das sollte nicht die URL selbst sein, denn gerade „Deep Links“ lesen sich oft recht sperrig. soll idealerweise selbsterklärend sein, z.B. „Magazin X Artikel „Alles über Thema A““
  Wenn das nicht gegeben ist, soll das Linkziel wenigstens aus nahem Textumfeld zu erkennen sein, z.B. „Einen Interessanten Artikel im Magazin X zu Thema A finden Sie hier“
• Weiterführende Links
  sollten wenn möglich nicht oder zumindest nicht nur im laufenden Text unterbringen, sondern als Liste am Ende des Texts

Layout

Hier kommt es darauf an, welche Freiheiten das CMS dem Online-Redakteur lässt. Wenn es Freiheiten gibt, dann sollte sich der Online-Redakteur selbst Grenzen setzen. Neue Farben, Zeilenabstände und Auszeichnungsarten sollten z.B. nur in Absprache mit dem Webdesigner eingeführt werden. Das ist übrigens auch abseits des Themas Barrierefreiheit immer gut für das einheitliche Erscheinungsbild 🙂

Verständlichkeit und „Leichte Sprache“

Das Website-Team sollte sich einen Leitfaden zurecht legen der das Streben nach Verständlichkeit klärt. Wo hat Verständlichkeit Vorrang, wo sind anspruchsvollere Texte o.k.?
Wenn man sich größtmögliche Verständlichkeit vornimmt, sollte man sich durchaus mit den Regeln für „Leichte Sprache“ auseinandersetzen. Welche der Regeln kann man ohne große Verluste für die Ausdrucksweise beachten, welche würden die Mehrzahl der Nutzer dagegen irritieren oder vor den Kopf stoßen? Mir persönlich würde z.B. der Verzicht auf bildhafte Ausdrucksweise gar nicht gefallen.
Mögliche Vorgehensweisen:

• Starke hierarchische Untergliederung
• Bewusster Einsatz von Absätzen für die einzelnen „Informationshäppchen“. Mit Überschriften und Listen lange unstrukturierte Textblöcke vermeiden.
• Teaser-Texte immer möglichst verständlich halten
• Vermeiden Sie wenn möglich Abkürzungen und Fachbegriffe. Wenn Abkürzungen und Fachbegriffe vorkommen, dann beim ersten Vorkommen in Klammern erklären oder noch besser in einem Glossar zusammentragen. Diese Zusammenfassung kann entweder am Ende des Artikels oder in einer eigenen Glossar-Seite stehen.
• Eine einfache Kurzzusammenfassung am Ende jedes Artikels oder in der Sidebar.
• Für zentrale Aussagen kann man Alternativen in leichter Sprache anbieten und dafür einen Übersetzungsdienst engagieren. Die übersetzten Bereiche könnten dann schrittweise erweitert werden.
• Erklärvideos für komplexe, aber wichtige Zusammenhänge anbieten
• Auch Erklärvideos müssten eigentlich wieder vollständig barrierefrei sein. Aber solange das Video immerhin untertitelt ist und seine Inhalte den Text nur auf andere Weise darstellen, gewinnt die Barrierefreiheit mehr als sie verliert.
• Unterstützende Illustrationen und Infografiken

Barrierefreie PDFs.

Viele Detailinformationen werden in PDFs bereitgestellt. Auch PDFs können barrierefrei erstellt werden und zumindest die wichtigsten PDFs einer Kommune sollten heute schon barrierefrei bereitgestellt werden.

Weiterführende Links

Ich versuche mal, mich selbst an die Barrierefreiheits-Empfehlungen zu halten und fasse hier nochmal die weiterführenden Links zusammen. Ein Glossar wäre für einen einzelnen Artikel übertrieben…

• BIK – Barrierefrei informieren und kommunizieren für Alle
• Beratungsstelle Barrierefreiheit (für Bayern)
• WAVE (Web Accessibility Evaluation Tool)
  Automatisierter und zunächst kostenfreier Barrierefreiheitstest.
• Durchsetzungs- und Überwachungsstelle für digitale Barrierefreiheit in Bayern
• BITV-Selbsttest
• Infoseite zur digitalen Barrierefreiheit der Aktion Mensch
• Regeln für „Leichte Sprache“ (PDF)

Fazit

Barrierefreiheit ist wichtig UND erfordert eine Menge Arbeit. Ich hoffe, dass ich Ihnen mit dieser Übersicht ein wenig weiterhelfen konnte. Haben Sie bereits eigene Erfahrungen gemacht und kommen vielleicht zu anderen Schlussfolgerungen und Umsetzungs-Tipps? Lassen Sie uns darüber sprechen.