Rubriken

Navigationsweichen und Orientierungshilfen für Blinde und Tab-Navigatoren

CSS-Werkstatt: Barrierefreie Webseiten an der FernUni

Oft sind es wenige Handgriffe bzw. HTML- und CSS-Tricks, die Ihren Webauftritt der Barrierefreiheit ein Stückchen näher bringen. Dieser Beitrag soll helfen alle Besucher Ihrer Webseiten, insbesondere Menschen mit Sehbehinderungen, oder auch solche, die eine Navigation mit der Tabulatortaste bevorzugen, gleichermassen zufrieden zu stellen.

Navigationsweichen und Orientierungshilfen

Navigation links, Inhalt rechts, das Standardlayout - für den sehenden und Maus-benutzenden Besucher kein Problem. Wie aber päsentiert sich ein Webauftritt für Sehgeschädigte, deren Screenreader die Seiten linear vorlesen? Wo beginnt die Navigation, wo endet sie, in welchem Teil der Seite befindet man sich gerade?

Außerdem: Spätestens nach der 3. bis 4. Web-Seite nervt die ewig gleiche Hörspielpassage über die Navigation, wo man doch eigentlich bloß rasch an den Inhalt der Seite möchte.

Ähnliche umständlich wird es für Besucher Ihrer Seite, die mit den Tabulatortasten statt mit der Maus surfen: Im Gegensatz zu Anwendern, die mit den Augen und der Maus die Kopfzeilen und die Navigation einfach so überspringen, tippen diese 10x auf die <Tab>-Taste, bis sie zum Inhalt der Seite und den dort vorhandenen Links vorstoßen.

Ein Lösungsweg aus diesem Dilemma bieten kleine Hilfstexte und -links, die einzelne Webseitenbereiche beschreiben bzw. Direktsprünge innerhalb Ihrer Seite ermöglichen. Dabei soll die bisherige Darstellung unverändert bleiben. Der "normale" Betrachter soll von all dem nichts mitbekommen - er hat eine andere Wahrnehmung, und die wird bereits mit den bislang üblichen Gestaltungselementen ausreichend bedient.

Trick 1: Orientierungshilfen anbieten und verstecken.

Ergänzen Sie Ihre Navigation, damit sich sehgeschädigte Besucher besser orientieren können. Verwenden Sie einfache Text-Hinweise, um die Navigation vom eigentlichen Kern-Thema der Seite klar abzugrenzen:

<div class="unsichtbar">Navigation:</div>
<ul class="menue">
<li> ... </li>
...
</ul> <!-- menue -->
<div class="unsichtbar">Navigation Ende</div>
Damit diese zusätzlichen Textpassagen das Erscheinungsbild für sehende Besucher nicht zerstören, werden sie mit der CSS-Klasse .unsichtbar versteckt:
.unsichtbar {
display:none;
}
Die Idee, die dahinter steckt, ist simpel: Nur wer mit den entsprechenden Endgäten (Lautsprecher oder Brailletastatur) arbeitet, soll die Texte vorge- lesen bzw. dargestellt bekommen.

Leider interpretieren eine Reihe von Screenreadern die CSS-Anweisung wortwörtlich und lesen ausgerechnet das nicht vor, was auch nicht angezeigt werden soll. Der beabsichtigte Effekt verpufft.

Das World Wide Web Consortium (W3C) hat in seinen CSS-Standards zwar die Media-Typen "screen", "aural", und "braille" festgelegt, womit je nach Ausgabegerät (Bildschirm, Lautsprecher, und Braille-Ausgabe) eine andere Präsentationsform angeboten werden könnte. Leider werden damit derzeit aber noch keine verwertbaren Ergebnisse erzielt, zumal einige Screenreader multimodal arbeiten, d.h. sie mischen oder unterstützen mehrere Ausgabeformen (zum Beispiel Lautsprecher und Braillezeile) gleichzeitig, was zu widersprüchlichen Ausgabeeffekten führen kann.

Darum greift man hier zu einem Trick, der sogenannten "Left-Off"-Technik. Die Textpassagen werden dann zwar aus dem sichtbaren Anzeigebereich (Viewport) des Browsers geschoben, aber vorgelesen:

.unsichtbar {
position:absolute;
left:-2000px;
}

Trick 2: Navigation überspringen

Eine weitere Hilfe ist die sogenannte Navigationsweiche, die als erstes auf jeder Seite angeboten wird. Hier kann jeder Besucher zunächst entscheiden, ob er zuerst das Navigations-Menu durcharbeiten will, oder - weil ihm dieses schon bekannt ist - ob er direkt zum Inhalt der Seite gelagen möchte.

Der HTML-Code wird mit dem <A>-Tag für die Sprungmarke zum Inhalt ausgestattet:

<!--- Sprung-Menu direkt zum Inhalt -->
<p class="unsichtbar">
Universitätsrechenzentrum der FernUni.
<a href="#inhalt">
Direkt zum Inhalt dieser Seite
</a>
</p>

<!--- Hauptmenu -->
<div class="unsichtbar">Hauptmenu:</div>
<a name="menue"></a>
<ul class="menue">
<li> ... </li>
...
</ul> <!-- menue -->
<div class="unsichtbar">Hauptmenu Ende</div>

<!--- Inhalt -->
<a name="inhalt"></a>
...
Beachten Sie, dass die Navigationsweiche wieder mit class="unsichtbar" für normale Browser "unsichtbar" ist, also mit der in Trick 1 gezeigten CSS-Anweisung aus dem Bildschirmfenster verschwindet.

Trick 3: Navigationsweiche für TAB-Surfer wieder sichtbar machen

Trick 2 wird nun um einen CSS-Code erweitert, mit dessen Hilfe auch Betrachter unterstützt werden, die aber eine Navigation mit der Tabulatortaste bevorzugen; a:focus und a:active rücken die Navigationsweiche wieder in den sichtbaren Bereich.

Zum Schluss nun das CSS-Code-Beispiel für alle drei Zielgruppen:

/* Class "unsichtbar": 
Schiebt die "unsichtbaren" Hilfen aus dem
Viewport, dadurch lassen sich uebereifrige
Screenreader, die ausgerechnet "display:none"
akustisch auswerten, taeuschen und lesen
die so versteckten Hilfen dennoch vor.
*/
.unsichtbar{
position:absolute;
left:-2000px;
}

/* Sprunglinks beim Tabben sichtbar machen */
p.unsichtbar a:focus,
p.unsichtbar a:active{
position:absolute;
left:+2220px;
top:+70px;
display:block;
width:20em;
padding:2px 6px;
}
/* Class "unsichtbar": ENDE */
Kleiner Eingriff , grosse Wirkung: Auf den ersten Blick sieht man keine Veränderung, der sehgeschädigte Benutzer bekommt Hilfen vorgelesen, und wird ein unsichtbare Link mit der Tab-Taste angesteuert (und nur dann!), wird die Navigationsweiche eingeblendet. Probieren Sie es jetzt und hier aus: Laden Sie diese Webseite neu und drücken Sie die <Tab>-Taste. Ansprechpartner: Jens Vieler (webmaster@fernuni-hagen.de)
Jens Vieler 04.03.2010
FernUni-Logo FernUniversität in Hagen, D-58084 Hagen, Telefon: +49 (2331) 987-01, E-Mail: fernuni@fernuni-hagen.de