Barrierefreiheit bei WordPress Webseiten

WordPress Barrierefreiheit

 

Den Begriff Barrierefreiheit hast du sicherlich schon einmal gehört. Aber was bedeutet er konkret für deine WordPress Webseite? Wie teste ich, ob meine Webseite barrierefrei ist? Und wie behebe ich potentielle Barrieren auf meiner Webseite? Dieser Artikel gibt Antworten auf die wichtigsten Fragen rund um das Thema Barrierefreiheit.

Was ist Barrierefreiheit?

Der Begriff Barrierefreiheit beschreibt im Allgemeinen die Gestaltung von Umwelt, Informationsangeboten und Kommunikation, damit Menschen mit Beeinträchtigungen diese ohne fremde Hilfe uneingeschränkt nutzen können. Zum Beispiel ermöglichen Rampen und Fahrstühle gehbehinderten Menschen bestimmte Orte zu erreichen.

 

Im Kontext von Webseiten bedeutet der Begriff, dass die Webseite auch von Menschen mit körperlichen und / oder geistigen Beeinträchtigungen ohne Einschränkungen benutzbar, erfassbar und wahrnehmbar ist. Kurz: Jeder Besucher soll in der Lage sein die Inhalte der Webseite uneingeschränkt zu nutzen. Im Englischen verwendet man den Begriff Accessibility.

Warum ist Barrierefreiheit wichtig für meine Webseite?

Man könnte nun glauben, dass Barrierefreiheit „nur“ für eine bestimmte Zielgruppe nützlich ist – Sehbehinderte, Menschen mit motorischen Einschränkungen oder Senioren. Dem ist nicht so! Mit einer barrierefreien Webseite hilfst du letztlich allen Besuchern weiter! Zudem öffnest du deine Webseite einem größeren Publikum. Auch Menschen mit Sehschwäche, motorischen Einschränkungen oder Konzentrationsschwächen können deine Webseite nun verstehen.

 

Barrierefreiheit geht immer Hand in Hand mit einer hohen Benutzerfreundlichkeit (Usability). Eine hohe Benutzerfreundlichkeit verringert die Absprungrate, erhöht die Verweildauer und steigert die Conversionrate. Eine erleichterte, intuitive Bedienung hilft letztendlich also allen Besuchern weiter.

 

Zusammengefasst lässt sich festhalten:

 

• Du erreichst eine größere Zielgruppe und damit mehr potentielle Kunden
• Du steigerst die Benutzerfreundlichkeit, verringerst die Absprungrate und erhöhst die Conversionrate
• Du erhöhst die Zufriedenheit deiner Besucher
• Die positiven Besuchersignale werden von Google mit einem verbesserten Ranking belohnt

Tipps für barrierefreie WordPress Webseiten

Damit die Webseite für alle Besucher uneingeschränkt nutzbar ist, sollte man sich bewusst machen, wer alles die eigene Webseite besuchen könnte:

 

• Menschen mit Sehbehinderungen
• Menschen mit motorischen Einschränkungen
• Menschen mit Aufmerksamkeitsstörungen
• Menschen mit geistigen Behinderungen
• Menschen mit geringen technischen Hintergrundwissen (Alte Menschen, Kinder)

 

Die folgenden Abschnitte behandeln besonders wichtige Merkmale für eine barrierefreie Umsetzung. Angefangen bei der Wahl von Schriftart und Schriftgröße bis zur Struktur der Webseite.

Schriftarten und Schriftgrößen

Bei der Wahl einer geeigneten Schriftart solltest du darauf achten, möglichst serifenlose Schriftarten zu verwenden. Serifenlose Schriftarten können vom Menschen besser erkannt werden und führen zu einer höheren Lesegeschwindigkeit. Eine der bekanntesten serifenlosen Schriftart ist die Sans Serif Schrift „Arial“.

 

Verwende für deine Webseite eine ausreichend große Schriftgröße um Menschen mit Sehschwächen wie z.B. älteren Menschen das Lesen zu erleichtern. Die ideale Schriftgröße für das Lesen am Bildschirm beträgt 16 Punkte. Für manche Menschen ist aber selbst diese Schriftgröße noch zu klein. Abhilfe kann hier ein Zoom-Plugin bzw. Zoom-Switch schaffen. Mit Hilfe des Zoom- Plugins wird mit einem Klick die Schriftgröße vergrößert. Der Switch kann entweder selber programmiert werden oder man lädt ein WordPress Plugin herunter. Zur Vollständigkeit sei gesagt, dass man natürlich auch die Browser Zoom-Funktion verwenden kann. Mit den Tastenkombinationen [STRG][+] und [STRG][-] lässt sich die Größe von Schrift (und Bilder) vergrößern und verkleinern. Entscheidet man sich gegen einen Zoom-Switch sollte man auf die Zoom-Funktion des Browsers hinweisen, weil viele Menschen diese Funktion gar nicht kennen.

Farben und Kontrast

Achte bei der Auswahl der Farben auf einen ausreichend hohen Kontrast. Gelbe Schriftfarbe auf weißem Hintergrund ist selbst für nicht sehbehinderte Menschen schlecht lesbar. Ein guter Kontrast wirkt sich positiv auf die Lesegeschwindigkeit aus. Nach den Richtlinien der WCAG sollte ein AA Level angestrebt werden (Kontrastverhältnis von mindestens 4,5:1). Du kannst den Kontrast deiner Webseite z.B. mit dem Contrast Checker Tool online testen.

 

Kontrast testen WordPress
Abbildung 1: Kontrast testen

 

Du solltest zudem Farbfehlsichtigkeiten wie die verbreitete Rot-Grün-Schwäche berücksichtigen. Rote Schrift auf grünen Hintergrund ist ein absolutes No-Go. Verwende stattdessen Farben, die sich komplementär ergänzen. Um Komplementärfarben zu finden, kannst du Online Tools wie z.B. das Adobe Farbrad verwenden.

 

Tipp: Suche zunächst nach geeigneten Komplementärfarben und validiere diese anschließend in einem Kontrast-Checker Tool.

Alternativtexte (ALT-Tags) für Bilder

Blinde Menschen sind auf die Hilfe von Screenreadern angewiesen. Verfasste Texte auf der Webseite werden vom Screenreader vorgelesen. Aber wie verhält es sich bei Bildern? Blinde Menschen sind darauf angewiesen, dass Bilder mit einem ALT-Tag (Alternativtext) gekennzeichnet sind. Der Alternativtext wird vom Screenreader dann verwendet um den Inhalt per Sprachausgabe wiederzugeben. Das ALT-Tag kann in WordPress ganz einfach gesetzt werden, indem man unter dem Reiter Medien zunächst das Bild auswählt. Anschließend kann man den ALT-Tag im Feld „Alternativtext“ angeben (Vgl. Abbildung 2: Alternativtext in WordPress).

Alternativtext in WordPress
Abbildung 2: Alternativtext in WordPress

 

Formulare

Damit Formulare auch für Sehbehinderte und Menschen mit motorischen Einschränkungen benutzbar sind, müssen einige Dinge beachtet werden. Zunächst sollte jedes Formularfeld über ein geeignetes Label verfügen. Das Label dient zum einen als Beschreibung und hat zum anderen den Vorteil, dass mit einem Klick auf das Label der Cursor direkt im dazugehörigen Formularfeld platziert wird. Beachte, dass die Verwendung von Platzhaltern (Placeholder) nicht ausreichend ist. Labels können von Screenreadern ausgelesen werden, bei Platzhaltern treten dagegen häufig Probleme auf. Definiere die Labels möglichst genau und gebee dem Button am Ende des Formulars einen aussagekräftigen Text der die Interaktion treffend beschreibt wie z.B. „versenden“ oder „bestellen“.

 

Für Menschen mit motorischen Einschränkungen ist die Tastatur häufig das einzige Eingabegerät. Alle Formularfelder sollten demnach auch per Tastatur angesteuert werden. Mit dem „tabindex- Attribut“ kann die Reihenfolge der Formularfelder festgelegt werden. Danach können alle Felder ganz einfach mit der Tabulator Taste angesteuert werden. Um die Orientierung in Formularfeldern zu erleichtern sollte das aktuell ausgewählte Feld immer farbig hervorgehoben werden.

HTML validieren

Damit Screenreader problemlos funktionieren, muss der HTML Code valide sein. Das W3C stellt hierfür einen Validator zur Verfügung, mit dem der Quellcode der Webseite getestet werden kann.

W3C Markup Validator
Abbildung 3: W3C Markup Validator

 

Webseiten Struktur

Jede Webseite besteht aus verschiedenen Elementen, die eine Struktur ergeben: Navigation, Seiteninhalt, Footer, usw. Innerhalb von Inhalten gibt es Überschriften, Fließtexte und Listen. Bei Überschriften ist darauf zu achten, dass diese im korrekten HTML-Markup ausgezeichnet sind. Verwende bei Überschriften die Elemente <h1>, <h2>, <h3>, <h4> und achte darauf, dass diese sinnvoll ausgezeichnet sind. Die <h1> Überschrift ist die inhaltlich wichtigste Überschrift und sollte auch von der Formatierung gut erkennbar sein. Die korrekte Hierarchie sollte ebenfalls eingehalten werden. Das heißt, dass auf eine <h2> Überschrift eine <h3> folgt und keine <h4>.

Um die Struktur einer Webseite auch für Screenreader lesbar zu machen können sogenannte ARIA Labels verwendet werden. ARIA steht für Accessible Rich Internet Applications und ermöglicht das Hinzufügen von Navigations-Landmarken, Javascript-Widgets, Formular Hinweisen und Fehlermeldungen.

 

<button type=“submit“ aria-label=“Suchen“>Suchen<button

 

Die meisten aktuellen WordPress Themes verwenden bereits ARIA Labels. Achte darauf, dass die Labels auch sinnvoll benannt werden. 

Texterstellung und -gestaltung

Ein wichtiger Aspekt von barrierefreien Webseiten kommt dem Inhalt und der verwendeten Sprache zu. Allein in Deutschland leben mehrere Millionen Analphabeten und Menschen mit einer Lese- oder Schreibschwäche. Daneben gibt es Nicht-Muttersprachler und Menschen mit einem geringen Sprachverständis wie z.B. Menschen mit angeborener Gehörlosigkeit. Auch diese Menschen müssen die Texte der Webseite ohne Einschränkungen verstehen.

 

Die Erstellung solcher Texte ist nicht einfach. Das Netzwerk leichte Sprache hat hierfür ein Regelwerk aufgestellt mit dessen Hilfe einfach zu verstehende Texte verfasst werden können:

 

• Verwendung einfacher Wörter
• Verwendung von Verben und aktiven Wörtern
• Verzicht auf Fachwörter, Fremdwörter und Abkürzungen
• Verwendung von kurzen Wörtern
• Möglichst kurze Sätze
• Verzicht auf Genitiv und Konjunktiv

 

Download vollständiges Regelwerk

 

Nützliche WordPress Plugins

Die wenigsten WordPress Themes sind von Haus aus barrierefrei. Wer seine Webseite barrierefrei gestalten will, aber nicht über die nötigen Programmierkenntnisse verfügt kann auf Plugins zurückgreifen. Die schlechte Nachricht: Es gibt kein Plugin mit dem du per Mausklick deine Webseite barrierefrei machen. Einige Plugins ermöglichen jedoch die Anpassung von Schriftgröße und Farbkontraste. Das bekannteste Plugin ist „WP Accessibility“.

Das Plugin ermöglicht unter anderem:

• Toolbar für Kontrast & Textgröße
• Fokus in Formularen bei Tastaturbenutzung
• Hinzufügen von Sprach- und Textrichtungsattributen
• Erzwingen von Alt-Attributen
• Zusätzliche Beschreibungstexte für Bilder (für Screenreader)
• (…)

Barrierefreie WordPress Themes finden

Die vorigen Abschnitte haben gezeigt, dass viele Aspekte berücksichtigt werden müssen, um eine barrierefreie Webseite anzubieten. Viele der angesprochenen Punkte, wie z.B. Schriftgröße, Kontrast und HTML-Markup werden direkt vom WordPress Theme beeinflusst. Ein guter Ansatzpunkt ist das Theme Verzeichnis von wordpress.org. Mit der entsprechenden Filtereinstellung kann man gezielt barrierefreie Themes suchen. Wähle hierfür einfach in den Filtereinstellungen den Punkt „Accessibility Ready“ aus.

 

Barrierefreie Themes auf WordPress.org finden
Abbildung 4: Barrierefreie Themes auf WordPress.org finden

 

Wichtig: Die Verwendung eines „accessibility ready“ Themes bedeutet nicht, dass die Webseite nun komplett barrierefrei ist. Das Theme sollte als gute Grundlage angesehen werden. Weitere Tests und Anpassungen sind mit großer Sicherheit noch notwendig!

Fazit

Bei der Erstellung einer barrierefreien WordPress Webseite müssen viele Aspekte beachtet werden. Doch der Aufwand für die technische Umsetzung lohnt sich: Mit einer barrierefreien Seite adressierst du nicht nur mehr Besucher. Du verbesserst auch gleichzeitig das Nutzererlebnis (User Experience). Wie bereits erwähnt, gehen Barrierefreiheit und Benutzerfreundlichkeit Hand in Hand. Die daraus resultierenden positiven Nutzersignale werden wiederum von Google registriert, was sich in verbesserten Rankings äußern kann. Letztlich profitieren also alle von einer barrierefreien Umsetzung.

Wer sich intensiver mit dem Thema Barrierefreiheit beschäftigen möchte, dem sei die deutsche Übersetzung der Web Content Accessibility Guidelines (WCAG) ans Herz gelegt.

Weiterführende Links

Web Accessibility Evaluation Tool
Accessible Rich Internet Applications (ARIA)
Aktion Mensch – Barrierefreies Internet
Informationen zu Screenreader

Barrierefreiheit bei WordPress Webseiten
4.1 (82.22%) 9 vote[s]