Barrierefreies Webdesign

Text

Barrierefreies Webdesign ist ein Begriff, der im Zusammenhang mit dem Internet häufig auftaucht. Was versteht man aber unter Barrierefreies Webdesign?

Statistisch gesehen sind Menschen mit Behinderungen überdurchschnittlich häufig im Internet. Es ist wenig bekannt, dass sich blinde und sehbehinderte Nutzer Webseiten per Software vorlesen oder in Braille-Schrift ausgeben lassen.

Zusätzlich zu der Berücksichtigung der Belange von Behinderten bedeutet „barrierefrei“, dass niemandem Barrieren in den Weg gelegt werden sollen.

Neben der Zugänglichkeit geht es also beim Thema Accessibility auch um die Plattformunabhängigkeit – ein Internetangebot soll sowohl mit Bildschirm als auch mit PDA oder Handy nutzbar bleiben. Es soll unabhängig vom verwendeten Betriebssystem und von der Software funktionieren.

Mindestens ebenso wichtig wie technische Zugangsbedingungen ist, dass die Inhalte übersichtlich und in leicht verständlicher Sprache präsentiert werden.

Mit der Verbreitung von Ajax besteht die Gefahr, dass die Barrierefreiheit und somit barrierefreies Webdesign ins Hintertreffen gerät. Wie oft bei der Einführung neuer Technologien wird auf Menschen mit Behinderung keine Rücksicht genommen. Dabei ist gerade für diesen Teil der Bevölkerung der Community-Gedanke des Web 2.0 besonders interessant, um soziale Kontakte zu pflegen.

Internet-Techniken, die Barrieren darstellen

• Blinde Menschen können gut strukturierten Text über eine Braillezeile mit entsprechender Software (Screenreader) lesen. Bilder oder Text, der in Bildern enthalten ist, sind für Blinde unzugänglich und sollten daher mit einem alternativen Text ergänzt werden.
• Sehschwache, insbesondere ältere Menschen, benötigen Skalierbarkeit der Schrift im Browser, um die Schriftgröße an ihre Sehleistung anpassen zu können.
• Sehbehinderte sind bei einer Navigation, die aus Bildern, Java-Applets oder Flash-Objekten besteht, benachteiligt.
• Personen mit Spastiken oder anderen motorischen Störungen, die keine Maus bedienen können, müssen mit der Tastatur navigieren. Für diese ist eine Navigation mit der Tastatur wichtig. Sie bewegen sich meist mit der Tabulatortaste durch die Links und Formularelemente einer Seite. Damit eine Webseite gut mit der Tastatur bedienbar ist, ist es wichtig, dass die Elemente in einer sinnvollen Reihenfolge angesteuert werden und dass jederzeit deutlich erkennbar ist, welches Element gerade den Fokus hat.
• Viele der derzeit üblichen Content-Management-Systeme (CMS) erzeugen Seiten, die für behinderte Menschen schlecht zugänglich sind. Nur sehr wenige Systeme oder Verfahren unterstützen die Autoren mit barrierefreien Eingabemöglichkeiten.
• Die Nichteinhaltung technischer Standards (z. B. korrekte Codierung von Umlauten, valides HTML) erzeugt Webseiten, die nur von bestimmten Browsern (z. B. Internet Explorer) korrekt dargestellt werden.
• Navigation mit Hilfe von aktiven Inhalten (z. B. Javascript, Flash) schließt Nutzer aus, die die dafür relevanten Plugins nicht installiert haben.

Techniken für barrierefreies Webdesign

Grundvoraussetzung für barrierefreie Webseiten ist die Einhaltung von Webstandards (valides HTML/XHTML). Die geforderte Trennung von Inhalt und Layout erreicht man durch den Einsatz von Cascading Style Sheets (CSS). Einige grundlegende Möglichkeiten:

Skalierbarkeit

Feste Schriftgrößen stellen in manchen Browsern eine Barriere dar, da sie vom Nutzer nur schwer veränderbar sind. So sollte die Maßeinheit für Schriften, aber auch für Bereiche, Abstände usw. relativ sein (Angaben in em oder %).

Logische Struktur

Die wichtigste Regel für barrierefreie Internetseiten ist, die HTML-Elemente entsprechend ihrer Bedeutung (Semantik) einzusetzen. Am Beispiel von Überschriften im Dokument soll das verdeutlicht werden: Für Überschriften sind die HTML-Elemente h1 - h6 vorgesehen und sollen auch damit ausgezeichnet werden wie folgt: <h1>Überschrift 1 </h1>, formatiert wird mit einer externen CSS-Regel z. B.: h1{font-size:1.2em;}. Eine Hervorhebung nur durch eine vergrößerte Schrift wie z. B. mit <font style="size: 18px">Überschrift 1 </font> ist semantisch nicht korrekt und bildet keine Struktur ab.

Nur bei aktiviertem Webseiten-Stil (im Browser über Ansicht einstellbar) führen beide Methoden zum optisch selben Ergebnis, die erste Version ist jedoch auch weitaus wirtschaftlicher: Für Layoutänderungen muss bei der korrekten Version in der CSS-Datei nur eine Regel für Überschrift 1 geändert werden und sofort sind auf allen Seiten der gesamten Website sämtliche Überschriften erster Ordnung angepasst. Bei der anderen Version müssen sämtliche Überschriften auf der Webpräsenz überarbeitet werden, was äußerst zeitaufwendig ist. An diesem Beispiel wird deutlich, dass Barrierefreiheit weniger mit „Design“ zu tun hat, sondern eher mit dem richtigen Aufbau von (X)HTML Quelltexten. Positiver Nebeneffekt: Suchmaschinen werten semantisch richtige und valide Webseiten auf, was sich auf ein besseres Suchergebnis auswirkt.

Wird diese Methode auf alle verwendeten HTML-Elemente angewandt und die Stil-Regeln in die externe CSS-Datei ausgelagert, so ist die barrierefreie Version der herkömmlichen deutlich überlegen, da für ein Redesign der Seite nur diese CSS-Datei ausgetauscht werden muss, ohne auch nur eine einzige Änderung im (X)HTML-Dokument vornehmen zu müssen. Somit ist Barrierefreiheit auch ein Qualitätsmerkmal für Webseiten.

In den folgenden Abschnitten werden weitere Möglichkeiten dargestellt.

Positionierung von Elementen

Um Elemente auf einer Seite zu platzieren, können zum einen Tabellenkonstruktionen eingesetzt werden, zum anderen lassen sich Elemente mit Cascading Style Sheets mittels genauer Koordinaten positionieren. Durch die Nutzung von Tabellen wird der Quelltext unnötig aufgebläht, da auch Bereiche definiert werden müssen, die gar nicht genutzt werden. Mit Cascading Style Sheets müssen nur Elemente definiert werden, die auch benötigt werden. Auch Überlappungen von einzelnen Elementen (Vorder- und Hintergrundelemente in verschiedenen Ebenen) sind möglich.

Bilder für Layoutzwecke

Oftmals werden Bilder nur für Layoutzwecke, nicht jedoch für die Informationsvermittlung genutzt. Um die geforderten Standards einzuhalten, also valides HTML zu erstellen, muss man Bilder mit einem alternativen Text (ALT-Attribut) versehen.

Dient ein Bild einzig dem Layout/Design und transportiert keine relevante Information, so sollte es als Hintergrundbild im Stylesheet (background-image) definiert werden.

Interaktive Schaltflächen per CSS

Oftmals werden Navigationen noch mit Hilfe von JavaScript oder mittels Plugins (z. B.: Adobe Flash) realisiert. Dies kann den Quelltext unnötig umfangreich machen und sperrt Benutzer aus, wenn zum Beispiel:

• deren Browser kein JavaScript unterstützen (z. B.: Lynx),
• die JavaScript-Unterstützung im Browser deaktiviert ist,
• die benötigten Plugins nicht installiert sind
• oder der Nutzer durch eine Behinderung nicht in der Lage ist, die Navigation wahrzunehmen oder zu bedienen.

Bei den meisten Schaltflächen im Internet werden einfach nur Hintergrundfarbe oder -bild sowie Textfarbe und -dekoration ausgetauscht. Dies ist per CSS um ein Vielfaches einfacher und der Quelltext schrumpft (Bündelung von Formatangaben in Klassen). Dies verringert natürlich auch die Dokumentengröße, wodurch zugleich das Transfervolumen kleiner und die Seite schneller geladen wird. Durch eine Ausgliederung der CSS Angaben in eine externe Datei können weitere Verbesserungen im Bezug auf Transfervolumen und Ladezeit erreicht werden und somit kann barrierefreies Webdesign unterstützt werden , da die Formatierungen nur einmal, und nicht bei jedem neuen Aufruf, zum User übertragen werden müssen