Ist Ihre WordPress-Website barrierefrei? Gute Frage, mögen Sie jetzt denken. Was bedeutet das überhaupt, Barrierefreiheit? Wie kann ich mögliche Barrieren meines Online-Auftrittes erkennen und abbauen? Welche Tools stehen dazu bereit? Antworten auf all diese Fragen und viele weitere wertvolle Infos gibt es in diesem Beitrag.
Inhalt
Worum geht es?
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 barrierefreie 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.
Allgemeine Richtlinien barrierefreier Webgestaltung
Das World Wide Web Consortium, kurz W3C und zuständig für die Standardisierung der Techniken im Internet, hat die “Richtlinien für barrierefreie Webinhalte (WCAG) 2.0” formuliert, die sich nach vier grundlegenden Prinzipien richten: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
Insgesamt zwölf Richtlinien geben Orientierung im Hinblick auf wichtige Aspekte wie die Integration von Textalternativen für visuelle Inhalte, den Einsatz von starken Farbkontrasten zur Verbesserung der Lesbarkeit 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.
8 Tipps zur Umsetzung von Barrierefreiheit in WordPress
Wir möchten an dieser Stelle konkrete Hilfestellung leisten und acht 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.
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.
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.
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.
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.
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.
Feedback ausformulieren
Oft setzen Entwickler beim Feedback zum Verhalten der Website-Besucher, etwa bei der Nutzung des Kontaktformulares, ausschließlich auf Farbe. Beispiel: Wird ein Pflichtfeld nicht ausgefüllt, erhält es eine rote Umrandung. Wer jedoch farbenblind ist, kann damit nicht viel anfangen. Derartige Fehlermeldungen sollten stets zusätzlich ausformuliert werden.
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.
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.
Fokuspunkte setzen
Es gibt Menschen, die etwa aufgrund einer Spastik keine Maus bedienen können und Webanwendungen ausschließlich per Tastatur ansteuern. Um ihnen mitzuteilen, wo sie sich gerade befinden, sollten die jeweils ausgewählten Eingabefelder – sofern es welche gibt – visuell hervorgehoben werden. Diese Funktion ist in Browsern häufig bereits voreingestellt.
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!