Barrierefreies Webdesign

Fotograf: goebs - Photocase.de - Link dazu am Ende des Beitrags

Internetseiten werden auf vielen verschiedenen Medien genutzt. Dazu gehören die Browser der vergangenen, aktuellen und zukünftigen Generationen, aber auch Handhelds oder beispielsweise Screenreader, mit denen Blinde sich Internetseiten erschließen.

Damit die Informationen einer Webseite auf allen Lesegeräten, Browsern und von Menschen mit Behinderungen zugänglich sind, müssen diese speziell aufbereitet werden.

In der 2002 veröffentlichten Barrierefreien Informationstechnikverordnung (BITV) wurden Regeln zur Sicherstellung der Barrierefreiheit von Internetseiten gesetzlich festgelegt.

(Vollständige Fassung der BITV hier als PDF downloaden )

bitv95plusDas BIK – barrierefrei informieren und kommunizieren-Projekt unterstützt die Umsetzung der Barrierefreiheit und entwickelt Testverfahren zur Prüfung der Barrierefreiheit von Internet- und Intranetangeboten.   Der BITV-Test ist ein Prüfverfahren für die umfassende und zuverlässige Prüfung der Barrierefreiheit von Webangeboten. Die Internetseiten, die zu mindestens 95% barrierefrei sind, werden in die 95+ – Liste aufgenommen.

Ich habe für die barrierefreie Umsetzung von www.diewerbekette.de auch einen Platz in der BITV 95+ – Liste bekommen.

Für eine barrierefreie Internetseite sind folgende Punkte zu berücksichtigen:

Standardkonformität

Die Basis einer barrierefreien Website sind saubere Codierung und Vollständigkeit des Quelltextes.

Das WorldWideWeb Consortium hat dafür Standards erstellt und veröffentlicht. Die Einhaltung dieser Standards trägt dazu bei, dass Browser, wie der Internet Explorer oder Firefox die Webseiten auch richtig anzeigen.

Um zu überprüfen, ob Ihre Webseiten diesen Standards entsprechen, also valide sind, können Sie einen so genannten Validator benutzen. Das W3C stellt dafür ein Online-Tool zur Verfügung, den “W3C HTML Validation Service“.

Er überprüft Ihre Seiten auf Standardkonformität und zeigt vorhandene Fehler auf oder bestätigt die Validität Ihrer Webseite.

CSS−Dokumente können Sie mit dem “W3C CSS Validierungsservice” überprüfen.

Sinnvolle Strukturierung

Eine semantisch korrekte Strukturierung des Quelltextes sorgt für eine bessere Erschließbarkeit der Informationen für Blinde und und gleichzeitig auch für Suchmaschinen, die Ihre Website nach Informationen durchsuchen.

Das bedeutet, dass beispielsweise Überschriften auch als solche im Quelltext ausgezeichnet werden.

Die Wichtigkeit der Informationen wird damit nicht nur optisch, sondern auch strukturell in die Webseite eingebunden und kann so auch leicht wieder ausgelesen werden.

Textalternativen

Um die Inhalte Ihrer Webseite lesen zu können, benutzen blinde Menschen so genannte Screenreader.

Screenreader sind Programme, die lediglich die Textinhalte einer Webseite auslesen. Mit Hilfe einer angeschlossenen Sprachausgabe oder Braillezeile (wandelt Text in Blindenschrift um) können die Inhalte dann vom blinden Menschen gehört oder gelesen werden.

Einen Einblick in die Art, wie Internetseiten von Screenreadern gesehen werden, bekommen Sie mit dem Lynx Viewer, einem Tool, welches Textinhalte aus Internetseiten isoliert und daraus eine Nur-Text-Ansicht generiert. Geben Sie dort einmal die Adresse einer beliebigen Webseite ein!

Sie werden sehen, wie wichtig es ist, für Bilder und Multimedia-Objekte, wie zum Beispiel Flash-Filme Textalternativen bereit zu stellen, damit die in diesen Elementen enthaltenen Informationen auch von Blinden gesehen werden können.

Übrigens: Auch Suchmaschinen sind blind!

Sie erfassen Internetseiten genau wie Screenreader. Daher ist eine barrierefreie Internetseite auch für Suchmaschinen optimal zugänglich, was zu oft überraschend guten Positionierungen in den Ergebnisseiten führt.

Trennung von Inhalt und Layout

Eine weitere wichtige Voraussetzung für die Erstellung barrierefreier Web-Auftritte ist die Trennung von Inhalt und Layout.

Der Inhalt trägt die Information. Die Gestaltung macht die Informationen nur zugänglich. Dabei ist das Layout oft geräteabhängig. Eine Webseite sieht auf einem 20-Zoll-Monitor anders aus als auf einem Pocket-PC.

Eine Trennung von Inhalt und Layout ermöglicht eine Aufbereitung der Inhalte für verschiedene Ausgabegeräte.

Diese Trennung gelingt mit dem Einsatz von (X)HTML und CSS (Cascading Style Sheets).

Das (X)HTML der Seiten legt dann lediglich die Inhalte und deren Struktur fest, die Gestaltung für alle denkbaren Ausgabeformen wird hingegen mit Cascading Stylesheets (CSS) erreicht.

Die CSS-Layout-Datei kann in allen Seiten einer Website verlinkt werden und wirkt damit zentral auf alle Seiten eines Web-Auftritts!

Änderungen müssen dann nur noch in der CSS-Datei vorgenommen werden und werden dann auf alle Seiten angewendet. So lässt sich das Layout einer Webseite komfortabel und schnell aktualisieren.

Der CSS-Zen-Garden demonstriert eindrucksvoll, welche großen Möglichkeiten der Gestaltung mit CSS gegeben sind (ohne dass der HTML-Quellcode verändert werden muss.)

Flexible Layouts

Für die Umsetzung von Screendesigns sollten flexible Layouts gestaltet werden, welche es ermöglichen, die Textinhalte auch dann noch lesen zu können, wenn die Schriftgröße mit Hilfe der Browsereinstellungen vergrößert oder verkleinert wird.

Das bedeutet auch, dass barrierefreie Webseiten nicht (wie beispielsweise Drucksachen) auf jedem Browser identisch aussehen können.

Internetnutzer haben heutzutage viele Möglichkeiten, auf das Aussehen ihrer Internetseite mit Hilfe des Webbrowsers einzuwirken. So können sie die Schriftgröße ändern oder auch eine eigene CSS-Layout-Datei laden und damit der Seite ein ganz neues Layout geben.

Das in eine Webseite eingebundene Layout ist damit immer nur ein Angebot an den Nutzer, das einen optimalen Rahmen vorgibt.

Richtige Darstellung von Tabellen

Auch bei der Darstellung von Tabellen sind einige Besonderheiten zu beachten.

So sollten Tabellen nicht (wie früher üblich) zu Layoutzwecken, sondern nur zur Darstellung tabellarischer Daten verwendet werden.

Tabelleninhalte müssen sinnvoll bleiben, wenn man die Tabelle Zeile für Zeile der Reihe nach ausliest. Man nennt dies Linearisierbarkeit der Inhalte.

Auch Datentabellen können so aufbereitet werden, dass Screenreader diese sinnvoll vorlesen können.

Formulare

Kontaktformulare, Umfragen und andere Formulare ermöglichen die Interaktion mit dem Nutzer der Webseite.
Allerdings nur dann, wenn dieser auch versteht, in welchem Feld er welche Information eintragen kann.

Um das gewährleisten zu können, müssen die Formulare sinnvoll gestaltet und strukturiert sein.

Auch gibt es spezielle Möglichkeiten, im Quelltext die Übersichtlichkeit der Formularelemente zu erhöhen.

Sprache

Ein weiteres sehr wichtiges Element der Barrierefreiheit ist die Auszeichnung der verwendeten Sprache.

Diese kann jede aufgerufene Seite festgelegt werden. Werden innerhalb des Textes Fremdwörter verwendet, so sollte diesen im Quelltext die entsprechende Sprache zugewiesen werden.

Das sorgt zum einen dafür, dass Suchmaschinen wissen, in welcher Sprache Ihre Webseite verfasst wurde.

Zum anderen können Sprachausgaben nur so die Wörter auch richtig vorlesen. Ansonsten wird beispielsweise ein englisches Wort in deutscher Sprache ausgesprochen und ist dann kaum noch zu verstehen.

Navigation

Die Navigation innerhalb einer Webseite sollte sehr einfach und leicht verständlich sein.

Wenn möglich, werden mehrere Wege angeboten, zu den gesuchten Informationen zu kommen. Beispielsweise eine hierarchische Navigation UND eine Suchfunktion, welche die ganze Webseite durchsuchen kann.

Zudem sollte mit Hilfe spezieller Techniken sichergestellt werden, dass die Webseite auch ausschließlich per Tastatur bedienbar ist. Das kommt den Nutzern zugute, die beispielsweise aufgrund einer Körperbehinderung Schwierigkeiten haben, die Computer-Maus zu bedienen.

Farben und Kontraste

Für Menschen mit Farbsehschwächen ist es wichtig, dass Vorder- und Hintergrundfarbe der Webseite einen ausreichenden Kontrast aufweisen.

Auch sollte darauf verzichtet werden, Informationen nur durch Farben zu vermitteln, wie beispielsweise bei der Rot-Färbung von wichtigen Informationen.

Besser ist es, wichtige Informationen fett oder durch ein spezielles Zeichen zu markieren.

Multimedia

Beim Einsatz von Multimedia-Elementen, JavaScripts, Frames und PDFs sind weitere spezielle Regelungen zu beachten, um eine Webseite barrierefrei zu gestalten.

Testverfahren

Wie Sie die Barrierefreiheit einer Webseite testen können, habe ich in dem Artikel “Barrierefreiheit von Webseiten testen” auf der Netzspielwiese beschrieben »

Zusammenfassung

Wie Sie sehen, müssen für die Erstellung einer barrierefreien Webseite viele Faktoren beachtet werden.

Dennoch lohnt sich der Mehraufwand bei der Erstellung Ihrer Webseite, denn

  • Sie erreichen damit eine wesentlich größere Zahl an Internet-Nutzern als mit einer herkömmlichen Webseite.
  • Die Besucher Ihrere Internetseite finden auf Ihrer Seite schnell die gesuchten Informationen. Und nur zufriedene Besucher kommen wieder!
  • Ihre Webseite ist durch die Barrierefreiheit auch optimal zugänglich für Suchmaschinen. Das führt zu einer guten Positionierung Ihrer Webseite innerhalb der Suchergebnisse.
  • Eventuell später notwendige Änderungen lassen sich mit sehr wenig Aufwand umsetzen. Sie braucht dafür nicht wieder neu erstellt werden. Dadurch reduzieren sich die Wartungskosten für Ihre Webseite enorm.
  • Die Informationen Ihrer Internetseite sind auch auf außergewöhnlichen Endgeräten, wie Pocket PCs lesbar.

Links

Hier noch ein paar Links zu weiterführenden Informationen:

Angebot

Sie haben noch Fragen? Sie möchten auch eine barrierefreie Webseite?

Dann nehmen Sie Kontakt mit mir auf!

Gern berate ich Sie bezüglich der Barrierefreiheit Ihres Internetauftritts und/oder unterstütze Sie bei der Überarbeitung oder Neugestaltung Ihres Internetauftritts nach aktuellen Webstandards und den Richtlinien der Barrierefreien Informationstechnikverordnung (BITV).

  • Die Netzspielwiese

    Franziska Mälzer
    Goethestr. 9
    71696 Möglingen
    Tel: (07141)9915817
    info(at)netzspielwiese.de

    Kontaktformular »

  • BITV 95+