NOOCHRICHTE 64 (Oktober 2001)

Internet: Grenzenlose Übersicht 10 Tipps für Profis

Modernes Design und barrierefreie Gestaltung sind keine Gegensätze. Denn auch die schönste Homepage verfehlt ihr Ziel, wenn sie nur für einen Teil der Besucher benutzbar ist. 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 Site für alternative Ausgabegeräte (assistive Technologien wie Sprachsynthesizer, Braillezeile oder Joystick) zugänglich ist, wird sie auch mit Kiosksystemen ohne Tastatur oder Organizer-Displays bedienbar sein. Beim Einsatz von Zusatzelementen wie Java, Javaskript oder Flash-Animationen sollte darauf geachtet werden, dass die Webinhalte auch dann noch transportiert werden können, wenn das Anzeigegerät diese Programmiersprachen nicht beherrscht bzw. das entsprechende Plug-In deaktiviert ist.

2. Der Willkür ein Ende

Webseiten, die sich am aktuellen W3C-Standard «HTML 4» orientieren, sind automatisch auf- und aufwärtskompatibel und können von allen alten und neuen Browsern und alternativen Ausgabegeräten dargestellt werden. Zur Überprüfung auf W3C-Konformität können Sie online-Werkzeuge wie http://validator.w3.org/ oder http://www.cast.org/bobby/ einsetzen.

3. Trennen, was nicht zusammengehört

Die Verwendung von Style Sheets (CSS) erlaubt die flexible Trennung von Struktur und Präsentation. So kann auf starre Formatierungen wie «font» 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 in Pixeln ist die Benutzung von relativen Einheiten wie «em» oder Prozent. Damit erhalten alle Benutzer die Möglichkeit, den Text an ihre Vorlieben oder Bedürfnisse (z.B. bei Sehbehinderung, Kurz- oder Weitsichtigkeit) anzupassen. Das löst auch das Problem, dass am Zielmonitor eine höhere Auflösung als vorgesehen eingestellt ist und die Schrift unlesbar klein wird.

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> bis <h6> 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 eingebaute Strukturierung angewiesen, um den Text seiner Funktion gemäß darstellen zu können. Auch Suchmaschinen bewerten Stichworte in <h1> bis <h6> höher als normale Textabschnitte (<p>), so dass Sie durch eine geschickte Formulierung Ihr Ranking verbessern können.

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 dekora-tiven 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 gleichwertige <object>, auch Grafik- und Text-Alternativen einzubinden.

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.

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 meisten Browser die Alternative CSS, die zusammen mit HTML 4 eine viel flexiblere Layout-Gestaltung erlaubt. Denn mit CSS und HTML 4 können Sie alle Elemente auf einer Webseite frei positionieren. Dadurch verringert sich die Entwicklungszeit, Updates werden einfacher und durch die geringere Dateigröße bekommt der Besucher Ihre Seiten schneller zu Gesicht.

10. Grenzenlose Übersicht

Die Verwendung von Frames macht Webseiten schnell unüberschaubar, verwirrt die Besucher und verursacht durch ihre komplizierte Programmierung hohe Kosten. Wer dennoch nicht darauf verzichten will, sollte jedes Frameset mit einer noframes-Programmierung unterlegen, auf der ein Link blinde User direkt zur wichtigsten Information weiterleitet.