Grenzenlose Übersicht - 10 Tipps für Profis

Barrierefreiheit spiegelt sich an der Oberfläche – davor steht nur ein durchdachtes Abtauchen in die Programmierung. Dabei müssen nur wenige Punkte beachtet werden. Sie lassen sich schon in der ersten Entwurfsphase ohne großen Aufwand umsetzen und helfen sogar, Kosten zu sparen. Tipps für Profis zeigen, wie es geht:

1. Vielfalt statt Einfalt.

Sie können nicht davon ausgehen, dass alle Besucher dieselbe Rechnerkonfiguration wie Sie benutzen. Deshalb sollte eine Website von möglichst vielen Geräten dargestellt werden können. Wenn Ihre Seiten für alternative Ausgabegeräte (assistive Technologien wie Sprachausgaben, Braillezeile oder Joystick) zugänglich sind, werden sie auch mit Kiosksystemen ohne Tastatur oder den Hilfsmittel von Menschen mit motorischer Behinderung bedienbar sein.

Wenn Sie Ihre Seiten so strukturieren, dass Navigationsblöcke übersprungen werden können oder Formularelemente auch per Tastendruck bedient werden können, sind diese damit auch für Organizer-Displays ohne Maus bedienbar. Auch seh- oder sprachbehinderte Benutzer, die sich Ihre Seiten vorlesen lassen, kommen so ohne Umwege zu Ihren Inhalten.

Beim Einsatz von Zusatzelementen wie Java, JavaScript oder Flash sollte darauf geachtet werden, dass die Inhalte und Funktionen auch dann noch transportiert werden können, wenn das Anzeigegerät diese Sprachen nicht beherrscht oder das entsprechende Plug-In nicht verfügbar ist.

2. Der Willkür ein Ende.

Webseiten, die sich an den aktuellen W3C-Standards orientieren, sind automatisch auf- und abwärtskompatibel und können von allen alten und neuen Browsern und alternativen Ausgabegeräten dargestellt werden. Zur Qualitätssicherung Ihres Codes sollten Sie kostenlose online-Werkzeuge wie validator.w3.org, CynthiaSays oder bobby.watchfire.com einsetzen.

Bitte beachten Sie, dass diese Tools lediglich auf der technischen Ebene die Syntax einer Webseite überprüfen. Für eine Software ist es nicht feststellbar, wenn bestimmte Elemente einer Sprache missbräuchlich eingesetzt werden.

Das Bestehen einer Prüfung durch das Bobby-Programm lässt lediglich die Vermutung zu, dass Ihre Seiten technisch weitestgehend barrierefrei sind. Die Barrierefreiheit auf der Ebene der Wahrnehmung durch den User wie eingängige Navigation und verständliche Texte ist nur durch Tests mit echten Benutzern überprüfbar.

3. Trennen, was nicht zusammengehört.

Die Verwendung von Style Sheets (CSS) und XHTML erlauben die flexible Trennung von Inhalt, Struktur und Aussehen. So kann auf starre Formatierungen mit font>, table> und frame> verzichtet werden. Das verkürzt die Entwicklungszeit und hilft, Kosten zu senken. Außerdem verringert die Gestaltung mit CSS die Seitengröße und damit die Ladezeit beim Benutzer.

4. Beweglichkeit ist Trumpf.

Sinnvoller als die Festlegung starrer Schriftgrößen ist die Benutzung von relativen Einheiten. Damit erhalten alle Benutzer die Möglichkeit, den Text an ihre Vorlieben oder Bedürfnisse (z. B. bei Sehbehinderung, Kurz- oder Weitsichtigkeit) anzupassen. Wenn sie auf Ihren Seiten alle Maßangaben relativ zueinander setzen, stellen Sie damit auch sicher, dass ihr Layout in der gewünschten Form erhalten bleibt, wenn der Besucher andere Größen eingestellt hat.

5. Logik ohne wenn und aber.

Die inhaltliche Struktur einer Webseite sollte durch die Verwendung logischer Textauszeichnungen ausgedrückt werden. Wenn beispielsweise Überschriften bloß durch die Veränderung der Textgröße per font> und b>-Element gestaltet werden, geht die logische Struktur verloren, die eine per <h1>-<h4> formatierte Überschrift bereits als Information in sich trägt.

Wenn Sie Textpassagen hervorheben wollen, verwenden Sie statt i> für kursiv besser em> für Betonung und strong> statt b> für fett. Das Ergebnis ist in allen gängigen grafischen Browsern dasselbe. Alternative Ausgabemedien sind aber auf diese eingebettete Strukturierung angewiesen, um den Text seiner Funktion gemäß darstellen zu können. Auch Suchmaschinen bewerten Stichworte in <h1>-<h4> höher als normale Textabschnitte (p>), so dass Sie durch eine geschickte Formulierung Ihr Ranking verbessern können.

Wenn Sie Zitate mit den dafür vorgesehenen Elementen wie q>, <cite> und blockquote> auszeichnen, können Sie sogar per CSS automatisch die korrekten typografischen Anführungszeichen hinzufügen lassen.

6. Beredte Bilder.

HTML 4 stellt mehrere Hilfen zur Verfügung, um Bilder und Grafiken mit alternativen Texten (alt=""), Erläuterungen zur Funktion (title="") oder Beschreibungen (longdesc="") auszustatten. Der Alternativtext sollte jedoch die gleiche Funktion erfüllen wie das Objekt selbst ("Zurück zur Startseite") und nicht nur dessen Aussehen beschreiben ("Firmenlogo in Hellgrün"). Bilder, die lediglich dekorativen Charakter haben, sollten Sie nicht gesondert beschreiben, sondern mit einem leeren alt-Attribut vor Sprachsynthesizern »verstecken".

Wenn Sie zu Multimedia-Elementen eine Alternative in Textform anbieten, kommen auch Besucher ohne das passende Plug-In an die nötigen Informationen. Anstelle des häufig verwendeten embed> erlaubt das funktional höherwertige object> auch, Grafik- und Text-Alternativen einzubinden. Bei A List Apart finden Sie die Dokumentation, wie Sie Ihre Flash-Filme in älteren Browsern auch ohne embed> zum Laufen bringen.

7. Direkt und ohne Missverständnisse.

Eine eindeutige und konsequent durchgehaltene Navigation erleichtert den Besuchern, sich ohne Umwege zurecht zu finden. Selbsterklärende Navigationselemente und Informationen, die den Kontext der aktuellen Seite innerhalb der Gesamtstruktur verdeutlichen, erleichtern eine intuitive Orientierung auf Ihrer Website. Wie die meisten Sprachausgabegeräte können auch immer mehr Browser die Links und Überschriften einer Seite zusammenfassen und getrennt darstellen. Deshalb sollten Sie Links und Überschriften so formulieren, dass sie auch außerhalb des unmittelbaren Zusammenhangs noch eine Aussage über Sinn und Zweck machen.

Besondere Hürden bestehen für Menschen, die auf eine Sprachausgabe angewiesen sind, darin, dass Wechsel in der Sprache eines Dokumentes nicht ausgezeichnet werde. Ohne einen Wechsel per lang="en" werden englische Worte wie »Sitemap", »Homepage« und »Online« einfach nach deutschen Ausspracheregeln vorgelesen.

8. Vorsicht Farbe.

Wenn Sie Farben zur Orientierung einsetzen, sollten Sie deutliche Farbkontraste wählen und zusätzlich andere grafische Symbole oder Gestaltungselemente zur Kennzeichnung verwenden, da sich sonst stark sehbehinderte oder farbenblinde User auf den Seiten nicht zurechtfinden. Etwa zehn Prozent der männlichen Bevölkerung sind farbenblind und können mit Anweisungen wie »Klicken Sie auf den grünen Button« nichts anfangen.

9. Layout ohne Krücken.

Schreiben Sie Ihre Briefe etwa mit Excel? Viele Designer benutzen für das Layout noch die Tabellenfunktion von HTML. Mittlerweile unterstützen die weitaus meisten Browser die Alternative CSS, die eine viel flexiblere Layout-Gestaltung erlaubt. Mit CSS und HTML 4 oder XHTML können Sie alle Elemente auf einer Webseite frei positionieren und zusätzlich noch eine wesentlich bessere Kontrolle über Ihre Gestaltung erreichen. Dadurch verringert sich die Entwicklungszeit, Updates werden einfacher und durch die geringere Dateigröße bekommt der Besucher Ihre Seiten schneller zu Gesicht.

Tabellen sind natürlich hervorragend zur Darstellung tabellarischer Daten geeignet. Denken Sie daran, bei tabellarischen Daten die korrekte Auszeichnung von Spalten- und Zeilenköpfen zu benutzen, ohne die in alternativen Medien die Zuordnung der Daten in Spalte 7, Zeile 39 nicht mehr nachvollziehbar ist.

10. Grenzenlose Übersicht.

Die Verwendung von Frames macht Webseiten schnell unüberschaubar, verwirrt die Besucher und verursacht durch ihre komplizierte Programmierung hohe Kosten. Zudem können für Frames keine Lesezeichen angelegt werden und der Ausdruck ist in den meisten Browsern für den durchschnittlichen Benutzer fast unmöglich. Die meisten alternativen Zugangsmethoden sind von der Nutzung einer Frames-Seite dann ausgeschlossen, wenn, wie üblich die einzelnen Frames nicht sinnbildend benannt sind. Wer also nicht auf Frames verzichten will, sollte diese zumindest statt name="frame_01_links" und name="frame_02_rechts" besser name="navigation" und name="inhalt" nennen.