Alle Beiträge von Markus

Barrierefreiheit mit WordPress

In diesem Artikel erkläre ich wie Sie einen WordPress-Blog barrierefrei machen können.

Was ist WordPress?

WordPress ist eine kostenlose und freie Webanwendung. WordPress kann als Blog oder als Content-Management-System (CMS) verwendet werden. Weil WordPress sich mittler Weile auch als Content-Management-System eignet, werden auch viele Webseiten mit WordPress erstellt. Das Wort Blog setzt sich zusammen aus Web und Log. Log steht für Logbuch. Ein Blog ist also zunächst mal ein meist öffentlich geführtes Tagebuch.

Barrierefreiheit in der Informatik – Was ist das?

Barrierefreiheit in der Informatik bedeutet, dass Webseiten, Programme und Betriebssysteme so gestaltet sind, dass sie von ALLEN MENSCHEN, auch von Menschen mit körperlichen Einschränkungen, bedient werden können. Anders ausgedrückt: Barrierefreiheit in der Informatik bedeutet, dass Webseiten, Programme und Betriebssysteme keine Hindernisse bzw. Barrieren bei der Bedienung für Menschen mit Behinderungen haben.

Gesetzliche Grundlagen

Seit 1. Mai 2002 gibt es ein Gleichstellungsgesetz für Menschen mit Behinderungen. Im Jahr 2016 wurde dieses Gesetz überarbeitet und im September 2016 trat die Überarbeitung in Kraft. Im § 12 Barrierefreie Informationstechnik werden Träger öffentlicher Gewalt zur Barrierefreiheit bei Webseiten, Programme und Apps verpflichtet. Träger öffentlicher Gewalt sind Behörden, Hochschulen und Universitäten.

Barerierefreies Webdesign – Definiton

Barrierefreiheit mit WordPress ist das gleiche wie barrierefreies Webdesign mit WordPress. Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Webseiten, Software und Betriebssysteme so gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.
Barerierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie für ALLEN Menschen, auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar und bedienbar ist.

Barrierefreies Webdesign – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Webseite nach den Grundlagen des barrierefreies Webdesign erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Webseiten.

Wenn Sie eine Webseite z. B. aus Österreich barrierefrei machen sollen, wenden Sie die WCAG 2 an. Bei Internetseiten aus Deutschland die BITV 2.0 .

Barrierefreiheit mit WordPress – die Umsetzung

Ein Theme bei WordPress ist eine Art „Kleid“ für den Blog. Ein Theme bestimmt das Aussehen des Blogs. Eine anderes Wort für Theme wäre „Vorlage“ oder „Template“. Es gibt sehr viele fertige Themes die kostenfrei heruntergeladen werden können. Wenn mehrere Themes im Blog installiert sind, kann das Aussehen des Blogs in Sekunden verändert werden! Das ist eine der vielen Stärken von WordPress.

Damit das Theme barrierefrei wird, muss es bearbeitet werden. Um ein Theme überhaupt bearbeiten zu können, muss mit Hilfe eines FTP-Zugangs der Schreibschutz entfernt werden. Erst dann können die Dateien des Themes bearbeitet werden.

Inzwischen gibt es auf der WordPress-Webseite eine Auflistung von Themes die barrierefrei sind:
Auflistung von barrierefreie Themes

Um ein Theme zu ändern wird der Admin-Zugang benötigt. Dort auf „Design“ und danach „Editor“ klicken. Es öffnet sich eine Datei mit Namen „style.css“. In dieser Datei können wichtige Einstellungen für die Barrierefreiheit gemacht werden.

Damit Menschen mit Sehbehinderung die Schriftgröße im Browser skalieren (=vergrößern) können, muss in der style.css-Datei relative Schriftgrößen verwendet werden. Hier zwei Beispiele:

font-size: 100%;
font-size: 0.750em;

Für Menschen mit einer Farbsehschwäche ist es wichtig, dass genügend Farbkontrast vorhanden ist, zwischen Hintergrundfarbe und Schriftfarbe. 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.

Wenn Bilder in WordPress hochgeladen werden, sollten diese einen Alternativtext haben, damit die Vorlesesoftware von Blinden und Sehbehinderten vorlesen kann, was auf dem Bild zu sehen ist. Die Vorlesesoftware heißt „Screenreader“, zu deutsch „Bildschirmleser“. Es ist nicht nötig, dass im Alternativtext das Bild ganz detaliert beschrieben wird. Es sollte nur ganz grob erklärt werden, was auf dem Bild zu sehen ist.
Hier ein Beispiel:

<img style="max-width: 800px;" src="barrierefreies_webdesign_banner.jpg" alt="Firmenlogo und eine Bildschirmtastatur entwickelt von Marlem-Software" height="162" />

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.

Das Plugin „WP Accessibility Plugin“ zur Verbesserung der Barrierefreiheit

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

Barrierefreiheit mit WordPress – Schlussbemerkung

WordPress eignet sich hervorragend um Webseiten barrierefrei zu machen. Wenn die obigen Tipps umgesetzt werden, dann ist die WordPress-Webseite nicht 100% barrierefrei, aber viele wichtige Barrieren für Menschen mit unterschiedlichen Einschränkungen sind beseitigt. Achja, die Suchmaschine freut sich auch über barrierefreie Blogs. Google ist blind und kann nur lesen.

Autor: Markus Lemcke
Webseite: Barrierefreiheit mit WordPress und barrierefreies Webdesign von Marlem-Software

(301)