Barrierefreie Internetseiten

In diesem Beitrag werden die wichtigsten Punkte einer barrierefreien Internetseite erläutert und der Begriff erklärt. Dieser Beitrag liegt zusätzlich als MP3 zum Anhören oder Downloaden vor. (erster Versuch, bitte um Nachsicht. :) )

Begriffserklärung:

Ich versuche hier einmal in eigenen Worten zu erklären, was ich unter einer „barrierefreien Internetseite“ verstehe.

Eine barrierefreie Internetseite muss so gestaltet sein, dass jeder Internetnutzer, unabhängig von eventuellen Einschränkungen, problemlos auf alle Informationen dieser Seite zugreifen kann.

Hierzu gibt es nationale und internationale Richtlinien, auf die ich hier allerdings aufgrund deren Komplexität nicht näher eingehen möchte.

Voraussetzungen für eine barrierefreie Internetseite in Stichworten:

  • verwendete Schriften sollten gut lesbar und serifenlos sein
  • keine „Textgrafiken“ verwenden
  • reinen Fließtext verwenden
  • Text durch aussagekräftige Überschriften beziehungsweise Unterüberschriften gliedern und diese auch als solche formatieren
  • aussagekräftige Linktexte verwenden
  • gängige Abkürzungen wie „z. B.“ als „zum Beispiel“ ausschreiben.
  • auf logische und intuitiv nachvollziehbare Strukturierung der Inhalte achten
  • auf Tabellen zur Layoutgestaltung verzichten; stattdessen CSS verwenden (Siehe Anhang)
  • auf Tabellen zur Inhaltsdarstellung nach Möglichkeit verzichten
  • Inhaltsverzeichnis der Seite anbieten
  • Hauptmenü mit möglichst wenigen Unterpunkten
  • Bilder und Diagramme mit Alternativ- beziehungsweise Beschreibungstext versehen
  • Eventuell Bildunterschrift verwenden
  • Keine Inhaltspositionierung mittels Tabulatoren oder gar Leerzeichen
  • Menü mit Textlinks oder zumindest keine grafischen Schaltflächen.
    Audio- und Videoinhalte, die relevante Informationen transportieren, zusätzlich in Textform anbieten
  • keine Grafiken zum Spamschutz (Siehe Anhang)
  • auf gute, das heißt logische Strukturierung der Inhalte achten
  • darauf achten, dass eine Vergrößerung des Menüs mittels des Browsers möglich ist
  • die gesamte Navigation auf der Webseite muss mit Hilfe der Tastatur möglich sein
  • Der Nutzer sollte jederzeit erkennen können, wo auf der Seite er sich gerade befindet
  • Die Farbgestaltung sollte gute Kontraste aufweisen und auf die Verwendung von rot-grün-Kombinationen (wegen möglicher Rot – Grün – Blindheit) verzichten
  • Besuchte, markierte und nicht besuchte Links sollten unterschiedliche Farben haben.
  • Wenn möglich, eine Textgröße von mindestens 14 Punkten verwenden
  • darauf achten, dass eine Vergrößerung des Textes mittels des Browsers möglich ist

Begründungen und Beispiele:

Gute Kontraste und serifenlose Schriftarten erhöhen die Lesbarkeit für alle Besucher. Bespiele für serifenlose Schriften sind Areal oder Verdana.

Auch wenn die Verwendung von Schriftgrafiken eine gute Möglichkeit ist Browserinkompatibilitäten zu umgehen, sollte dies vermieden werden, da es dazu führt, dass der Text für Blinde nicht mehr zugänglich ist. Blinde Benutzer sind auf ein Sprachausgabeprogramm angewiesen. Diese Programme können jedoch nichts mit Textgrafiken anfangen.

Aussagekräftige Überschriften, Unterüberschriften und Linktexte sorgen für alle, aber insbesondere für blinde Benutzer für eine bessere Navigation durch die Seite. Wichtig ist hier, die Überschriften und Unterüberschriften auch als solche zu formatieren, da einige Hilfsmittel die Information „Überschrift“ auch akustisch ausgeben können.

Die Verwendung von reinem Fließtext, das heißt ohne Sonderzeichen wie beispielsweise optisch schöne Aufzählungszeichen oder Dinge wie

„ …“ oder „ —–„ ist im Sinne der Barrierefreiheit wichtig. Warum? Ganz einfach Screenreader kommen oft mit Sonderzeichen nicht zurecht. Screenreader sind Hilfsmittel für Blinde und Sehbehinderte zur Ausgabe des Bildschirminhalts. Screenreader arbeiten mit veränderter/vergrößerter Darstellung, akustisch und/oder in Blindenschrift auf einer zusätzlichen Braillezeile.

Ein Praxisbeispiel:

Bildschirmanzeige: —

Sprachausgabe: „Bindestrich Bindestrich Bindestrich“

Bildschirmanzeige eines Aufzählungszeichens

Sprachausgabe: „Aufzählungszeichen“

Bildschirmanzeige des Wordsymbols für Durchmesser

Sprachausgabe: „Sonderzeichen“

Dies alleine wäre ja unter Umständen halb so schlimm, wenn dann nicht auch „Bindestrich Bindestrich Bindestrich“ auf der Braillezeile (Hilfsmittel, das den auf dem Bildschirm dargestellte Inhalt in Blindenschrift anzeigt)  erscheinen würde. Wenn man bedenkt, dass ein solches Gerät eine Zeilenlänge zwischen 60 und 80 Zeichen hat, erschwert die Ausgabe solcher, für Blinde völlig irrelevanter Informationen das Lesen eines Textes erheblich.

Gängige Abkürzungen wie „Str.“, „z. B.“ oder „etc.“ sollten ausgeschrieben werden, um zu gewährleisten, dass die verschiedenen Sprachausgaben diese auch korrekt vorlesen.

Struktur von Texten und Menüs:

Sie sollten auf logische, nachvollziehbare Strukturierung der Inhalte und Menüs achten.

Stellen Sie sich vor, Sie bieten verschiedene Dienstleistungen für Menschen mit Behinderung an. Ein Kunde findet Sie im Internet und möchte sich über mehrere Ihrer Angebote informieren.

Wer sich dann durch zahllose Untermenüs klicken muss, um den entsprechenden Ansprechpartner „auszugraben“, verliert schnell die Lust und wendet sich der Seite eines Mitbewerbers zu.

Haben Sie einen Menüpunkt wie „Angebote und Ansprechpartner“, vereinfachen Sie die Kontaktaufnahme erheblich.

Viele Templates (Designvorlagen für die Erstellung einer Internetseite) und CMS (Content Management System – Programm zur einfachen Erstellung und Verwaltung von Internetseiten ohne Programmierkenntnisse) setzen zur Erzeugung des Layouts auf sogenannten unsichtbare Tabellen. Mit diesen Tabellen kommen assistive Technologien zur Zeit nur schlecht bis gar nicht zurecht. Das gilt in den meisten Fällen auch für normale Übersichtstabellen. Der Grund dafür ist, dass das Hilfsmittel keinerlei Informationen über die gewünschte, beziehungsweise logische Leserichtung und Lesereihenfolge dieser Tabellen aus der Webseite entnehmen kann. Das bedeutet, dass der Nutzer dem Programm selbstständig entsprechende Anweisungen geben muss.

Ein weiterer Punkt, auf den zu achten ist, ist das Anbieten einer Sitemap (Inhaltsverzeichnis). Damit haben die Nutzer die Möglichkeit, direkt auf bestimmte Unterseiten zuzugreifen. Dies ist besonders positiv für seheingeschränkte Nutzer, da sie sich so nicht durch komplexe Menüstrukturen „hangeln“ müssen. Außerdem kann die Seite so besser von Suchmaschinen  gefunden werden.

 

Bei der Gestaltung der Menüstruktur sollte darauf geachtet werden, dass das Menü möglichst auf eine „Bildschirmseite“ passt, ohne das gescrollt werden muss. Viele behinderte Menschen sind hierzu nur schwer in der Lage. Außerdem sollte das Menü mit Textlinks oder anderen Elementen, durch die mit der Tastatur navigiert werden kann, gestaltet werden. Keinesfalls dürfen hier rein grafische Buttons verwendet werden, da sonst die Barrierefreiheit ebenfalls beeinträchtigt ist.

Weiterhin darf das Layout keinesfalls durch die Verwendung von Leerzeichen oder Tabulatoren erreicht werden. Diese würden auf Braillezeilen angezeigt werden.

Verwendete Bilder oder Diagramme sollten mit einem Alternativ- und Beschreibungstext versehen werden. Damit ist es auch für Blinde möglich die durch das Bild gelieferten Informationen aufzunehmen.

Die in Audio- und Videoinhalten vermittelten Informationen sollten möglichst zusätzlich auch in Textform zur Verfügung gestellt werden.

Auf grafikbasierten Spamschutz sollte ebenfalls verzichtet werden.

Umsetzung in der Praxis:

Ich habe mich sehr lange mit verschiedenen Systemen zur Umsetzung einer solchen Homepage beschäftigt. Dabei habe ich besonderes Augenmerk darauf gelegt, dass das verwendete System für Privatpersonen und gemeinnützige Organisationen kostenlos verwendet werden kann.

Hierbei haben mir persönlich zwei Systeme für unterschiedliche Zwecke am besten gefallen.

CMS2day:

Dieses System ist klein, übersichtlich, vollkommen barrierefrei und bietet alles was man für eine kleine Homepage benötigt. Einziges großes Manko: Es kann nur ein Administratoraccount angelegt werden. So ist kein gemeinsames Arbeiten mit unterschiedlichen Zugriffsrechten möglich.

Weiter Informationen finden sie unter:

www.cms2day.de

Papoo CMS

Diese System bietet wirklich alles was das Herz begehrt und ist intuitiv bedienbar. Sogar eine kostenlose Sprachausgabe für die Artikel kann mit wenigen Clicks eingebunden werden.
Hier gibt es auch eine detaillierte Nutzer- und Rechteverwaltung. Wer für wirklich professionelle Anwendung etwas mehr Funktionen benötigt, für den gibt es auch erschwingliche kostenpflichtige Versionen.
Weiter Informationen finden sie unter:

www.papoo.de

Dieser Artikel erhebt keinen Anspruch auf Korrektheit oder Vollständigkeit. Kritik und Anregungen werden gerne aufgenommen.

Anhang:

Was ist CSS?

CSS steht für Cascading Style Sheets. Es handelt sich, in einfachen Worten, um eine Programmiersprache mit deren Hilfe man das Layout einer Internetseite unabhängig vom Inhalt festlegt.

So ist es möglich für eine Seite verschiedene optische Darstellungen bereitzustellen, ohne Veränderungen am eigentlichen Inhalt vornehmen zu müssen. So können Sie beispielsweise ein „Standarddesign“ festlegen und eine Alternativansicht mit extra großer Schrift und anderen Farbkombinationen anbieten.

Wenn Sie auf der Webseite www.mydealz.de auf den „Lichtschalter“ in der rechten, oberen Ecke klicken, sehen Sie ein (lustiges) Praxisbeispiel.

Was versteht man unter „Grafiken zum Spamschutz“?

Um sicherzustellen, dass Eingaben in Formulare, beispielsweise zur Anmeldung bei einem

E-Mail-Anbieter, tatsächlich von Menschen und nicht maschinell getätigt werden, verwendet man oft „Grafiken. Auf diesen wird ein Sicherheitscode dargestellt, der in ein zusätzliches Feld eingegeben werden muss. Solche Grafiken nennt man CAPTCHAs. Sie stellen Text als Grafik beispielsweise verzerrt und auf farbigem Hintergrund da. Dies sorgt dafür, dass Computerprogramme nicht in der Lage sind die abgebildete Zeichenfolge zu erkennen. So kann die Eingabe des Sicherheitscodes schwerer automatisiert werden.

Beispiele für CAPTCHAs und eine genauere Erklärung finden Sie im Wikipedia-Artikel zu CAPTCHAs.

http://de.wikipedia.org/wiki/CAPTCHA

Welche Alternative zu CAPTCHAs gibt es?

Eine einfache Alternative zu CAPTCHAs sind zum Beispiel Sicherheitsabfragen nach folgendem Muster:

Frage: Was das Ergebnis von drei weniger zwei?

Antwort: 1

Frage: Wie heißt der Planet auf dem wir leben?

Antwort: Erde

Nur ein Mensch ist in der Lage solche Aufgaben zu lösen.

 

Comments are closed.