nicht angemeldet
Barrierefreies Webdesign
In diesem Blogartikel geht es darum, welche Kriterien eine Webseite erfüllen muss, damit diese von Menschen mit Seheinschränkungen wahrgenommen und bedient werden kann. Da ich als Betroffener täglich mit nicht barrierefreien Seiten zu tun habe, möchte ich Ihnen einen Bericht aus erster Hand geben.
gesetzliche Grundlagen
Am 1. Mai 2002 trat ein Behindertengleichstellungsgesetz (BGG) in Kraft, das dieses Jahr überarbeitet wurde. Der ehemalige §11 ist jetzt unter §12 Barrierefreie Informationstechnik zu finden. Hier wurde u. a. festgelegt, dass Träger öffentlicher Gewalt dazu verpflichtet sind, ihre Webseiten barrierefrei zu gestalten. Dies war die Geburtsstunde des "barrierefreien Webdesign".
Unter den Trägern öffentlicher Gewalt versteht man Behörden, Hochschulen und Universitäten. In Absatz 1 werden diese dazu verpflichtet, Webseiten, Programme und jetzt sogar Apps barrierefrei zu erstellen. In Absatz 2 ist geregelt, dass auch das Intranet und andere Ablaufe barrierefrei gestaltet werden müssen. Ein Intranet ist ein Netzwerk von Computern, das nicht öffentlich zugänglich ist, unabhängig vom öffentlichen Netz benutzt werden kann und andere, zusätzliche oder eingeschränkte Funktionen bietet.
Absatz 3 bedeutet auf gut deutsch, dass die Bundesregierung zu feige ist, Unternehmer dazu zu verpflichten ihre Webseiten, Programme und Apps barrierefrei zu gestalten und es derem guten Willen überlässt.
internationale Richtlinien
Die Web Content Accessibility Guidelines (WCAG 2.0) sind internationale Richtlinien für barrierefreies Webdesign. Die Web Accessibility Initiative (WAI) hat die WCAG als Empfehlung ausgearbeitet. Wenn Sie als deutscher Webentwickler eine Webseite für Österreich barrierefrei entwickeln sollen, dann verwenden Sie die WCAG 2.0.
Es gibt ein tolles Youtube-Video zu den WCAG:
WCAG 2.0 Theme Song Web Content Accessibility Guidelines - Disability
Die Barrierefreie-Informationstechnik-Verordnung (BITV) ist die deutsche Richtlinie für barrierefreies Webdesign. Die Barrierefreie-Informations-Verordnung wird abgekürzt mit BITV. Zur Zeit gilt die BITV 2.0. In Deutschland werden Webseiten nach BITV 2.0 barrierefrei entwickelt.
Wie arbeiten Blinde und Sehbehinderte am Computer?
Bevor ich die konkreten Schritte erkläre, wie eine Webseite für Menschen mit Seheinschränkungen barrierefrei gemacht wird, möchte ich erklären, wie blinde und sehbehinderte Menschen am Computer arbeiten. Sie, lieber Blogleser, können mal ein kleines Experiment machen. Schließen Sie die Augen und versuchen den Mauszeiger zur rechten oberen Ecke des Browserfensters zu bewegen. Na, hat es geklappt? Nein, natürlich nicht. Das ist der Grund, warum Blinde und auch sehr viele Menschen mit einer Sehbehinderung den kompletten Computer mit der Tastatur bedienen. Das bedeutet, Webseiten, welche von Blinden und Sehbehinderten bedient werden sollen, müssen komplett per Tastatur bedienbar sein.
Die spannende Frage ist, wie bekommen Blinde mit, was auf dem Bildschirm zu sehen ist? Sie haben eine Software die sich "Screenreader" nennt, auf deutsch "Bildschirmleser". Wie der Name schon verrät, die Software kann nur lesen. Das bedeutet, Bilder und Videos benötigen beschreibende Texte, damit der Screenreader dem Blinden oder Sehbehinderten mitteilen kann, was auf einem Bild oder Video zu sehen ist. Der Screenreader kann den Text vorlesen oder an eine Braillezeile schicken. Die Braillezeile ist ein Computer-Ausgabegerät, welches den gelesenen Text in Blindenschrift, genannt Brailleschrift (umgangssprachlich Blindenschrift), darstellt. Die Buchstaben werden mit durch Stößel dargestellt, die aus einer Fläche herausragen. Diese Stößel können mit den Fingerkuppen ertastet werden.
Welche Kriterien müssen erfüllt sein, damit Menschen mit Seheinschränkung Webseiten lesen und wahrnehmen können?
Jetzt wird es konkret. Hier werden die Kriterien besprochen, die erfüllt werden müssen, damit eine Webseite von Menschen mit Seheinschränkungen bedienbar ist.
Tastaturbedienbarkeit
Wie oben schon erwähnt, blinde und auch sehr viele sehbehinderte Menschen können keine Computermaus bedienen. Deswegen sollte eine Webseite komplett per Tastatur bedienbar sein. Hierzu gehört, dass alle Bedienelemente per Tabulator-Taste erreichbar sind. Das bedeutet, dass durch wiederholtes Drücken der Tabulatortaste alle Eingabefelder, aufklappbare Listen, Auswahllisten usw. erreichbar sein müssen.
Für Menschen, die eine Seheinschränkung haben, aber beide Hände voll einsetzen können, sind Tastenkürzel sehr hilfreich. Tastenkürzel können mit dem HTML-Attribut accesskey gesetzt werden.
Damit die Tastenkürzel bei Beschriftungen von Eingabefeldern Sinn ergeben, müssen die Beschriftungen mit den Eingabefeldern verknüpft werden. Hierfür muss das Eingabefeld eine eindeutige ID erhalten. Die Beschriftung des Eingabefeldes erfolgt in einem label-Element mit einem for-Attribut, dessen Wert die ID des entsprechenden Eingabefeldes ist.
Für Sehbehinderte ist es bei großen Eingabemasken sehr schwierig zu erkennen, wo sich der Eingabefokus befindet. Das liegt daran, dass in Eingabefeldern wird der Textcursor oft als schmaler senkrechter Strich dargestellt wird. Wenn ich Eingabemasken in HTML erstelle, dann sorge ich dafür, dass die Hintergrundfarbe des aktiven Bedienelements gelb ist. Wenn sich gleich die komplette Hintergrundfarbe eines Bedienelements ändert, dann ist das für Menschen mit einer Sehbehinderung sehr gut sichtbar.
:focus {
background-color: yellow;
}
Damit dieser Artikel nicht nur graue Theorie ist, kommt hier ein Live-Beispiel, in dem alle diese Kriterien umgesetzt wurden:
<
<label for="vorname">Vorname: ([Alt]+v)</label>
<input name="Vorname" id="vorname" size="30" maxlength="30" accesskey="v">
<label for="nachname">Nachname: ([Alt]+n)</label>
<input name="nachname" id="nachname" size="30" maxlength="30" accesskey="n">
Guter Farbkontrast
Jeder fünfte Mann hat eine Farbsehschwäche. Im Internet-Lexikon "Wikipedia" wird der Begriff "Farbfehlsichtigkeit" verwendet. Da ich selbst davon betroffen bin, benötige ich kein Lexikon um zu erklären, was eine Farbsehschwäche ist. Menschen mit einer Farbsehschwäche fällt das Erkennen und Unterscheiden von Farben schwer. Die Farben Lila und Blau sind für mich einfach "Blau". Hellgrüne und gelbe Buntstifte kann ich auch nicht voneinander unterscheiden.
Deswegen haben Menschen mit Farbsehschwäche Probleme, wenn eine Webseite einen dunklen Hintergrund mit dunkler Schriftfarbe hat oder einen hellen Hintergrund mit ebenfalls heller Schriftfarbe hat.
Damit Menschen mit Farbsehschwäche Webseiten gut wahrnehmen können, sollten die Webseiten einen guten Farbkontrast haben. Das bedeutet entweder eine helle Hintergrundfarbe und eine dunkle Schriftfarbe oder umgekehrt. Es gibt ein kostenloses Tool, das "Colour Contrast Analyser" heißt. Mit diesem Tool können Sie testen, ob der Farbkontrast zwischen zwei Farben für Menschen mit Farbfehlsichtigkeit ausreichend ist.
Texte als Alternative für Bilder und Filme
Bilder und Filme sind für blinde Menschen nicht wahrnehmbar. Übrigens, nicht nur der Screenreader, sondern auch die Suchmaschine kann keine Bilder und Filme "sehen". Bilder benötigen einen Alternativtext. Dieser Alternativtext sollte den Inhalt des Bildes beschreiben. Es geht aber nicht um eine detaillierte Beschreibung, sondern nur um das wichtigste. Ich mache ein Beispiel:
<img src="Bi
ildschirmtastatur.jpg"
alt="Screenshot einer Bildschirmtastatur Win10 - Marlem-Software">
Natürlich sollen auch Filme alternative Erklärungen haben. Hier möchte ich erst paar Vorüberlegungen machen. Jemand der blind ist, wird sich nicht Kochrezepte auf Youtube anschauen. Menschen, die von Geburt an blind sind, haben keine Ahnung von Farben. Es ist also die große Frage, ob Blinde überhaupt so viel Filme schauen.
Allerdings sind Videos, die neben den Bildern ein konkretes Problem auch verbal erklären, für Blinde jedoch sehr wohl interessant. Es gibt aber eine weitere Möglichkeit, Videos zusätzliche Informationen mit Hilfe von Audio-Deskription hinzuzufügen. Audio-Deskriptions sind ähnlich wie Untertitel. Es handelt sich aber hier um ergänzende akustische statt Textinformationen. Bei Audio-Deskription werden nicht Dialoge, sondern Handlungen, Landschaften, Gestik, Kleidung und Dekoration von einem Sprecher knapp erläutert.
Schlussbemerkung
Wenn Sie obige Tipps auf Ihrer Webseite umsetzen, wird Ihre Webseite für Menschen mit Seheinschränkungen sehr viel besser bedienbar sein.
Artikel im Wiki
über den Autor
Autor: Markus Lemcke
Webseite: www.marlem-software.de
Experte der barrierefreien Informatik
veröffentlicht von
Matthias Scharwies