Accessible Website

Barrierefreie Websites nutzen uns allen: Tipps für Accessibility

Barrierefreie Websites sind kein vermeintliches Nischenthema für Menschen mit Behinderung mehr. Es geht uns alle an und hilft sogar den SEO Fans unter euch.

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 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 demografische Entwicklung und den Willen zur Inklusion muss digitale Barrierefreiheit bei WordPress Projekten aber mitgedacht werden, meint Johannes Mairhofer. Denn: Auch aus unternehmerischer und SEO Perspektive wird Barrierefreiheit wichtig.

Barrierefreie Websites sind 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 Website)
  • 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

Eine barrierefreie Website sollte folgende Kriterien erfüllen:

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

Die Idee der barrierefreien Website 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.

Eine barrierefreie Website erstellen

Barrierefreie Websites nutzen uns allen: Tipps für Accessibility
Gestaltest du eine barrierefreie Website, optimierst du das Nutzungserlebnis für alle.

Wie soll nun eine Website barrierefrei umgesetzt werden? Viele Punkte sind nicht so kompliziert wie man vielleicht vermutet und auch ohne großen Aufwand umsetzbar. Vor allem für neue WordPress Projekte gilt: Eine barrierefreie Website lässt sich schon mit sehr wenig Aufwand umsetzen.

Am einfachsten geht das natürlich bei einer Website, die gerade erst neu erstellt und konzipiert wird. Aber auch bereits bestehende Websites 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 Website für blinde Menschen mit einem Screenreader oder der Tastatur besser erlebbar und navigierbar gemacht werden.

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 Website 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 der Kontrast der Website 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 Website 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 Website 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)

WordPress Accessibility: Wie du eine barrierefreie Website erstellst (+ Plugins dafür)

Accessibility (oder Barrierefreiheit) in WordPress ist eine wichtige Komponente beim Erstellen von Websites. Warum ist Accessibility so wichtig? Und wie wird auch deine Website für alle zugänglich? Das und mehr verraten wir dir in unserem Artikel zu WordPress Accessibility.

Barrierefreie Website: 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 Websites gesprochen. Heiko ist selbst blind und surft mit einem Screenreader durchs Netz. Heiko berichtet von seinen Erfahrungen mit Websites 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 Website tatsächlich wahrgenommen wird.

Wie Screenreader und Braillezeile helfen

Ein Screenreader ist eine Software, die Text erkennt und ihn vorliest. Zur Navigation durch Websites 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 Website navigieren.

Eine Variante eines Screenreaders ist z. B. NVDA. Diese Variante ist freie Software und kostenlos. Ich empfehle, diesen einmal auszuprobieren und die eigene Website 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.

Responsivität für barrierefreie Websites

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

Die meisten WordPress Templates sind mittlerweile mehr oder weniger responsive und ermöglichen einen Zugriff der Website 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 Website auf einem anderen Gerät aufzurufen, ist einfach und aufschlussreich.

*“ zeigt erforderliche Felder an

Ich möchte den Newsletter abonnieren, um über neue Blogbeiträge, E-Books, Features und News rund um WordPress informiert zu werden. Meine Einwilligung kann ich jederzeit widerrufen. Bitte beachte unsere Hinweise zum Datenschutz.
Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Fazit: Das Web 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 Websites 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, Websites 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 barrierefreie Website ist 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 Websites von Screenreadern besser gelesen und interpretiert werden können, fällt es auch dem Google Bot leichter, die besuchte Website richtig einzuordnen.

Mit WordPress eine barrierefreie Website 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 Website mit einem Textbrowser anzusurfen, vermittelt ein Gefühl dafür, an welchen Schrauben noch gedreht werden soll und kann.

Wer die Website 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.

Deine Fragen zu barrierefreien Websites

Welche Fragen an Johannes zu Barrierefreiheit hast du? Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zum Thema Onlinemarketing informiert werden? Dann folge uns auf TwitterFacebookLinkedIn oder über unseren Newsletter.

Hat dir der Artikel gefallen?

Mit deiner Bewertung hilfst du uns, unsere Inhalte noch weiter zu verbessern.

Ein Kommentar zu “Barrierefreie Websites nutzen uns allen: Tipps für Accessibility

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert