Barrierefreiheit bei WordPress-Webseiten – Gastbeitrag von Markus Lemcke

In diesem Artikel erklärt Markus Lemcke, was barrierefreies Webdesign ist und wie es bei WordPress-Webseiten umgesetzt werden kann.

Barrierefreiheit in der Informatik warum gibt es das?

Seit 1. Mai 2002 gibt es das Gesetz zur Gleichstellung von Menschen mit Behinderungen. Ziel dieses Gesetzes ist es, die Benachteiligung von Menschen mit Behinderungen zu beseitigen und zu verhindern.

In § 12 Barrierefreie Informationstechnik werden Träger öffentlicher Gewalt zur Barrierefreiheit bei Webseiten, Programme und Apps verpflichtet. Träger öffentlicher Gewalt sind zum Beispiel Behörden. Barrierefreiheit in der Informatik bedeutet, dass Webseiten, Programme, Betriebssysteme und Apps so gestaltet sind, dass sie für alle Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen, bedienbar sind.

Barrierefreies Webdesign – Was ist das?

Webseiten, die für alle Menschen bedienbar sind,sind mit barrierefreies Webdesign gestaltet.

Richtlinien

Man braucht also allgemein akzeptierte und anerkannte Richtnien um beurteilen zu können, ob eine Webseite nach den Grundlagen des barrierefreien Webdesigns erstellt wurde. Inzwischen gibt es die internationale, WCAG 2.0, und die nationalen BITV 2.0, Richtlinien.

Der Weg zum barrierefreien Web-Design

Was ist ein Screenreader?

Wenn ein Mensch blind oder sehbehindert ist, heißt das nicht, dass er nicht am PC bzw. Laptop arbeiten kann. Ein Screenreader (ein Bildschirmleseprogramm) ist ein sinnvolles Hilfsmittel, um sich auf Webseiten zu orientieren. Der Screenreader „spielt“ für den blinden oder sehbehinderten Menschen die Augen und liest den Bildschirminhalt. Der Screenreader kann den gelesenen Text über die Soundkarte ausgeben oder an eine Braillezeile schicken. Wenn der gelesene Text über die Soundkarte ausgegeben wird heißt das, dass der Text dem blinden oder sehbehinderten Menschen vorgelesen wird. Es gibt einen kostenlosen Screenreader der NVDA heißt.

Was ist WordPress?

Ein Blog ist eine spezielle Form einer Internetseite, auf der Artikel geschrieben werden. WordPress ist z.B eine Blogsoftware. Jeder kann einen eigenen Blog betreiben, d. h. ss müssen nicht zwingend Fachartikel sein, die in einem Blog veröffentlicht werden. Es kann auch ein „öffentliches“ Tagebuch geführt werden, in dem z.B. über Lebensfreude oder ein anderes Thema geschrieben wird. Es gibt auch Blogger (=Autoren von Blogartikeln), die Ihre Leser darüber informieren, wieviel neue Kontakte sie auf andren Social Media Plattformen (z. B. Xing, LinkedIn oder Facebook) gesammelt haben.

Umsetzung von Barrierefreiheit bei WordPress

Um eine WordPress-Webseite barrierefrei zu machen, sind einige Schritte erforderlich

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. Der Alterntivtext sollte ganz grob beschreiben, was auf dem Bild zu sehen ist.

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

<code>

Die Datei “style.css” muss bearbeitet werden können

Um die Datei “style.css” überhaupt bearbeiten zu können, müssen Sie den zu bearbeitenden Dateien per FTP schreibrechte geben. Erst dann können Sie überhaupt die Datei 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“. Nun sehen Sie die Datei “style.css”.

Schrifgrößen, die angepasst werden können

Menschen mit Sehbehinderung möchten mit Hilfe des Browsers Schriftgrößen verändern können. Schriftgrößen können fest angegeben werden in pt und px. Wenn die Schriftgröße mit diesen Einheiten festgelegt sind, können sie mit dem Browser über die Zoom-Funktion nicht angepasst werden. Um Schriftgrößen anpassbar anzugeben müssen Sie em oder % verwenden.

Beispiel:

oder

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 <a href=”https://www.paciellogroup.com/resources/contrastanalyser/” target=”_blank”>Colour Contrast Analyser</a> können Sie überprüfen ob der von Ihnen gewählte Farbkontrast für Menschen mit einer Farbsehschwäche in Ordnung ist.

Das Plugin WP Accessibility

Es gibt inzwischen ein Plugin, das <a href=”https://de.wordpress.org/plugins/wp-accessibility/” target=”_blank” rel=”noopener noreferrer”>WP Accessibility Plugin</a> mit dem Sie bestimmte Sachen per Einstellungen in WordPress barrierefrei machen können. Folgende Einstellungen und noch mehr sind möglich mit diesem Plugin:

<ul>

<li>Farbkontrast-Tester zwecks Farbenblindheit nach WCAG 2.0</li>

<li>Accessibility toolbar mit Schriftvergrößerung und Kontrast-Unschalter hinzufügen.</li>

<li>Füge die Sprache der Seite und Leserichtung zum HTML-Element hinzu.</li>

<li>Zu HTML 5 Elementen ARIA landmark roles hinzufügen</li>

</ul>

WordPress-Themes, die schon barrierefrei sind – gibt es das?

Bevor Sie sch die Mühe machen, ihr WordPress-Theme selber barrierefrei zu programmieren oder einen Programmierer zu beauftragen, können direkt nach WordPress-Themes schauen, die schon barrierefrei sind.(https://de.wordpress.org/themes/tags/accessibility-ready). Sie können 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:

<ul>

<li><a href=”https://de.wordpress.org/themes/tags/accessibility-ready/” target=”_blank”>Auflistung von barrierefreie Themes</a></li>

</ul>

Fertig!

Wenn Sie alle diese Tipps umsetzen, dann ist Ihre Webseite nicht zu 100% barrierefrei, aber Sie haben die wichtigsten Barrieren für Menschen mit körperlichen Einschränkungen entfernt.

Autor: Markus Lemcke, Juli 2017

Markus Lemcke ist körperbehindert, Er ist Geschäftsinhaber des Unternehmens Marlem-Software und Experte in Sachen Barrierefreiheit in der Informatik.