Checkliste

Welche Aspekte sind für eine barrierefreie Webgestaltung zu beachten?

Texthinterlegung
Farbkontraste
Skalierbarkeit
Linearisierbarkeit / Strukturiertheit
Navigation, Orientierung

Texthinterlegung

Jedes Element, das kein Text ist, sollte mit einem Alternativtext ausgezeichnet werden. Dies betrifft voranging Grafiken. Es kann sich dabei um Schrift-, Navigations- Layoutgrafiken oder Abbildungen (Bilder mit dem Dateiformat jpg, gif oder png) handeln.
Diese verschiedenen Grafikelemente sind unterschiedlich zu behandeln. So sollten Schriftgrafiken (z. B. Überschriften, Slogans etc.) immer im ALT-Attribut des IMG-Elementes den Text tragen, der auf der Grafik zu lesen ist. Gleiches gilt für Navigationsgrafiken (Buttons). Layoutgrafiken, wie z. B. das leere GIF, sollten eine leeres ALT-Attribut enthalten (alt=""), damit sie von Screenreadern übersprungen werden. Die einfachste Variante, um Abbildungen oder Diagramme mit einer Textalternative zu versehen, ist die klassische Bildunterschrift. Damit erhalten Blinde die alternative Textbeschreibung und zusätzlich erleichtert eine solche Bilderklärung z. B. Menschen mit kognitiven Behinderungen das Verständnis. Das Bild erhält natürlich trotzdem ein ALT-Attribut.
Grafiken und Bilder sind allerdings nicht die einzigen Elemente, die eine Textalternative benötigen. So sind auch für Imagemaps, Multimedia (Audio- und Video-Files) sowie Flash-Animationen Textalternativen notwendig. Grundsätzlich sollten Audio-Files für Hörgeschädigte in Gebärdensprache angeboten und Flash/Video-Sequenzen mit Untertiteln versehen werden (www.gebaerdenwerk.de).
Auf den Einsatz von Frames sollte verzichtet werden. Ist dies nicht möglich, so ist darauf zu achten, dass jeder Frame einen geeigneten Namen (z. B. name="navigation") erhält. Der noframes-Bereich kann entweder für eine Zusammenfassung des Webangebots oder als Navigationshilfe, in der die Inhalte der einzelnen Frames erläutert werden, genutzt werden.

Farbkontraste

Es ist darauf zu achten, dass die verwendeten Farben kontrastreich sind.
Zur Überprüfung von Kontrasten stehen verschiedene Werkzeuge zur Verfügung:
Ein Beispiel ist der Vischeck (engl.) zur Simulation verschiedener Farbsehstörungen. Machen Sie dazu am Bbesten einen Screenshot Ihrer Internetseite und laden Sie die Datei unter Vischeck > Run Image hoch.

Gute Kontraste ergeben:

Schwarz auf Weiß
Weiß auf Rot
Blau auf Weiß
Gelb auf Blau

Farben

Es ist darauf zu achten, dass Informationen nicht ausschließlich durch Farben gekennzeichnet werden (z. B. "die farblich hinterlegten Formularfelder müssen ausgefüllt werden" oder die typische alleinige farbliche Kennzeichnung des aktuellen Menüpunktes).
Farben sollten ausschließlich im Stylesheet festgelegt werden.
Zudem muss die Webseite auch ohne Stylesheets verwendbar sein. Dies kann man sehr gut mit dem Add-on "Web Developer-Toolbar" für Mozilla / Firefox testen.
Für den Internet Explorer gibt es ein ähnliches Plugin, die Accessibility-Toolbar.

Skalierbarkeit

Skalierbar sollte sowohl die Schriftgröße als auch das gesamte Layout sein. Dies erreicht man durch den Einsatz von relativen (Schrift-)Größen. Die Angabe in % richtet sich nach der Fensterbreite; die Einheit "em" passt sich der eingestellten Schriftgröße an.
Geben Sie für Formularelemente immer die folgenden Schriftgrößen an:
input, textarea, select { font-size: 100%;}
Testen Sie das Layout mit unterschiedlichen Fenstergrößen und Auflösungen.

Linearisierbarkeit / Strukturiertheit

Die wichtigste Voraussetzung für barrierefreie Webinhalte ist die strikte Trennung von Inhalt und Layout. Für die Umsetzung bedeutet dies, dass Texte logisch (nach der Funktion des Textteils) ausgezeichnet werden müssen - und nicht physisch (nach dem Aussehen).

Einige Beispiele:

Statt: <p><font size="3" color="red">
<b>Überschrift</b></font></p>
Besser: <H1>Überschrift</H1> [grafische Gestaltung per CSS]

Statt: <b>wichtig</b>
Besser: <strong>wichtig</strong> [grafische Gestaltung per CSS]

Statt: <br><br>
Besser: <p> ... </p><p> ... </p> [Abstände per CSS definieren]

Statt: Layouttabellen
Besser: CSS-Layout, Tabellen nur für echte Datentabellen!

Tipp: Mit dem Outliner-Plugin für Firefox können die Überschriften in Form eines Inhaltsverzeichnisses dargestellt werden (ähnlich den Formatvorlagen in Word).

Zur Strukturierung einer Webseite sind DIV-Elemente hilfreich:

Navigation / Orientierung

Die Reihenfolge der logischen Abschnitte (Navigation, Inhalt, Fußzeile etc.) und besonders der aktiven Elemente (solche die mit der Tastatur (Tabulatortaste) angesprungen und bedient werden können) sollte auf jeder Seite gleich sein.

Für Navigationsmenüs sind Listen zu verwenden.

Für lange Texte bieten sich unsichtbare Sprunglinks an:

<p class="unsichtbar">
Direkt
<a href="#inhalt">zum Inhalt</a>,
<a href="#suche">zur Suche</a>,
<a href="#menue">zum Hauptmenü</a>.
</p>

Per Cascading Style Sheets setzt man die Klasse auf display: none;. Der Text wird dann vom Screenreader ausgelesen, ist jedoch für sehende Besucher unsichtbar.

Sämtliche Linktexte sollten aussagekräftig sein, also nicht: "Hier klicken!"

nach oben