exploredesign Logo

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

Sehbehinderung

Es gibt viele Arten von Sehbehinderung. Verschieden ausgeprägte Weit- und Kurzsichtigkeit, aber auch Farbfehlsichtigkeit und Blend-Empfindlichkeit. Die meisten Menschen sind also im Laufe ihres Lebens zumindest zeitweise sehbehindert. Für die Betroffenen ist die Kontrolle der Schriftgröße und der Farb- und Kontrastwahl im Browser wichtig. Eine Anforderung für die Website ist daher z.B., dass das Layout auch mit stark vergrößerter Schrift funktioniert.

Blindheit

Blinde setzen ein Screenreader-Programm zur Bedienung des gesamten Computers ein. Inhalte werden dabei in eine Sprachausgabe oder als Braille-Zeile übersetzt. Ein häufig verwendetes Programm ist z.B. „JAWS“ Die Website muss daher gut strukturiert sein, so dass die Sprachausgabe sie gut übersetzen kann. Zu visuellen Elementen muss es entsprechende Alternativtexte geben. Außerdem müssen alle Stellen mit Tastatursteuerung erreichbar sein.

Motorische Einschränkungen

Wer nicht beide Hände wie gewohnt einsetzen kann, für den müssen Hilfsmittel Mauszeiger und Tastatureingabe ersetzen. Die Mausbewegung kann z.B. per Eye-Tracking kontrolliert werden und das Saugen und Blasen an einem Mundstück die Linke und Rechte Maustaste bedienen. Auch für diese Nutzergruppe muss eine Website die Maus- und Tastatur Bedienbarkeit gleichwertig ermöglichen


Kognitive Einschränkungen

Menschen mit Lernschwierigkeiten z.B. Lese/Rechtschreibschwäche benötigen keine anders erreichbaren Inhalte, sondern Anpassungen an den Inhalten selbst. Bilder und Videos sind wertvolle Elemente, die das Verständnis der Inhalte ermöglichen. Ein Beispiel für eine ganz andere Art von Barrierefreiheit ist die Symbolsprache von symbolworld.org, die Menschen mit kognitiven Einschränkungen unterstützt. Inhalte müssen zudem möglichst verständlich formuliert und gegliedert sein, die wichtigsten Inhalte sollten am besten in „Leichte Sprache“ übersetzt werden.

Gehörlosigkeit

Gehörlose haben vor allem bei Video- und Audio-Beiträgen ein Problem. Deshalb sollten diese Inhalte immer auch als Transskript zw. als Untertitel bereitstehen. Da zusätzlich die Schriftsprachkompetenz bei Gehörlosen oft vermindert ist, sind zusätzliche Videospuren mit Gebärdensprache sinnvoll.

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 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.

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…

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.

Sie haben eine Anmerkung zum Thema? Oder sind auf der Suche nach einem guten Design für Kommunen?
Ich freue mich auf Ihre Nachricht.

FEEDBACK / ANFRAGE

Wenn Sie über neue Blog-Beiträge per E-Mail benachrichtigt werden möchten, können Sie hier Ihre Adresse hinterlassen.
Natürlich werden die Daten vertraulich behandelt. Nachdem Sie ihre E-Mail Adresse eingetragen haben, erhalten Sie eine Mail. Mit einem Klick auf den Link in dieser Mail bestätigen Sie den Benachrichtigungs-Service. Fertig!