Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video

Mein Blog basiert auf einem System, das sich WordPress nennt. Da mir Accessibility bei Webseiten ebenfalls ein großes Anliegen ist, habe ich natürlich auch bei meinem Blog darauf geachtet, dass alles barrierefrei ist. Wie Accessibility mit WordPress funktioniert, verrate ich in diesem Artikel.

Bevor ich zum Thema Barrierefreiheit (auf englisch Accessibility) mit WordPress komme, muss ich kurz die Grundlagen von WordPress erklären. WordPress ist eine Blogsoftware. Ein Blog ist eine spezielle Form einer Internetseite auf dem Artikel geschrieben werden. Es müssen nicht zwingend Fachartikel sein. Es kann auch ein „öffentliches“ Tagebuch geführt werden, es kann über Lebensfreude geschrieben werden oder ein anderes Thema. Es gibt auch Blogger (=Autoren von Blogartikeln) die Ihre Leser darüber informieren wieviel neue Kontakte sie auf der Social Media Plattform Xing gesammelt haben.

In meinem Blog finden Sie hauptsächlich Fachartikel über Accessibility, Suchmaschinenoptimierung und Social Media. Der Blog ist wie oben schon erwähnt ein WordPress-Blog.

In WordPress können Sie Seiten und Artikel erstellen. Die Links „Home“, „Wer schreibt her?“, „Referenzen“ und „Impressum“ in meinem Blog sind Seiten. Das was ich hier schreibe ist ein Artikel.

Dann gibt es Plugins. Das sind im Prinzip kleine „Programme“ welche dem WordPress-Blog neue Funktionen spendieren. So habe ich z.B. ein Plugin für Suchmaschinenoptimierung installiert, welches mir hilft bei der Onpage-Optimierung meiner Seiten und Artikel. Leider gibt es kein Plugin, welches den kompletten Blog barrierefrei(=Accessibility) macht.

Damit Sie einen Einblick bekommen was WordPress ist und was damit gemacht werden kann, hier noch ein Youtube-Video:

Barrierefreies Webdesign – Definiton

Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Websites und Software barrierefreier gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.
Barrierefreies Webdesign  bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Websites für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Internetseiten oder Accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.
Auch wenn das Thema barrierefreies Webesign wegen Menschen mit Behinderungen in die Gesellschaft gekommen ist, möchte ich ausdrücklich erwähnen, dass noch andere Persongruppen von barrierefreie Webseiten profitieren.

Barrierefreies Webdesign – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen des barrierefreien Websites erstellen, erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Sites.

In Deutschland und International gelten die Web Content Accessibility Guidelines wcag 2

Sinn der Richtlinien ist es, dass alle Arten von Behinderungen bei der Gestaltung einer Webseite berücksichtigt werden. Wenn bestimmte Kriterien nicht umgesetzt werden bedeutet dass, dass bestimmte Behinderungen von der Bedienung einer Webseite mit Absicht ausgeschlossen werden. Deswegen mein Wunsch: Sorgen Sie dafür, dass alle Menschen mit Behinderungen Ihre Webseiten bedienen können.

Hier ein Youtube-Video über barrierefreies Webdesign von mir:

Die Barrierefreiheit sollte schon beim erstellen einer Webseite berücksichtigt werden.

Umsetzung von Barrierefreiheit mit WordPress

Selbstverständlich werde ich hier nicht sämtliche Kriterien der Barrierefreiheit besprechen, sondern nur ein paar Tipps geben, die aber schon sehr viel bewirken können.

Um Accessibility bei WordPress umzusetzen muss man Themes bearbeiten. Noch so ein komischer Begriff. Was ist ein Theme? Ein Theme ist eine Art „Kleid“ für den Blog. Ein Theme bestimmt das Aussehen Deines Blog. Eine anderes Wort für Theme wäre „Vorlage“ oder „Template“. Es gibt sehr viele fertige Themes die kostenfrei heruntergeladen werden können. Wenn Sie mehrere Themes in Ihrem Blog installiert haben, können Sie in Sekunden das komplette Aussehen Ihres Blogs verändern! Das ist eine der vielen Stärken von WordPress.

Um Ihr Theme überhaupt bearbeiten zu können, müssen Sie den zu bearbeitenden Dateien per FTP schreibrechte geben. Erst dann können Sie überhaupt die Dateien bearbeiten. Von Haus aus sind alle Theme Dateien schreibgeschützt.

Danach gehen Sie in den Admin-Zugang Ihres WordPress-Blog und klicken auf „Design“ und danach auf „Editor“.

Folgende Schritte sind notwendig um eine WordPress-Webseite komplett barrierefrei zu gestalten:

1. Skalierbare Schriftgrößen

Vor Ihren Augen öffnet sich jetzt eine Datei mit Namen „style.css“. In dieser Datei können Sie wichtige Dinge für Accessibility einstellen. Wenn Sie etwa die Schriftgröße in relative Schriftgrößen statt feste Schriftgrößen ändern möchten, dann können Sie dies in der Datei style.css ändern. Suchen Sie einfach in der Datei „style.css“ nach „font-size“ und ersetzen Sie pt oder px durch relative Angaben.

Beispiel:
font-size: 0.750em;

oder

font-size: 100%;

Die skalierbaren Schriftgrößen sind für Menschen mit Sehbehinderung wichtig, damit sie im Browser die Schrift zoomen, sprich vergrößern, können. Hier sollte schon beim erstellen einer WordPress-Webseite darauf geachtet werden.

2. Der richtige Farbkontrast hilft Menschen mit Farbfehlsichtigkeit

Farbfehlsichtigkeit bedeutet, dass Menschen einer Farbe nicht den korrekten Namen zuordnen können oder Probleme haben zwischen zwei Farben einen Unterschied zu erkennen.
Wenn Sie Hintergrundfarbe und Schriftfarbe ändern möchten um den Farbkontrast Accessibilty-Gerecht einzustellen, dann können Sie dies auch in der Datei „style.css“ ändern. Suchen Sie einfach nachdem Wort „color“. So finden Sie die Hintergrund und die Schriftfarbe. Mit dem Colour Contrast Analyser können Sie überprüfen ob der von Ihnen gewählte Farbkontrast für Menschen mit einer Farbsehschwäche in Ordnung ist.

Jedes Theme hat eine Datei mit dem Namen „header.php“ . Falls in Ihrem Theme ganz oben eine Grafik eingebaut ist, dann können Sie in der Datei header.php nachschauen ob diese Grafik einen Alternativtext hat, damit der Screenreader von blinden und Sehbehinderten Menschen entsprechende Informationen bekommt.

3. Alternativtexte für Bilder

Wenn Sie Bilder in Artikel und Seiten einfügen, sorgen Sie dafür, dass Ihre Bilder Alternativtexte haben. Der Dialog für Bild einfügen hat ein Eingabefeld mit der Beschriftung „Alternativtext“. Hier können Sie einen Text eingeben der dem blinden oder sehbehinderten Menschen vom Screenreader übermittelt wird.

Beispiel für Alternativtexte für Bilder mit dem alt-Attribut:

<img src="barrierefreies_webdesign_banner.jpg" alt="Firmenlogo und eine Bildschirmtastatur entwickelt von Marlem-Software" style="max-width:800px;" height="162"/>
Achten Sie im Erstellungsprozess einer WordPress-Webseite, dass wenn Sie Bilder in die Medien hochladen, die Bilder sofort Alternativtexte bekommen.
Im nächsten Video wird erklärt wie Sie Bildern einen Alternativtext geben auf Ihrer WordPress-Webseite:

4. Inhalte mit Überschriften strukturieren

Lange Texte lesen ist anstrengend. Deswegen sollten Sie H-Tags nutzen und Ihren Texten Zwischenüberschriften geben. Die Zwischenüberschriften lockern Ihre Texte auf. Zwischenüberschriften mit H-Tags erleichtern Screenreadern sowie anderweitigen technischen Assistenten und natürlich auch den  Suchmaschinen, Ihre Texte hierarchisch korrekt zu verarbeiten und wiederzugeben.

5. Barrierefreie Formulare

Wenn Sie in Ihre WordPress-Webseite Formulare einbauen sollten auch diese barrierefrei sein. Damit der Screenreader weiß welche Beschriftung zu welchem Eingabefeld gehört, sollten Beschriftungen mit den Eingabefeldern verknüpft sein:

<label for="vorname" accesskey="v" Vorname: ([Alt]+v)/>
<input id="vorname" maxlength="30" name="Vorname" size="20" type="text" />


So sieht der Code in der Ausführung aus:
Vorname:([Alt]+v)

Das Eingabefeld Vorname bekommt einen Label. mit „for“ im Label und „id“ im Eingabefeld, auch Formularfeld genannt, werden Eingabefeld und Label verknüpft. Das ist wichtig für Screenreader. Mit dem Attribut „accesskey“ kann dem Formularfeld ein Shortcut zugeordnet werden. Die Tasten alt+v aktivieren das Eingabefeld „Vorname“, alt+n das Eingabefeld „Nachname“.
Für den Nutzer des Formulars muss es erkennbar sein, dass es die Möglichkeit von Shortcuts gibt. Formularfelder sollten rechts von der Beschriftung sein, weil dies für Screenreader besser ist.

5.1 Das aktive Bedienelement muss deutlich erkennbar sein

Für Menschen mit einer Sehbehinderung ist es wichtig, dass es gut erkennbar sein muss, welches Bedienelement aktiv ist. Meine Lieblingslösung ist, dass die Hintergrundfarbe des aktiven Bedienelements Gelb ist. Das läßt sich wie folgt mit CSS ganz einfach lösen:

/* Mit nachstehender Zeile bekommen alle aktiven Eingabefelder und Schalter eine gelbe Hintergrundfarbe */
input:focus { background-color:yellow;}


Wenn Sie Ihre Formulare so gestalten, dann sind Ihre Formulare barrierefrei.

6. Eingabefehler nicht nur optisch anzeigen sondern Sätze schreiben

Oft setzen Web-Entwickler beim Feedback zum Verhalten der Webseiten-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 eine Farbenfehlsichtigkeit oder eine Sehschwäche hat, kann damit nicht viel anfangen. Derartige Fehlermeldungen sollten Sie stets zusätzlich in Worte fassen.

7. Plugins welche die Barrierefreiheit einer WordPress-Webseite verbessern

Hier finden Sie eine Liste von Plugins, welche die Barrierefreiheit von WordPress verbessern.

7.1 WP Accessibility Plugin

Es gibt inzwischen ein Plugin, das WP Accessibility Plugin mit dem Sie bestimmte Sachen per Einstellungen in WordPress barrierefrei machen können. Folgende Einstellungen und noch mehr sind möglich mit diesem Plugin:

• Accessibility toolbar mit Schriftvergrößerung und Kontrast-Unschalter hinzufügen.
• Füge die Sprache der Seite und Leserichtung zum HTML-Element hinzu.
• Zu HTML 5 Elementen ARIA landmark roles hinzufügen
• Farbkontrast-Tester zwecks Farbenblindheit nach WCAG 2.0

7.2 Hurrakify

Hurrakify ergänzt Artikel mit Tooltips. Das heißt: Schwere Wörter im Artikel bekommen eine gestrichelte Linie.
Fährt man mit der Maus über das Wort, bekommt man eine Leichte Sprache Erklärung zu diesem Wort. Hurrakify holt sich die Leichte Sprache Informationen aus dem Hurraki Lexikon in Leichter Sprache.

Anmerkung von Markus

Ich finde dieses Plugin Klasse! Das bleibt auf diesem Blog installiert.

7.3 WP Accessibility Helper

Ich habe das Plugin WP Accessibility Helper entdeckt um eine WordPress-Webseite barrierefrei zu machen. Hier eine vollständige Liste der Plugin-Funktionen:

• Kontrastmodus (Farbgamma)
• Schriftgröße (Rem oder Zoom)
• Entladen Sie alle CSS-Dateien (Anzeigeseite in rohem HTML)
• Unterstreichen Sie alle Links
• Markieren Sie alle Links
• Anhangs-Kontrollzentrum mit der Möglichkeit, Bildtitel und Alt-Tags hinzuzufügen / zu bearbeiten
• Alt+Z – Öffnen Sie die Seitenleiste für Eingabehilfen
• Alt+X – Schließen Sie die Eingabehilfenleiste
• Steuern Sie alle Anhangsbilder mit AJAX-Funktionen von einem Ort aus
• role=“link“ für jedes a Tag
• Entfernen Sie Titelattribute aus Links
• HTML5 Landmark Control Center
• Speichern Sie den Kontrastmodus mit Benutzer-Cookies
• Klare Auswahl aus Cookies
• Für mobile Geräte ausblenden – Steuerelemente
• Seitenleistenposition (links oder rechts)
• Steuerelemente für Graustufenbilder
• Steuerelemente für dunkle und helle Themen
• Steuerelemente für Schriftfamilien
• Invertieren Sie den Farb- und Bildmodus
• Entfernen Sie die Option CSS-Animationen
• Lesbare Schriftartoption (schnelles Wechseln zur Arial-Schriftfamilie)
• Sortierbare Widgets-Reihenfolge (Drag & Drop)
• DOM-Scanner – Überprüfen Sie Seiten und Beiträge auf Eingabehilfen, z. B.: Bildalter, Linkrolle und -titel und vieles mehr.

Hier noch ein Youtbe-Video zum WP Accessibility Helper:

Anmerkung von Markus

Ich habe mein altes Plugin für Barrierefreiheit bei WordPress deinstalliert und habe das WP Accessibility Helper-Plugin installiert. Ich bin begeistert und werde in Zukunft dieses Plugin einsetzen. Für Internet-Nutzer mit einer Sehschwäche ist dieses Plgin besonders geeignet.
In Sachen Barrierefreiheit bei WordPress ist dieses Plugin das beste, dass ich je installiert habe.

7.4 Plugin wA11y – The Web Accessibility Toolbox

Sprache leider in Englisch. Mit dem Plugin können Blogartikel und Seiten auf Barrierefreiheit überprüft werden. Damit das Plugin verwendet werden kann, müssen Sie in Ihrem WordPress-Account eingeloggt sein.
Mit dem Plugin können folgende Sachen überprüft werden:

• Überschriften
• Kontrast
• Linktext
• Beschriftungen von Eingabefelder
• Alternativtexte bei Bilder
• Landmarks
• Screen reader Wand

Wenn Ihre WordPress-Webseite alle Kriterien erfüllt ist das super. Leider sind das lang nicht alle Kriterien die erfüllt sein müssen, damit ihre WordPress-Webseite komplett barrierefrei ist. Aber Sie können sagen, dass Sie sich mit Hilfe des Plugins um einige Kriterien des barrierefreien Webdesign gekümmert haben und an Menschen mit unterschiedlichen Behinderunen gedacht haben. Das Plugin kümmert sich hauptsächlich um die Barrierefreiheit für blinde Menschen oder Menschen mit einer Sehschwäche.

Anmerkung von Markus

Das Plugin funktioniert sehr gut. Kann ich auch empfehlen.

8. Barrierefreie WordPress-Themes – gibt es das?

Bevor Sie sich die Mühe machen ihr WordPress-Theme selber barrierefrei zu programmieren oder einen Programmierer zu beauftragen, können Sie nach WordPress-Themes schauen, die schon barrierefrei sind. Auf der WordPress-Seite können Sie inzwischen nach barrierefreie Themes im Filter suchen in dem Sie in der Spalte „Funktionen“ die Option „Für Barrierefreiheit geeignet anklicken. Sie bekommen dann folgendes Suchergebnis:

• Auflistung von barrierefreie Themes

Anmerkung von Markus

Ich habe diese Themes ausprobiert. Sie sind nicht 100%ig barrierefrei. Beim Theme „Twentysixteen“ müssen umfangreiche Farbanpassungen gemacht werden, damit das Theme für Menschen mit Farbenfehlsichtigkeit nutzbar ist. Menschen mit einer Sehschwäche profitieren ebenso von einem barrierefreien Farbkontrast.

9. HTML Validation

Damit die Vorlese-Software von Blinden und Sehbehinderten, Screenreader genannt, keine Probleme hat bei dem Lesen einer WordPress-Webseite muss diese HTML-Valide sein. Das bedeutet, dass die WordPress-Webseite den Standards der W3.org entsprechen muss.

Eine WordPress-Webseite W3C-Valide machen, gelingt nicht immer. Wenn Sie ein Plugin einsetzen, das Sie unbedingt benötigen, dass aber W3C-Fehler in Ihre Webseite bringt, können Sie nichts dagegen tun.

Mit dem W3C-Validator können Sie testen ob ihr HTML valide ist.

Barrierefreiheit bei WordPress Testen

Ein automatisierter Test gibt es nicht. Ein Test auf Barrierefreiheit kann nur von Hand mit Hilfe von oben genannten Richtlinien erfolgen.

Hier gibt es einen tolle Möglichkeit WordPress-Webseiten auf Barrierefreiheit zu überprüfen:

BITV-Test – Verzeichnis der Prüfschritte

Suchmaschinen lieben barrierefreie WordPress-Webseiten

Der Screenreader, die Vorlesesoftware für blinde Menschen, und Suchmachinen haben eine sehr wichtige Gemeinsamkeit: Beide können nur lesen und somit keine Bilder und Videos anschauen.
Das bedeutet, dass eine barrierefreie WordPress-Webseite gute Chancen hat in Suchergebnissen von Suchmaschinen ganz vorne zu landen.

Barrierefreiheit mit WordPress – Schlussbemerkung

Wenn Sie diese Tipps umsetzen haben Sie einiges dafür getan, damit Menschen mit unterschiedlichen Einschränkungen den Inhalt Ihres WordPress-Blogs war nehmen können. Achja, die Suchmaschine freut sich auch über barrierefreie Blogs. Google ist blind und kann nur lesen.

Wenn Sie noch Fragen haben zur Barrierefreiheit mit WordPress dürfen Sie mich gerne Anrufen 07072/1278463 oder eine Mail schreiben an info@marlem-software.de .