Eine bestmögliche Zugänglichkeit gehört zu einem professionellen Online-Auftritt dazu. Die Barrierefreiheit (engl. Accessibility) sorgt dafür, dass auch Menschen mit körperlichen und/oder psychischen Beeinträchtigungen alle Inhalte ohne Probleme lesen und die Interaktionsmöglichkeiten der Webseite nutzen können. Dazu müssen entweder manuelle Anpassungen in WordPress vorgenommen oder die Einstellungen mithilfe eines Plugins verbessert werden.

In diesem Artikel erklären wir, was Accessibility im Webdesign bedeutet und wie sich eine barrierefreie Webseite mit WordPress umsetzen lässt.

Was bedeutet Barrierefreiheit beim Webdesign?

Barrierefrei heißt ohne Hindernisse. In der IT sorgt die Barrierefreiheit dafür, dass eine Webseite von allen Menschen – unabhängig von deren körperlichen oder geistigen Beeinträchtigungen – genutzt werden kann. Darüber hinaus muss das Angebot endgeräte- und plattformunabhängig sein.

Das bedeutet, dass auch die verwendete Hard- und Software für die Lesbarkeit der Inhalte keine Rolle spielen dürfen und diese auch ohne zusätzlich Installationen abrufbar sein müssen.

Entgegen der weit verbreiteten Annahmen profitieren aber nicht nur Personen mit physischen und/oder psychischen Beeinträchtigungen von barrierefreien Webseiten, sondern generell alle Besucher. Denn die bessere Zugänglichkeit verbessert die Usability der Seite, was zu einer Erhöhung der Nutzerzufriedenheit und in Folge auch der Besucherzahlen führt.

Zugänglichkeit von Planung bis zum Launch

Die Zugänglichkeit einer Website ist nicht nur ein Thema für die Entwickler, sondern betrifft auch die Ersteller von Inhalten, die Designer, die Projektmanager und zahlreiche weitere Instanzen, die vom Beginn der Planung bis hin zum Launch einer Webseite involviert sind. Daher sollte sie während des gesamten Prozesses ganz weit oben auf der Prioritätenliste stehen und auch nach dem Start der Seite fortlaufend überprüft und gegebenenfalls verbessert werden.

Gut zu wissen: In § 3 des BGG (Behindertengleichstellungsgesetzes) ist seit 2002 festgelegt, dass Internet-Angebote barrierefrei gestaltet und für Menschen mit Beeinträchtigung jeglicher Art zugänglich und bedienbar gemacht werden müssen. Die Verordnung betrifft in erster Linie öffentlich zugängliche Angebote des Bundes, private und kommerzielle Webseiten sollten sich aber zumindest daran orientieren.

Wie lässt sich eine barrierefreie Webseite mit WordPress umsetzen?

Um eine WordPress-Seite barrierefrei zu gestalten, bedarf es entweder einer manuellen Anpassung oder der Nutzung spezieller Plugins und Themes. Bis zu einem gewissen Grad ist WordPress aber bereits von Haus aus barrierefrei. Zudem wurde seit der Version 5.6 kontinuierlich an der Zugänglichkeit geschraubt.

So werden tabellierbare Elemente beispielsweise nicht mehr direkt als Symbolleistenbausteine (über < button >) verwendet, sondern können mit der Funktionen < Toolbar Button > (für Schaltflächen) und < Toolbar Item > (für andere Steuerelemente) hinzugefügt werden.

Viele WP-Themes sind schon von Haus aus barrierefrei

Viele WordPress-Themes sind out of the box schon relativ barrierefrei, darunter auch das neue, minimalistische Standard-Theme Twenty Twenty-Three, das eine überschaubare Farbpalette verwendet und auf einen Systemschriftstapel zurückgreift. Aber auch bei der Nutzung eines Drittanbieter-Themes sollte auf eine möglichst hohe Barrierefreiheit geachtet werden. Zu diesem Zweck besteht bei der Einrichtung von WordPress die Möglichkeit, gezielt nach Themes mit der Kennzeichnung „Accessibility Ready“ zu filtern.

Zu 100% barrierefrei ist das Content-Management-System allerdings immer noch nicht. In einem Audit des WPCampus im Jahr 2019 wurde alleine 116 Accessibility-Probleme in Zusammenhang mit dem Gutenberg-Editor behoben. Speziell die Veröffentlichung von Inhalten stellt gehandicapte Seiten-Betreiber dabei immer wieder vor enorme Herausforderungen.

Tipp: Die Web Accessibility Initiative (WAI) hat eine Reihe von Zugangsrichtlinien für Web-Inhalte („Web Content Accessibility Guidelines“, WCAG) herausgegeben, anhand derer Webseitenbetreiber sicherstellen können, dass ihre Webseiten vollständig zugänglich sind.

9 Tipps für ein barrierefreies WordPress

Damit eine WordPress-Seite weitestgehend barrierefrei und nach den Richtlinien der WAI gestaltet werden kann, sollten die nachfolgenden Punkte berücksichtig werden:

1. Einfaches Handling: Die Navigation auf der Website sollte möglichst leicht verständlich und einfach zu bewerkstelligen sein. Für Nutzer, die keine Maus bedienen können ist hierbei auch die Steuerung via Tastatur ein essenzielles Kriterium.

2. Skalierbare Schriftgrößen: Durch die Nutzung relativer anstelle von absoluter Schriftgrößen wird es Menschen mit Sehbehinderung ermöglicht, den Text im Browser zu zoomen. Der Inhalt sollte auch bei einer Vergrößerung von 200 % noch gut lesbar sein.

3. Farbkontrast-Einstellungen: Menschen mit Fehlsichtigkeit haben Schwierigkeiten, den Unterschied zwischen Farben zu erkennen. Daher sollte vor allem bei Texten mit kleiner Schrift auf einen ausreichenden Kontrast zwischen den Vorder- und den Hintergrundfarben geachtet werden.

4. Alternativtexte für Bilder und Grafiken: Das alt-Attribut sollte immer ausgefüllt sein, da Screenreader für Blinde oder Sehbehinderte dieses für die Sprachausgabe des Inhalts verwenden. Dasselbe gilt auch für das title-Attribut, speziell in Hinblick auf die Verlinkungen.

5. Strukturierte Inhalte und einfacher Satzbau: Das Lesen von langen Texten ist anstrengend, daher sollte der Text durch Überschriften strukturiert, die Sätze möglichst kurz und verständlich gehalten und auf Fremdwörter verzichtet werden. Überdies erleichtern H-Tags Screenreadern und Suchmaschinen die hierarchische Verarbeitung und Wiedergabe der Inhalte.

6. HTML-Validation: Screenreader können eine WordPress-Seite nur dann ohne Probleme vorlesen, wenn diese den Standards der W3.org entspricht. Die Validität des HTML lässt sich mithilfe des W3C-Validators prüfen.

7. Aktive Bedienelemente markieren: Für sehbehinderte Menschen ist es wichtig, dass sie das aktive Bedienelement erkennen können. Das geht am einfachsten durch das Anpassen der Hintergrundfarbe.

8. Barrierefreie Formulare: Damit Screenreader und andere technische Assistenten die Beschreibungen von Formularfeldern auslesen können, müssen diese außerhalb des Feldes platziert werden. Das Setzen des Attributes reicht in diesem Fall nicht aus.

9. Ausformulierte Fehlermeldungen: User mit Farbenfehlsichtigkeit können farbige Kennzeichnungen nicht erkennen (z. B. die rote Umrandung bei nicht ausgefüllten Pflichtfeldern). Aus diesem Grund sollten die Fehlermeldungen zusätzlich in Worte gefasst werden.

Barrierefreiheit mit Plugins schaffen

Wer nicht selbst an der Barrierefreiheit seiner WordPress-Seite herumschrauben möchte, kann die diese alternativ auch durch die Installation eines Plugins verbessern. Eine vollständige Zugänglichkeit per Mausklick gibt es zwar nicht, aber mit den Tools aus unserer Liste lassen sich zumindest einige wesentliche Einstellungen in diesem Bereich vornehmen.

WP Accessibility

WP Accessibility installiert eine Toolbar, über die Anpassungen an der Schriftgröße und den Farben vorgenommen werden können. Das Plugin beinhaltet außerdem einen Farbkontrast-Tester, ermöglicht den Einbau von Skip-Links und entfernt überflüssige title-Attribute.

Gut zu wissen: Bei Skip-Links (von engl. „to skip“ = überspringen) handelt es sich um Verlinkungen, mit denen größere Webseitenbereiche übersprungen werden können. Sie dienen als Unterstützung für User, die ausschließlich mit der Tastatur arbeiten.

Hurrakify

Mit Hurrakify kann sich der User einzelne Begriffe aus dem Text durch Wörterbuch-Beschreibungen erklären lassen. Die Software ergänzt Artikel mit Tooltips und kennzeichnet besonders „schwere“ Wörter mit einer gestrichelten Linie. Beim Überfahren des Wortes mit der Maus wird eine einfache Erklärung angezeigt.

Content Author Accessibility Preview

Der Content Author Accessibility Preview zeigt Inhaltserstellern potenzielle Probleme mit der Barrierefreiheit schon vor der Veröffentlichung des betreffenden Beitrags an. Gefundene Elemente werden mit einem Rahmen markiert. Einziger Wermutstropfen: Das Tool ist leider eine Performance-Bremse, die den Ladevorgang um mehrere Sekunden verlangsamt.

Gut zu wissen: Google hat ebenfalls ein großes Interesse an barrierefreien Webseiten, denn Inhalte, die für Menschen mit Einschränkungen zugänglich, erleichtern die Arbeit des Google-Bots. Aus diesem Grund sollten Webseiten-Betreiber die Zugänglichkeit unbedingt in ihre Planung mitaufnehmen. Infos von Google zum Thema Accessibility gibt es hier.