Barrierefreie Website – Ein Gastbeitrag von Johannes Mairhofer

Barrierefreie Webseiten nutzen uns allen – Überblick mit praktischen Tipps

Barrierefreie Webseiten sind kein vermeintliches Nischenthema für Menschen mit Behinderung mehr. Es geht uns alle an und hilft sogar den SEO-Fans unter euch – ein Überblick mit praktischen Tipps von Johannes Mairhofer.

Barrierefreiheit im digitalen Raum ist eigentlich ein integraler Bestandteil des Internets und schon in dessen standardisierten Leitlinien festgehalten. Und natürlich spielt sie auch im WordPress Codex eine wichtige Rolle. Alle User, sollen WordPress benutzen können, egal welche Sprache sie sprechen, welchen ökonomischen Status sie haben oder welchen körperlichen Einschränkungen sie unterliegen. Dennoch findet das Thema meist noch nicht die Beachtung, die es verdient. Besonders mit Blick auf die demographische Entwicklung und den Willen zur Inklusion muss digitale Barrierefreiheit bei WordPress-WordPress-Projekten aber mitgedacht werden, meint Johannes Mairhofer. Denn: Auch aus unternehmersicher und SEO-Perspektive wird Barrierefreiheit wichtig.

Die Idee der barrierefreien Website ist nicht neu

Um die Techniken im World Wide Web zu standardisieren, wurde 1994 das World Wide Web Consortium, kurz W3C, gegründet. Besonders wichtige Standards sind hier:

  • HTML (nach wie vor das Grundgerüst fast jeder Webseite)
  • CSS (Cascading Style Sheets, z.B. bei WordPress Templates im Einsatz)
  • WCAG (Web Content Accessibility Guidelines)

Die WCAG-Richtlinien werden von der Web Accessibility Initiative (WAI) entwickelt, die wiederum eine Gruppe der W3C ist. Hier gibt es mittlerweile zwei Versionen.

WCAG 1.0

  • Markup und Stylesheets verwenden
  • Geräteunabhängiges Design

WCAG 2.0

Webseiten sollen

  • Wahrnehmbar (z.B. Textalternativen bei Bildern)
  • Bedienbar (z.B. per Tastatur steuerbar)
  • Verständlich (z.B. durch leichte Sprache)
  • Robust (Kompatibel)

sein.

Die Idee der barrierefreien Webseite ist also nicht neu und seit 2002 sogar in der Barrierefreie Informationstechnik Verordnung (BITV) verankert. Dadurch sind zumindest die Internetauftritte von Behörden dazu verpflichtet, barrierefreie Inhalte anzubieten.

Vor allem für neue WordPress-Projekte gilt: Eine barrierefreie Website lässt sich schon mit sehr wenig Aufwand umsetzen

Wie soll nun eine Webseite barrierefrei umgesetzt werden? Viele Punkte sind nicht so kompliziert wie man vielleicht vermutet und auch ohne großen Aufwand umsetzbar.

Am einfachsten geht das natürlich bei einer Seite die gerade erst neu erstellt und konzipiert wird. Aber auch bereits bestehenden Webseiten können nachträglich optimiert werden. Dabei gilt es ein paar einfache Grundregeln zu beachten.

1) Seitentitel, Navigation und Tags richtig nutzen

Der Titel der Seite steht auch wirklich im Titel und Überschriften sind logisch gegliedert und auch als Überschrift formatiert, nicht nur fett. Aufzählungen werden mit Aufzählungszeichen oder -punkten realisiert, nicht mit einem einfachen Minusstrich. Bei WordPress kann dies im Editor direkt vorgegeben werden. Je nach Template und verwendetem Editor stehen hier mehrere Klassen an Überschriften zur Verfügung. Durch die Verwendung von Tags (z.B. H1 und H2 bei Überschriften) kann die Seite für blinde Menschen mit einem Screenreader oder der Tastatur besser erlebbar und navigierbar gemacht werden.

Barrierefreie Website: Listentag

Barrierefreie Website Head
Ausschnitte aus dem Texteditor zu diesem Beitrag: Oben ist zu sehen, dass die Aufzählungen als solche definiert wurden. Auch die Zwischenüberschriften sind als H3 definiert.

2) Bei der Gestaltung auf JavaScript und Flash verzichten

Für die Gestaltung am besten auf HTML und CSS setzen. Javascript und Flash sollte nicht eingesetzt werden. Javascript ist, wie der Name schon sagt, eine Scriptsprache. Unabhängig davon, dass diese unsicher ist, kann den Code nicht jedes Gerät und jeder Browser verarbeiten. Da die Webseite auf möglichst allen Geräten verfügbar sein sollte, ist Javascript nicht zu empfehlen.

3) Inhalt und Design trennen

Der Inhalt (Text) und das Design (Layout) sollte komplett voneinander getrennt betrachtet werden. Durch verschiedene CSS-Varianten können z.B. durch einen einfachen Klick des Users der Kontrast der Seite angepasst oder die Farben verändert werden. So kann Menschen mit Sehschwächen oder Farbenblindheit geholfen werden. Das machen auch große Firmen wie Pfizer.

Prinzipiell geht das bei WordPress schon automatisch. So kann z.B. auch ein Template gewechselt werden, ohne dass der Inhalt geändert werden muss. Wenn die Webseite mit einem Smartphone oder Tablet aufgerufen wird, wird das Layout auch automatisch angepasst.

4) Das Zwei-Sinne-Prinzip beachten

Inhalte sollten prinzipiell so aufbereitet werden, dass Sie durch zwei verschiedene Sinne wahrgenommen werden können. So wird die Webseite ohne großen Aufwand für möglichst viele Menschen erlebbar gemacht. Das geht beispielsweise über die folgenden Maßnahmen:

  • Bilder mit Bildbeschreibung versehen (geht direkt über den WordPress Editor)
  • Videos mit Untertitel unterlegen (macht z.B. Youtube teils automatisch)
  • Text mit Struktur und Überschriften gliedern (geht im Editor)

Mein Tipp für ein besseres Verständnis einer barrierefreien Website: selbst Erfahrungen sammeln

In der Theorie ist die Thematik nicht immer so leicht nachzuvollziehen. Ich habe mit Heiko Kunert, Geschäftsführer des Blinden- und Sehbehindertenverbandes, über barrierfreie Webseiten gesprochen. Heiko ist selbst blind und surft mit einem Screenreader durchs Netz. Heiko berichtet von seinen Erfahrungen mit Webseiten und sozialen Netzwerken und berichtet, wie er mit seinem Smartphone und einer Braillezeile im Netz unterwegs ist.

Viele Dinge die hier theoretisch behandelt werden können auch ohne großen Aufwand selbst ausprobiert werden. So kannst du dir ein Gefühl davon machen, wie deine Seite tatsächlich wahrgenommen wird.

barrierefreie-website-braillezeile
Eine Brailllezeile – Quelle: Wikimedia Commons. Lizenz: https://creativecommons.org/licenses/by-sa/3.0/

Screenreader und Braillezeile sind die beiden häufigsten Surfhilfen

Ein Screenreader ist eine Software, die Text erkennt und ihn vorliest. Zur Navigation durch Webseiten und Dokumente ist es daher wichtig, dass Tags bei Überschriften und Bildern verwendet werden. So können die Anwender mit Screenreader und Tastatur oder Braillezeile durch die Webseite navigieren.

Eine Variante eines Screenreaders ist z.B. NVDA. Diese Variante ist freie Software und kostenlos. Ich empfehle, diesen einmal auszuprobieren und die eigene Webseite mit ausgeschaltetem Monitor aufzurufen und zu versuchen durch die Menüs zu navigieren.

Eine Braillezeile übersetzt die jeweilige aktuelle Zeile am Bildschirm in Blindenschrift. Diese Zeile ist echte Hardware, die an den Computer angeschlossen wird. Die Braillezeile funktioniert in Kombination mit einem Screenreader.

Responsivitiät ist das A und O für eine barrierefreie Website

Computer, Laptops, Smartphones, Tablets, Smart-Watch und Textbrowser. Die Anzahl der Geräte, mit denen eine Webseite aufgerufen werden kann ist riesengroß. Einer der wichtigen Punkte des WCAG 2.0 ist die Verfügbarkeit der Webseite auf möglichst vielen Geräten.

Die meisten WordPress Templates sind mittlerweile mehr oder weniger responsive und ermöglichen einen Zugriff der Webseite zumindest auf Computer und Smartphone. Je nach Template werden z.B. Menüs angepasst, Sidebars ein- und ausgeblendet aber auch Designs komplett angepasst. Hier spricht man von responsive Webdesign. Die eigene Webseite auf einem anderen Gerät aufzurufen ist einfach und aufschlussreich.

Das Netz ist großartig. Und das Netz ist für alle da!

Das Netz und die permanente Verfügbarkeit ist zwar kein Neuland mehr, aber aus Sicht einer Generation doch noch neu. Die Generation der heute 30-Jährigen, spätestens aber die nachfolgenden Generationen sind es gewohnt, das Netz immer und überall verfügbar zu wissen. Auf die Möglichkeiten der Information und Kommunikation, die das Netz mit sich bringt, wollen wir auch im Alter nicht verzichten.

Der Bedarf an barrierefreien Webseiten steigt also und wird von Jahr zu Jahr größer. Mit Hilfe der zur Verfügung stehenden Möglichkeiten und in WordPress integrierten Tools (z.B. Bildbeschreibung, Überschriften, CSS) ist es ohne großen Aufwand möglich, Webseiten zumindest barrierearm zu machen.

Dass dies immer wichtiger wird merkt man auch daran, dass immer mehr große Konzerne immer mehr Wert auf eine digitale Teilhabe legen. Neben oben genanntem Beispiel von Pfizer bietet Twitter z.B. seit einiger Zeit die Möglichkeit an, Bildern eine Bildbeschreibung hinzuzufügen, Microsoft beschäftigt sich ausführlich mit dem Thema und viele weitere ziehen nach und nach mit. Eine ausführliche Übersicht positiver barrierefreier Webseiten kann z.B. hier eingesehen werden.

Letztlich ist eine barrierefreie Website auch besser für Google

Ich erlebe es leider viel zu oft, dass auf SEO mehr Wert als auf gute Inhalte gelegt wird, daher bin ich kein großer Fan von SEO-Argumenten. Aber wenn Webseiten von Screenreadern besser gelesen und interpretiert werden können, fällt es auch dem Google-Bot leichter die besuchte Seite richtig einzuordnen.

Gerade WordPress erlaubt es schon jetzt sehr schnell und einfach eine ca 80% barrierefreie Website zu erstellen

Bis zur 100%igen Barrierefreiheit ist es noch ein weiter Weg. Und das ist für viele kleine Firmen und private Blogs vermutlich auch nicht umsetzbar.  Durch die von WordPress angebotenen Möglichkeiten ist es aber einfach, ca. 80 Prozent Barrierefreiheit zu erreichen.

Durch die Nutzung von Tags bei Überschriften und Bildern und vor allem der Beschreibung von Bildern ist mit geringem Nutzen schon sehr viel erreicht. Einmal die eigene Webseite mit einem Textbrowser anzusurfen vermittelt ein Gefühl dafür, an welchen Schrauben noch gedreht werden soll und kann.

Wer die Seite für eine Firma betreibt ist immer gut beraten, diese auch einmal von blinden Menschen testen zu lassen, um professionelles Feedback und Tipps zu bekommen.

Wenn du fortfährst, stimmst du unserer Cookie-Richtlinie zu.