Barrierefreiheit ist kein politisch-korrektes Add-On für Behinderte, sondern bildet die Basis für eine mühelose Bedienbarkeit und eine schnelle Navigation für alle User.

Als ich am Freitag mit drei Einkaufstüten und Rucksack bepackt bei meiner U-Bahn-Station ausstieg, nahm ich den behindertenfreundlichen Aufzug - nicht die Treppe - um an die Oberfläche zu gelangen. Ich hatte es eilig und der Ausgang liegt näher an meiner Straße als der Treppenaufgang. Zudem ist die Fahrt im gläsernen und geräumigen Aufzug angenehm und stressfrei. Außer mir fuhren noch ein 12-jähriges Mädchen mit Schulranzen, ein etwa 55-jähriges Touristen-Ehepaar sowie eine Mutter, die einen dreirädrigen Off-Road-Kinderwagen samt quengelnden Kleinkind steuerte, mit.

Alle, die in den Fahrstuhl einstiegen, haben einen großen Nutzen von der behindertenfreundlichen U-Bahn-Station. Die Gründe, warum sie den Aufzug benutzen, sind ganz unterschiedlicher Natur:

Dieses Offline-Beispiel zeigt: Eine behindertenfreundliche Bauweise ist für Menschen mit körperlichen Einschränkungen unverzichtbar. Nur so erhalten sie überhaupt Zugang. Doch für körperlich Nicht-Behinderte bringt der Aufzug Zeitersparnis, Komfort und Spaß. Aufzüge werden vornehmlich von körperlich Nicht-Behinderten genutzt. Das gleiche gilt auch im Internet: Barrierefreiheit schafft für körperlich eingeschränkte oder sehbehinderte Personen Zugang zu Informationen, Chatrooms, Foren oder Shopping-Sites und bedeutet somit Freiheit und Unabhängigkeit. Allen anderen bietet eine barrierefrei gebaute Website Schnellwege, mehr Übersichtlichkeit und höheren Komfort.

Noch wissen die wenigsten User, wie mühelos und schnell sich eine Website bedienen ließe, wäre sie barrierefrei und bedürfnisorientiert gebaut. Die Mehrheit der Nutzer haben sich an umständliche, träge Websites gewöhnt und für Behinderte ist es normal, dass sie irgendwann vor kleinen Mauern einem Treppenabsatz stehen und nicht mehr weiter kommen - warum soll dies im Internet anders sein. Die meisten Mainstream-Websites haben weder Aufzüge eingebaut noch die Bordsteinkante niedriger gelegt. Im Unterschied zu Gebäuden kostet die Um- oder Neugestaltung von Websites wenig Zeit und wenig Geld. Auch muss nicht einer von zwei Treppenaufgänge während der Bauphase geschlossen werden, woraufhin man monatelang weite Umwege in Kauf nehmen muss.

Einige der nachfolgenden Funktionen sind schnell einfach umzusetzen, andere setzen eine grundlegende Umgestaltung voraus. Um den Code soll es aber in diesem Text nicht gehen, sondern um den erhöhten Komfort für alle User: Wege werden kürzer, die Benutzung fällt leichter und Ziele von Textlinks sind klarer zu erkennen.

Title- und Alt-Texte

Sie sind die Funktion des Internets schlechthin - Links. Ohne Textlinks kein Hypertext! So alt wie Links sind die Probleme damit. Wohin führt dieser Text-Link? Welche Information steht dahinter? Gelange ich auf eine fremde Website oder bleibe ich in diesem Angebot? Bedeutet es für mich einen Mehrwert zu klicken oder ist das Warten auf die neue Seite und die anschließende Benutzung des Back-Buttons reine Zeitverschwendung? Mit Title-Texten kann man alle Textlinks mit einem Erklärtext ergänzen, der als Tooltipp beim Darüberfahren mit der Maus ausklappt. Textlinks erhalten so eine dramatisch höhere Qualität, indem sie mittels Title-Informationen Orientierung liefern können. Ambiguität adé. Nun ist klar wohin "Textlink" führt: Title="ausführlicher Wiki-Eintrag zur Geschichte von Textlinks - wikipedia.org"

The goal of the link title is to help users predict what will happen if they follow a link." [...] "Link titles are one of the first enhancements to the Web that actually help people navigate (as opposed to simply making pages look more fancy). Since we know that users have horrible problems finding things on the Web, we should give them all the help we can.

Jacob Nielsen: Using Link Titles to Help Users Predict Where They Are Going

Bei Bildern ist die Verwendung von Title-Texten ähnlich nützlich: Sie können das Bild erklären oder Hintergrundinfos liefern, wichtige Details erklären oder auf das Linkziel hinweisen. Sie sind nicht zu verwechseln mit Alt-Texten, die eine ganz andere Funktion erfüllen. Alt-Texte sind Alternativ-Texte, die von grafischen Browsern angezeigt werden, wenn das Bild nicht geladen wird. Als Alternative zum Bild lesen Screenreader den Alt-Text vor und Textbrowser schreiben ihn hin. Title-Texte sind kein Ersatz für Bilder, sondern Bilderklärungen oder Beschreibungen. Also ein Zusatz und kein Ersatz.

Von Title-Texten profitieren alle User: Informationssucher, die gezielt nach weiterführenden Infos suchen, Webunerfahrene, User mit 56K-Modem, die ungern auf unnütze Links klicken, Freaks mit Textbrowser, die sich alle Links einer Seite als Liste samt Title-Texten anzeigen lassen oder Blinde, die sich die Title-Texte als Ergänzung zum Link vorlesen lassen.

Accesskeys

User von Word tun es: Sie drücken zum Speichern von Texten Strg+s. Photoshop-User tun es noch viel häufiger sie drücken beim Deaktivieren eines Auswahlrahmens Strg+d. Sie nutzen die Tastatur anstelle der Maus zum Ausführen von Funktionen und Befehlen. Mit Tastatur-Shortcuts werden Arbeitsschritte beschleunigt und Navigationswege verkürzt.

Einzig im Internet werden Shortcuts oder Accesskeys kaum eingesetzt. Dabei lassen sich Links, Formularfelder oder auch Buttons mit dem Befehl accesskey="taste" mit Tastatürkürzeln belegen. Windows-User können mit Alt + Accesskey und Apple-User mit Control + Accesskey den Link klicken oder direkt zum Formular gelangen.

Nützlich können Accesskeys für ganz unterschiedliche User sein:

Tabindex

Mit Hilfe des Tabindex kann man sich linear über alle klickbaren Bereiche einer Webseite bewegen. User müssen einzig die Tab-Taste drücken und können so navigieren. So ist möglich nur mit zwei Tasten Tab und Enter zu browsen.

Tabindex provides shortcut serial access to various parts of the page - not unlike a DVD's chapter index.

(Zeldman 2003:355)

Einen Tabindex einzubauen ist einfach: Die Links werden mit tabindex="eineZahl" versehen. Mit der Größe der Zahl kann man die Wichtigkeit und die Reihenfolge bestimmen. Je kleiner die Zahl, desto weiter vorn in der Tab-Reihe.

Ähnlich den Accesskeys kann ein Tabindex für viele User nützlich sein. Der Tabindex jedoch noch leichter zu verstehen und schneller plausibel. Die Tabtaste ist bei allen Computern, Browsern und Betriebssystemen identisch und die Bewegung linear. Die User müssen nicht über die Tastaturbelegung informiert werden. Auch müssen sie die Tastenkombination nicht merken. Besonders nützlich und zeitsparend ist der Tabindex bei Formularfeldern, die man diese per Tastatur ausfüllen müss und sich so den Griff zu Maus ersparen kann. Der Navigationsweg ist zum Teil länger weil man bestimmte Links nicht direkt ansteuern kann.

Variable Schriftgröße

Ältere Menschen benutzen oftmals ein Lupe zum Zeitungslesen oder halten die Zeitung ein Stück weg, um der Alters-Weitsichtigkeit zum Trotz die Zeitung ohne Brille lesen zu können. Beide Verhaltensweise haben eines gemein: Die Menschen lassen sich den Zugang zu Zeitungsinformationen nicht nehmen. Das Internet kann für diese beiden Bevölkerungsgruppen etwas tun, was Zeitungen nicht können: Schrift vergrößern.

Dieser Möglichkeit, die seit den frühen Browsergenerationen besteht, um das Lesen am Bildschirm zu erleichtern, wird von vielen Websites vernachlässigt oder einem absolut fixen Design geopfert. Wird bei einer Website die Schriftgröße pixelgenau definiert, ist beim Internet Explorer die Funktion Ansicht/Schriftgrad deaktiviert. Moderne Browser wie Mozilla oder Firefox geben den Usern immer die Möglichkeit die Schrift zu vergrößern, egal ob die Website dies erlaubt oder nicht. So wird vielen Usern die Lesbarkeit erleichtert oder erst ermöglicht. Die Website-Macher haben die Wahl: Zeigen sie den Usern eine kaputte Website, wenn die Schrift vergrößert wird oder bieten sie den Usern den Komfort mit vergrößerter Schrift eine völlig intaktes und somit leistungsfähiges und attraktives Webangebot.

Visual design and images are important, to be sure, but if people can't read your words, what's the point?

(Mark Pilgrim. Dive into accessibiltiy: Day 26)

Die Gestaltung einer Website mit variablen Schriftgrößen ist etwas anspruchsvoller, da zum einen unterschiedliche Browser auf Prozent oder Em-Größen anders reagieren und zum anderen variable Schrifthierarchien mitbedacht werden müssen, doch lohnt es sich in jedem Fall: Nicht nur älteren Menschen wird der Zugang ermöglicht auch für jüngere oder müde User oder welche, die sich gerne mal etwas vom Bildschirm wegsetzen, oder für diejenigen, die gerade zu faul sind ihre Lesebrille aufzusetzen, wird die Nutzung der Website leichter und komfortabler.

Natürlich sollte man auch vorsehen, dass man die Schrift verkleinern kann. Manche User finden es schön, mit kleiner Schrift oder Zoom 90% zu surfen. Barrierefreie Websites können auch diese glücklich machen, da unterschiedliche Geschmäcker bedient werden.

Tabellenloses Layout und semantisches Markup

Im Grunde interessiert es die User nicht, welches HTML-Gerüst sich unter der Oberfläche befindet. Für sie ist nur wichtig: Sind die Informationen interessant und sind diese gut und leicht auffindbar aufbereitet. Das Wichtigste für User ist jedoch die Ladezeit - egal, ob mit 56K-Modem oder mit Standleitung. Schnell muss es gehen. Langsame Seiten sind Frustrationsfaktor Nummer eins im Internet. Umgekehrt schaffen schnellladende Angebot ein angenehmes Surfgefühl, egal ob Unterhaltungsangebot, Shop oder Newssite. Ein tabellenloses Design lädt um ein Vielfaches schneller. Verwendet die Site zudem XHTML-Tags, die inhaltlich Sinn machen also für Überschriften <h1> oder für Textpassagen <p> oder für Listen <li> und keine oder kaum HTML-Tags, die reine Design-Zwecke erfüllen und keine Beziehung zum Inhalt des Dokuments haben, kann die Ladezeit noch einmal beschleunigt werden, da sich der Quellcode der einzelnen HTML-Seiten drastisch reduziert.

Ein Verzicht auf reine Design-Tags heißt nicht ein Verzicht auf professionelle Gestaltung und eine Rückkehr zu Websites der erste Generation von 1995. Mit inhaltlichen HTML-Tags wie Überschrift, Textabsatz, Listen etc. lassen sich ansprechende und anspruchsvolle Designs verwirklichen - mit dem Unterschied dass die Website barrierefrei und zukunftsfähig wird. Sie ist ohne Probleme auf allen internetfähigen Geräten wie Palms oder Handys abrufbar.

Dude, your stuff can look great
and be totally accessible.

(Zeldman 2003:331)

Die Lesbarkeit für Screenreadern oder Textbrowsern erhöht sich immens, wenn keine unnötigen Table-Tags oder Blind-Gifs verwendet werden. Tags, die rein dafür da sind, das Design zu garantieren sperren die Informationen ein oder machen sie gar unkenntlich und damit unzugänglich.

Ein attraktiver Nebeneffekt: Google, der einflussreichste blinde User, kann Google die Website durch tabellenloses XHTML und semantischen Code leichter durchsuchen. Durch die bessere Indizierung wird die Website höher gelistet. Eine semantisch getagte Überschrift mit <h1> hat für Google eine weitaus größere Bedeutung als eine rein designte (z.B. <div class="bigheadline">Überschrift</div>)

Fazit

Ebenso wie Aufzüge in Gebäuden oder U-Bahn-Stationen ganz unterschiedliche Nutzen mit sich bringen, bieten barrierefreie Websites eine Vielzahl von Vorteilen: schnelle Ladezeit, leichte Zugänglichkeit für alle Benutzergruppen und internetfähigen Geräte sowie Schnellwege und bessere Lesbarkeit. Barrierefreiheit ist wegen seiner universellen Dienlichkeit nicht nur ein soziales Programm, um Behinderten oder körperlich eingeschränkten Personen den Zugang zu Internetangeboten zu erleichtern, sondern eine gewinnbringende Maßnahme für mehr Komfort und bessere Bedienbarkeit und damit auch für mehr Traffic.

Bibliografie

Clark, Joe. 2003. Building Accessible Websites.
Nachdrücklich, undogmatisch und zum Teil zynisch erläutert Clark Hintergründe und Möglichkeiten der Barrierefreiheit
Pilgrim, Marc. 2002. Dive into Accessibility. www.diveintoaccessibility.org
Marc Pilgrim zeigt in kleinen Tagesrationen, wie einfach man den Grad der Barrierefreiheit einer bestehenden Website sehr leicht erhöhen kann.
WebAIM. Introduction to Web Accessibility. www.webaim.org/intro
Web Accessibility in Mind vermittelt Basis-Wissen zur Barrierefreiheit
Zeldman, Jeffrey. 2003. Designing with Web Standards.
Lässig und engagiert bringt Zeldmann die Vorteile und Chancen von Web Standards für Profis rüber.

Bei Vorsprung durch Webstandards weiterlesen

Creative Commons-LizenzvertragDieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert. (Feel free to steal, but think and quote.)