Haben Sie sich schon einmal die Frage gestellt, ob Ihre WordPress-Website barrierefrei ist? Falls nein, dann wird es höchste Zeit dies nachzuholen. Doch was versteht man eigentlich unter barrierefreier Website? Wie kann man mögliche Barrieren meines Online-Auftrittes identifizieren und diese verbessern? Welche Werkezuge stehen dazu bereit? Antworten auf all diese Fragen und viele weitere wertvolle Infos haben wir für dich in diesem Beitrag zusammengefasst.
Barrierefreiheit bezeichnet im deutschen Sprachgebrauch eine Gestaltung der baulichen Umwelt sowie von Informationsangeboten, Kommunikation usw. darstellt, dass sie auch von Menschen mit Beeinträchtigungen ohne zusätzliche Hilfen genutzt und wahrgenommen werden können.
Barrierefreiheit im Kontext von Webangeboten meint, dass diese unabhängig von der eingesetzten Soft- und Hardware sowie körperlichen Einschränkungen zum dafür vorgesehenen Zweck genutzt werden können. Häufig findet alternativ das Wort “Zugänglichkeit” Verwendung, wenn es um die barrierefreihe Gestaltung von Online-Auftritten geht.
Die bestmögliche Barrierefreiheit einer Website zählt zu den eher weniger prominenten, dennoch aber sehr bedeutsamen Kriterien modernen Webdesigns. Das erklärte Ziel ist es, keine spezifischen Personengruppen – etwa Blinde oder Schwerhörige – von der Nutzung eines Online-Angebotes auszuschließen und auch Suchmaschinen die Indexierung zu erleichtern.
Barrierefreie Webgestaltung – Allgemeine Richtlinien
Das World Wide Web Consortium, kurz W3C, ist zuständig für die Standardisierung der Techniken im Internet und hat die “Richtlinien für barrierefreie Webinhalte (WCAG) 2.0” formuliert, die sich nach vier grundlegenden Prinzipien richten:
- Wahrnehmbarkeit
- Bedienbarkeit
- Verständlichkeit
- Robustheit
Insgesamt zwölf Richtlinien geben Orientierung im Hinblick auf wichtige Aspekte wie den Einsatz von starken Farbkontrasten zur Verbesserung der Lesbarkeit, die Integration von Textalternativen für visuelle Inhalte oder die Zugänglichkeit des Webangebotes per Tastatur. Eine gute Zusammenfassung der WCAG 2.0 gibt es auf der Website von Jan Eric Hellbusch.
Um einen Überblick über Ihren aktuellen Stand in Sachen Barrierefreiheit zu erhalten, eignet sich das Web Accessibility Evaluation Tool – einfach URL eingeben und die Auswertung abwarten. Diese eignet sich wunderbar als Ausgangslage für Ihr Engagement bezüglich der barrierefreien Gestaltung Ihrer Website.
7 nützliche Tipps zur Umsetzung von Barrierefreiheit in WordPress
Wir möchten an dieser Stelle konkrete Hilfestellung leisten und sieben wertvolle Tipps vorstellen, die Sie dazu befähigen, Ihre Website ein Stückchen näher in Richtung Barrierefreiheit zu bringen. Im Anschluss daran gehen wir zudem kurz auf verschiedene Werkzeuge ein, die Sie bei dieser Aufgabe unterstützen können.
1. Inhalte mit H-Tags strukturieren
Ein sauberer, hierarchisch gut strukturierter HTML-Code ist bereits bei der Auswahl des WordPress-Themes von Bedeutung. Sie selbst sollten sich darüber hinaus angewöhnen, bei der Erstellung von eigenen Inhalten H-Tags zu nutzen – und zwar über die gesamte Website hinweg auf die gleiche Art und Weise.
Heißt: Seitentitel erhalten etwa stets das H1-Tag, Zwischenüberschriften das H2- und Untertitel das H3-Tag. So erleichtern Sie es Screenreadern sowie anderweitigen technischen Assistenten und natürlich auch den Webcrawlern der Suchmaschinen, Ihre Inhalte hierarchisch korrekt zu verarbeiten und wiederzugeben.
2. Beschreibende Links verwenden
Links, die nicht beschreiben, wo die Reise nach dem Klick hingeht, machen es vor allem der Nutzergruppe schwer, die Screenreader einsetzt. Doch auch Website-Besucher ohne Sehschwäche freuen sich über eindeutige Bezeichnungen von Querverweisen. “Hier klicken” ist demnach eine äußerst schlechte Wahl für die Betitelung eines Links.
3. Größere Schriften benutzen
Menschen ohne Sehschwäche haben in der Regel kein Problem damit, Texte zu lesen, die in Schriftgrößen von elf, zwölf oder 13 Punkten daherkommen. Wer allerdings nicht mehr so gut gucken kann, gelangt hier schnell an seine Grenzen. Als ideale Schriftgröße zum Lesen am Bildschirm gilt 16 Punkt, was in den meisten Browsern die Grundeinstellung darstellt.
4. Bilder mit Alt-Tags versehen
Das Alt-Tag ist dazu da, einem Bild eine Beschreibung in Textform hinzuzufügen. Diese kann von sogenannten Screenreadern erfasst werden. Screenreader sind Vorlese-Softwareanwendungen für Sehbehinderte. Fehlt das Alt-Tag, können Sehbehinderte den Inhalt eines Bildes nicht erfassen. WordPress bietet ein extra für das Alt-Tag vorgesehenes Eingabefeld.
5. Starke Farbkontraste einsetzen
Eine graue Schrift auf weißem Hintergrund ist für viele nicht gut zu erkennen, um nur ein Beispiel suboptimaler Farbkombinationen zu nennen. Starke Kontraste zwischen der Schrift und dem Hintergrund wirken sich positiv auf die Lesbarkeit von Online-Texten aus. Mit einem Tool von Lea Verou können Sie das ideale Kontrastverhältnis wunderbar bestimmen.
6. Großgeschriebene Wörter mit CSS formatieren
Wenn Sie in Ihren Texten zum Beispiel in Überschriften oder auch im Menü mit großgeschriebenen Wörtern arbeiten und möchten, dass diese von Screenreadern auch als ganze Worte erkannt werden, ist der CSS-Befehl “text-transform: uppercase;” die Lösung. Schreiben Sie nämlich WORT direkt in großen Buchstaben, liest der Screenreader die einzelnen Buchstaben W, O, R und T vor.
7. Formulare mit Labels ausstatten
Logisch, dass die Eingabefelder eines Kontaktformulares beschrieben werden sollten – der Nutzer muss schließlich wissen, wo er welche Daten einzutragen hat. Wichtig dabei ist, die Beschreibung nicht als Platzhalter in das Feld, sondern außerhalb davon zu platzieren, sonst kann sie von den technischen Assistenten nicht ausgelesen werden.
Neben der Vergabe von Labels für die Eingabefelder ist die Beschreibung des Buttons am Ende Ihres Kontaktformulares von Bedeutung. Sie sollte exakt die Aktion ausdrücken, die mit der Betätigung des Buttons vollzogen wird – etwa “Absenden” oder “Bestellen”. Darüber hinaus ist es sinnvoll, Pflichtfelder zu markieren – beispielsweise mit einem Sternchen.
Werkzeuge zur Umsetzung und Überprüfung von Barrierefreiheit
Wie oben erwähnt, sollten Sie bereits bei der Auswahl des WordPress-Themes darauf achten, dass dieses unter Berücksichtigung der wichtigen Aspekte für Barrierefreiheit entwickelt wurde und einen Code liefert, der sich an den W3C-Richtlinien orientiert. Es gibt zudem eine Menge Plug-ins, die für mehr Barrierefreiheit Ihres aktuellen Themes sorgen.
WP Accessibility von Joe Dolson etwa wird als DAS Plug-in zur Umsetzung von Barrierefreiheit gehandelt. So bietet es beispielsweise die Möglichkeit, den Code eines Themes für technische Assistenten wie Screenreader anzupassen. Mit dem Access Monitor liefert Dolson außerdem ein Plug-in zur Überprüfung der Barrierefreiheit.
Das Accessibility Widget von Lorna Timbah wiederum erlaubt es Ihren Website-Besuchern, die Schriftgröße zu verändern. Contact Form 7: Accessible Defaults bringt barrierefreie Grundeinstellungen für Ihre Kontaktformulare und das bereits erwähnte Tool von Lea Verou hilft bei der Bestimmung des idealen Kontrastverhältnisses zwischen Schrift und Hintergrund.
Sie sehen, das Feld der barrierefreien Webgestaltung ist komplex und es gibt noch viele weitere Tipps und Tools, die in diesem Beitrag nicht zur Sprache gekommen sind. Mit unserer Auswahl erhalten Sie jedoch einen ersten Überblick und konkrete Ansatzpunkte, um loszulegen. Über Ihre Erfahrungen mit diesem Thema in den Kommentaren freuen wir uns sehr!