Barrierefreiheit mit WordPress – Anleitung

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:

Barerierefreies 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.
Barerierefreies 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.

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.

International gelten die Web Content Accessibility Guidelines wcag 2

In Deutschland gilt die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz

Wenn ich eine Webseite z. B. aus Österreich frei von Barrieren machen soll, wende ich die WCAG 2 an. Bei Seiten aus Deutschland die BITV 2.0.

Barrierefreiheit bei Websites gibt es also national und international.

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

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.

Für Menschen die lieber gerne Video schauen als lesen, gibt es jetzt auch ein Youtube-Video zum Thema Barrierefreiheit bei WordPress:

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“.

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%;

CSS-Daatei in WordPress: Schriftgröße barrierefrei angeben
CSS-Daatei in WordPress: Schriftgröße barrierefrei angeben

Die skalierbaren Schriftgrößen sind für Menschen mit Sehbehinderung wichtig, damit sie im Browser die Schrift zoomen, sprich vergrößern, können.

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.

Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht
Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht

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"/>

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.

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

Barrierefreie WordPress-Themes – gibt es das?

Bevor Sie sch 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:

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.

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.

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 07121/504458 oder eine Mail schreiben an info@marlem-software.de .

Barrierefreie Software-Entwicklung: Wie kann eine Software für Blinde barrierefrei gemacht werden?

Im Blogartikel „Accessibility – Barrierefreie Software-Entwicklung: Blinde“ habe ich erklärt, welche Probleme blinde Menschen bei der Bedienung von Software haben. In diesem Blogartikel erfahren Sie wie Software entwickelt werden kann, damit blinde Menschen keine Probleme bei der Bedienung von Software haben.

Da blinde Menschen mit einem Programm namens Screenreader arbeiten, sind sie darauf angewiesen, das die Programmoberfläche der Software dem „Bildschirmleser“ Textinformationen bereitstellen.

Wenn Sie Programmoberflächen mit Java entwickeln sollten Sie die Swing-Komponenten benutzen. Diese haben die Eigenschaften „AccessibleName“ und „AccessibleDescription“. Diesen Eigenschaften können Sie Textinformationen für den Screenreader zuweisen. Näheres über die barrierefreie Softwareentwicklung mit Java können Sie im Blogartikel „Accessibility: Barrierefreie Software-Entwicklung mit Java“ nachlesen.

Wenn Sie mit dem Microsoft .net-Framework Programmoberflächen entwickeln so gibt es dort ebenso die Eigenschaften „AccessibleName“ und „AccessibleDescription“.
Ausführliche Informationen finden Sie im Blogartikel „Accessibility: Barrierefreie Software-Entwicklung mit .net bzw. C#“.

Ebenso ist es wichtig, dass Sie Grafiken einen Alternativtext geben. Falls In Ihrer Software Videos vorhanden sind, die für die Benutzung der Software wichtig sind, sollten Sie eine Zusammenfasung des Videoinhalts als Text bereitstellen.

Blinde Menschen können keine Computermaus bedienen, deswegen muss eine Software komplett per Tastatur bedienbar sein, damit Sie für blinde Menschen bedienbar ist. Ihre Software sollte ein Menü besitzen in dem die wichtigsten Programmfunktionen vorhanden sind. Außerdem hilft es blinde Menschen, wenn wichtige Programmfunktionen mit Tastenkürzel(Shortcuts) ausgeführt werden können. Wenn Ihre Software nur Schalter ohne Beschriftung besitzt, müssen blinde Menschen so lange die Tabulatortaste drücken, bis der gewünschte Schalter den Fokus hat. Das ist sehr mühsam.
Wenn Sie in Ihre Software Eingabefelder mit Beschriftungen haben, dann sorgen Sie dafür, dass die Beschriftung mit dem Eingabefeld verbunden ist und per Tastenkürzel direkt erreichbar ist. Wenn der Blinde das Tastenkürzel der Beschriftung drückt wird der Textcursor in das dazugehörige Eingabefeld gesetzt.

Mit diesen Maßnahmen wird Ihre Software für Blinde bedienbar.

Barrierefreie Software-Entwicklung: Blinde


In diesem Blogartikel erfahren Sie die Definition von Blindheit und welche Probleme blinde Menschen bei der Bedienung von Software haben.

Blindheit ist eine Form von Sehbehinderung. Blinden Menschen fehlt das visuelle Wahrnehmungsvermögen ganz. Blindheit kann angeboren sein oder während des Lebens durch Unfall oder Krankheit entstehen. Wenn die Blindheit beide Augen betrifft, ist sie eine schwere Behinderung. Blinde haben einen Rechtsanspruch auf Blindengeld um die behinderungsbedingten Nachteile auszugleichen.

Hier stellt sich vielleicht für viele Blogleser die Frage, ob Blinde überhaupt einen Computer bedienen können. Menschen die gar nichts sehen können, sind auf keinen Fall in der Lage einen Computer mit der Maus zu bedienen. Ist Windows ohne Maus überhaupt zu bedienen?

Drücken Sie mal, es ist egal welches Windows sie haben, die Tasten Strg+Esc gleichzeitig. Schon öffnet sich das Startmenü. Nun können Sie mit der Cursortaste hoch und Cursortaste runter durch das Startmenü navigieren. Wenn Sie einen Menüpunkt auswählen möchten, drücken Sie die Taste „Enter“. Sie sehen, Windows lässt sich sehr wohl mit der Tastatur bedienen. Aber woher weiß der Blinde was momentan auf dem Bildschirm angezeigt wird?

Es gibt da ein Programm mit Namen Screenreader. Screenreader bedeutet auf deutsch „Bildschirmleser“. Ja, blinde Menschen können mit einer Screenreader-Software den Bildschirm lesen. Lesen und sehen ist aber nicht das gleiche. Grafiken und Bilder können nicht gelesen werden.

Durch logische Schlussfolgerung wissen wir jetzt wann blinde Menschen bei der Bedienung von Software Probleme haben.

Software die nur mit der Maus und nicht per Tastatur zu bedienen ist, kann von Blinden nicht bedient werden. Schaltflächen die nur eine Grafik besitzen und für den Screenreader keinen Text bereitstellen sind für Blinde nicht zu bedienen.
Videos sind selbstverständlich ebenfalls nicht wahrnehmbar für blinde Menschen.
So bald eine Programmoberfläche komplett aus Grafiken besteht, die für den Screenreader keinen Text bereitstellen, ist sie für blinde Menschen nicht zu bedienen.

Wie die Probleme von blinden Menschen bei der Software-Entwicklung gelöst werden können, erfahren Sie im Artikel „Wie kann eine Software für Blinde barrierefrei gemacht werden?

Accessibility: Barrierefreie Software-Entwicklung mit .net bzw. C#

Im Artikel „Richtlinien zur barrierefreier Software-Entwicklung ( Accessibility ) mit .net bzw. C#“ ging es um Richtlinien wie man mit .net barrierefreie Software entwickelt. In diesem Artikel geht es um die konkrete Umsetzung der Richtlinien.Sie erfahren in diesem Artikel konkrete Schritte zur Entwicklung von barrierefreie Software mit .net bzw. C#.

Im Artikel „Richtlinien zur barrierefreier Software-Entwicklung ( Accessibility ) mit .net bzw. C#“ ging es um Richtlinien wie man mit .net barrierefreie Software entwickelt. In diesem Artikel geht es um die konkrete Umsetzung der Richtlinien.Sie erfahren in diesem Artikel konkrete Schritte zur Entwicklung von barrierefreie Software mit .net bzw. C#.

Die erste Programmiersprache welche die Entwicklung von barrierefreie Software unterstützte war Java. Mehr dazu können Sie im Artikel „Barrierefreie Software-Entwicklung (Accessibility) mit Java“. Bei den Programmiersprachen Delphi und C++ fehlt eine Unterstützung von Haus aus.

Eine wichtige Voraussetzung für eine barrierefreie Software ist die Unterstützung von Eingabehilfen wie z. B. Screenreader. Damit diese Eingabehilfen die entsprechenden Informationen bekommen, besitzen .net-Komponenten haben hierfür folgende Eigenschaften:

AccessibleName:
Die Eigenschaft „AccessibleName“ ist eine Kurzbeschreibung der entsprechenden Komponente

AccessibleDescription:
Die Eigenschaft „AccessibleDescription“ ist eine Textbeschreibung der visuellen Darstellung dieser Komponente.

AccessibleRole:
Die Eigenschaft „AccessibleRole“ beschreibt die Aufgabe, die an Eingabehilfen übermittelt wird. Die zulässigen Werte werden von der AccessibleRole-Enumeration definiert. Der Wert wird von vielen Eingabehilfen verwendet, um zu ermitteln, um welche Art von Schnittstellenelement es sich bei dem Objekt handelt.

AccessibilityObject:
Enthält eine AccessibilityObject-Instanz, die für die Eingabehilfe Informationen über das Steuerelement enthält. Die Eigenschaft ist schreibgeschützt und wird vom Designer festgelegt.

AccessibleDefaultActionDescription:
Enthält eine Beschreibung der Standardaktion des Steuerelements. Diese Eigenschaft kann nicht zur Entwurfszeit festgelegt werden, sondern nur per Programmcode.

Hier kurz ein Beispiel wie man diese Eigenschaften setzt.

neuToolStripMenuItem.AccessibleName = „Datei neu“;
neuToolStripMenuItem.AccessibleDescription = „Neue Textdatei anlegen“;
neuToolStripMenuItem.AccessibleRole = AccessibleRole.MenuItem;

Des weiteren ist es wichtig wie oben schon erwähnt wird, dass die Software den Kontrastmodus unterstützt. Zum Unterstützen des Kontrastmodus kann folgende Methode verwendet werden:

privatevoid KontrastModus()

{

if (SystemInformation.HighContrast)

{

foreach (Control vControl inthis.Controls)

{

vControl.BackColor = SystemColors.Control;

vControl.ForeColor = SystemColors.ControlText;

}

}

}

Um die Bedienbarkeit der Software auch über Tastatur zu gewährleisten, ist es wichtig auf die Tabulatorreihenfolge zu achten. Jede .net-Komponmente hat eine Eigenschaft “TabIndex” welcher man eine Zahl übergeben kann. Mit dieser Zahl legt man fest, in welcher Reihenfolge die Komponenten aktiviert werden, wenn der Anwender die Tabulatortaste drückt.

Eine weitere Möglichkeit die Bedienbarkeit von Software über Tastatur zu verbessern, ist das vergeben von Shortcuts für Labels, Buttons, Grouboxen und Menüs. Das erstellen eines Shortcuts macht man, in dem man vor einem bestimmten Buchstaben einer Beschriftung ein “&”-Zeichen setzt. z. B. “&Suchen”.

Der Anwender kann nun durch gleichzeitiges drücken von der Taste “Alt” und “s” den Schalter Suchen aktivieren.

Bei Menüshortcuts ist es empfehlenswert dem Anwender eine Möglichkeit bereitzustellen, diese selber anzupassen,da Menschen, bei welchen behinderungsbedingt nur eine Hand funktionstüchtig ist, mit Tastenkombinationen Ihre Schwierigkeiten haben.

Wenn Sie alle diese Dinge berücksichtigen, haben Sie einen wichtigen Schritt in Sachen barrierefreie Software gemacht.