Barrierefreie WordPress-Website im Fokus

Weltweit nutzen 57% aller User mobile Geräte für Online-Besuche. Tendenz steigend. Gleichzeitig verbringen die Nutzer immer weniger Zeit auf einzelnen Websites – Sprunghaftigkeit, Überangebot und Ungeduld sind da nur drei Aspekte, die es zu nennen gilt. Braucht eine Webseite Ewigkeiten zum Laden, ist der potenzielle Kunde schneller weg, als man Pagespeed schreiben kann. Schade! 

Der Pagespeed der Website ist also absolut mitentscheidend für Erfolg oder Misserfolg. Außerdem muss der Seitenaufbau klar und übersichtlich sein. Schnelle Websites brauchen eine schlanke, gut durchdachte und übersichtliche Struktur. Das ist genau das, was barrierefreies Webdesign auf den Punkt erfüllt. Warum und wie Sie durch barrierefreies Webdesign Ihren Pagespeed erhöhen, habe ich in meinem Blogartikel „Vorteile barrierefreier Websites“ erklärt. 

Sie wollen auch von den Vorteilen profitieren und Ihre Website ist mit WordPress erstellt? Eine barrierefreie WordPress-Website lässt sich ganz leicht umsetzen. In diesem Blogartikel zeige ich Ihnen, auf welche 7 Schritte es dabei ankommt.

Inklusive Onlinepräsenz mit barrierefreiem Webdesign 

Den Begriff „Barrierefreiheit“ (engl.: Accessibility) kennen wir oft im Zusammenhang mit Gebäuden oder Transportmitteln. Er umfasst alles, was Menschen mit einem körperlichen Handicap den Zugang oder die Benutzung dieser Einrichtungen ermöglicht. Übertragen auf eine Website heißt Zugänglichkeit, dass die Nutzung oder der Besuch für alle User problemlos möglich sein soll. Das schließt Menschen ein, die z. B. schlecht sehen, schlecht hören, Konzentrationsprobleme haben oder unter motorischen Einschränkungen leiden. Web-Accessibility erreicht man durch inklusives Webdesign, ein Design also, das alle User inkludiert.

Mit dem sog. Barrierefreiheitsstärkungsgesetz (BFSG) müssen spätestens ab dem 28.07.2025 neue Websites von Unternehmen die mehr als 2 Millionen € Jahresumsatz machen oder mehr als 20 Mitarbeiter beschäftigen, sowie Shops und Webseiten öffentlicher Einrichtungen, barrierefrei gestaltet werden. Dafür gelten in Deutschland und international bestimmte Richtlinien, die Web Content Accessibility Guidelines (WCAG-Richtlinien) 2.0. Sie berücksichtigen alle Arten von körperlichen und geistigen Einschränkungen. Wenn Sie diese einhalten, schließen Sie niemanden vom Besuch Ihrer Website aus und leisten einen wertvollen Beitrag zur Inklusion von Menschen mit Behinderungen.

Statt damit bis 2025 zu warten, können Sie diese Richtlinien jetzt schon für Ihre bestehende Website umsetzen und sich damit eine bessere Reichweite im Google-Ranking ermöglichen. Sichern Sie sich die Pole-Position in Ihrer Branche!

Optimale Zugänglichkeit mit WordPress

Barrierefreies Webdesign mit WordPress ist selbstverständlich möglich. Mit verschiedenen modernen WordPress Theme-Designs bietet WordPress den Usern eine gute Auswahl an Vorlagen an. Mit diesen Tools legen sie die grafische Gestaltung fest. Ergänzt werden diese um Zusatzmodule, sog. WordPress Plugins. Diese Mini-Programmen machen weitere Einstellungen in Ihrer Website möglich. Da es leider kein Plug-in gibt, das die Barrierefreiheit für die gesamte Seite übernimmt, müssen die jeweiligen Maßnahmen einzeln ausgeführt werden. 

Accessibility gilt auch für die Websites, auf denen Blogartikel veröffentlicht werden. Diese speziellen Websites benötigen eine sog. Blogsoftware. WordPress ist das meistgenutzte Content Management Systeme (CMS) für das Programmieren von Blog-Seiten.

In 12 Schritten zur Barrierefreiheit

Software für Menschen mit Sehbehinderung, der sog. Screenreader. Für die Screenreader-Komptabilität wir der Standard W3.org benötigt. Manche WordPress Plug-ins erfüllen diese Standards leider nicht. Sie können die HTML-Validation mit dem W3C-Validator überprüfen.

Mit den folgende 12 Schritten machen Sie Ihre Website vollständig barrierefrei:

1. Schriften

Menschen, die schlecht sehen, brauchen eine gut lesbare Schrift. Sie muss nicht nur groß genug, sondern auch klar und kontrastreich sein, sollte also keine Serifen und Co. haben. Wichtig ist es auch, dass die Schriftgröße im Browser gezoomt werden kann. Dazu muss die Skalierung von feste auf relative Schriftgröße geändert werden. Oftmals kann man das im Template einstellen. Für die Barrierefreiheit eignet sich unter den Google-Fonts z.B. die:

Noto Sans Regular, Open Sans Regular, Source Sans Pro Regular, Fira Sans Regular

2. Text

Text sollte stets linksbündig mit ausrechend Zeilenabstand und in Groß-Kleinschreibung stehen. 

3. Farbkontraste

Menschen, die Farben nicht unterscheiden bzw. nicht richtig wahrnehmen können, sind auf einen hohen Farbkontrast angewiesen. Mit speziellen Colour Contrast Analyser, die im Netz frei verfügbar sind, können Sie überprüfen, ob der Farbkontrast für diese Menschen passt.

4. Meiden Sie Rot Grün Kombinationen

Vermeiden Sie Rot und Grün miteinander zu kombinieren. Menschen mit einer Rot-Grün-Schwäche können diese Farben nicht gut voneinander unterscheiden.

5. Bildbeschreibungen

Zu allen Bildern sollten Sie Alternativtexte einfügen, die durch den Screenreader vorgelesen werden. Blinde und Menschen mit starker Sehbehinderung können so das dargestellte Motiv erfassen.

> Im Menüpunkt „Alternativtext“, der unter dem Bereich „Dialog“ zu findet ist, können diese Texte eingegeben werden. Am besten tragen Sie gleich beim Hochladen zu jedem Bild einen Alternativtext ein.

6. Vermeiden Sie Texte in Bildern

> Im Menüpunkt „Alternativtext“, der unter dem Bereich „Dialog“ zu findet ist, können diese Texte eingegeben werden. Am besten tragen Sie gleich beim Hochladen zu jedem Bild einen Alternativtext ein.

7. Aria Labels

> Wird die Webseite mit einem Screenreader ausgelesen, spielen die Aria-Lables eine Große Rolle. Sie sorgen dafür, dass Text sauber vorgelesen wird. Sie sollten alle Schaltflächen entsprechend „lablen“.

8. Zwischenüberschriften

Durch Zwischenüberschriften lassen sich Texte sinnvoll gliedern. Diese Struktur wird durch den Screenreader vorgelesen. So kann der Text leichter erfasst werden.

> Wenn Sie sog. H-Tags setzen, werden Ihre Überschriften als solche erfasst und heben sich vom übrigen Fließtext ab.

9. Formulare und Tabellen

Die Formulare und Tabelle, die Sie in Ihre Website einbauen, können Sie ebenfalls barrierefrei gestalten. Dazu müssen Sie das jeweilige Eingabefeld mit der Beschriftung verknüpfen, damit der Screenreader ohne Probleme durch das Formular führen kann.

> Jedes Eingabefeld, z. B. „Vorname“, „Nachname“ usw., bekommt jeweils zwei Label zugeordnet. Das Label „for“ kennzeichnet den Namen des Eingabefeldes, das Laben „id“ das zugehörige Formularfeld.

> Verfügt der User über Tastaturzugänglichkeit, können Shot-Cuts benutzt werden. In diesem Beispiel führen die Tasten Alt+V zum Eingabefeld „Vorname“ und Alt+N zum Eingabefeld „Nachname“. Diese Shortcuts müssen mit dem Attribut „accesskey“ gekennzeichnet sein. 

Achten Sie auch darauf, dass deutlich erkennbar ist, welches Bedienfeld gerade aktiv ist. Am besten heben Sie es hervor, indem Sie eine starke Kontrastfarbe im Hintergrund wählen. Heben Sie nur den Rand farbig hervor, ist dies für Menschen mit eingeschränkter Sehfähigkeit kaum oder nur schwer erkennbar. Zusätzlich zur grafischen Hervorhebung sollten Sie mit Texthinweisen arbeiten. Formulieren Sie dabei so genau wie möglich, welche Eingaben fehlen. Sind Pflichtfelder nicht ausgefüllt, helfen Hinweise in ganzen Sätzen.

10. Barrierefreie WordPress-Themes

Bei WordPress gibt es schon einige barrierefreie Themes. In der Suchoption können Sie die herausfiltern.

> Klicken Sie in der Spalte „Funktionen“ die Option „Für Barrierefreiheit geeignet“ an. Ich selbst kann Generate-Press in Kombination mit Genervte-Blocks empfehlen.

11. Suchmaschinenoptimierung durch barrierefreies Webdesign mit WordPress

Klare farbliche Abgrenzungen der Absätze. Der Blick des Users sollte durch eine klare Userführung geleitet werden. Oft helfen auch klare farbliche Abgrenzungen von Thema zu Thema.

12. Suchmaschinenoptimierung durch barrierefreies Webdesign mit WordPress

Für Websites war bisher immer eine gute optische Umsetzung wichtig, frei nach dem Motto, der bunte Vogel fängt den Wurm! Heute ist vor allem der Ladespeed entscheidend. Er punktet bei der Suchmaschinenoptimierung (SEO). SEO und Barrierefreiheit gehen Hand-in-Hand: Der Pagespeed Ihrer Website erhöht die Core-Werte von WordPress, denn je höher der Pagespeed, desto häufiger wird die Seite von Usern tatsächlich geladen und möglicherweise auch gelesen. Das verbessert Ihr Google-Ranking. Ihre Seiten werden schneller und besser in der Suchmaschine gefunden. Barrierefreies Webdesign ist der Schlüssel zum Erfolg Ihrer Website. 

Sie brauchen Unterstützung bei der Umsetzung? Kein Problem – Rufen Sie mich an oder schicken Sie mir eine digitale Brieftaube. Gemeinsam checken wir Ihren Internetauftritt und machen ihn fit für die barrierefreie Zukunft sowie für Google. 

Fazit

Das Thema Barrierefreiheit im Internet ist heute schon relevant für Sie, denn Sie verhelfen damit Ihrer Website zu mehr Erfolg. Als Vorreiter können Sie jetzt schon von den Vorteilen profitieren. Wenn die gesetzlichen Regelungen in Kraft treten, kommt kein Zeitdruck auf und Sie können sich entspannt zurücklehnen.