Das Rückgrat eines Webauftrittes: Die Navigation

Texthinterlegung für Screen- und Webreader

• Unsichtbare Sprungmarken .
• Kontextuelle Hinweise .
• Semantische Informationen .
• Der unsichtbare Schlusspunkt .

Unsichtbare Sprungmarken

Wie Navigationsleisten strukturell gestaltet werden, damit sie übersprungen werden können, wurde bereits im vorletzten Abschnitt beschrieben. Allerdings können nur moderne Screenreader von Element zu Element innerhalb eines Dokuments springen. Vor allem ältere Zugangssoftware erkennen die Seitenstruktur nicht und, um  Bedingung 13.6 zu erfüllen, muss eine Sprungmarke in Verbindung mit einem unsichtbaren aber für Screenreader erfassbaren Link gesetzt werden. Dabei steht der Link vor der Navigationsleiste und der Anker dahinter:

Der Link "Navigation überspringen" wird wie folgt mit CSS versteckt:

.unsichtbar

Theoretisch müsste die Eigenschaft display:none; ausreichen, aber nicht alle Screenreader geben den Text dann aus. Deswegen wurde diese, etwas kompliziertere, dafür aber robustere Methode für das Verstecken von Inhalten am Bildschirm gewählt.

Diese Möglichkeit sollte insbesondere auch dann verwendet werden, wenn die Navigation nicht aus einem (X)HTML-Element besteht. Beispielsweise in Tabellenlayouts sollte die Möglichkeit, die Navigationsleiste zu überspringen, immer mit einem (unsichtbaren) Link berücksichtigt werden.

Mit der Klasse unsichtbar wird der Text nicht nur am Bildschirm versteckt, sondern (sicherheitshalber) 1000 Pixel jenseits des linken Bildschirmrandes positioniert.

Kontextuelle Hinweise

Bedingung 13.6 der BITV fordert neben der Gruppierung und der Möglichkeit des Überspringens von Navigationsleisten auch die deutliche Benennung. Die Benennung ist vor allem dann erforderlich

• wenn es mehrere Navigationsbereiche gibt und
• wenn Navigationsbereiche sehr fein gegliedert sind.

Unser Beispiel wollen wir mit einer entsprechenden Bezeichnung für den Navigationsbereich selbst sowie für die aktuelle Position ergänzen. Der Hinweis wird strukturell mit STRONG gekennzeichnet und mit der oben definierten Klasse unsichtbar versehen:

Kontextuelle Hinweise können vor den einzelnen Navigationsleisten angebracht werden. Sinn dieser kontextuellen Hinweise ist die Vermittlung einer knappen Information zum Inhalt der Navigationsleiste.

In unserem Beispiel können wir sagen, es handele sich um die Hauptnavigation einer Seite. Mit der selben Methode des versteckten Textes können wir vor der "Linkliste" ankündigen, was in der Liste aufgeführt wird.

Die Angabe der aktuellen Position ist in diesem Beispiel gewissermaßen überflüssig, denn der aktuelle Hauptnavigationspunkt unterscheidet sich von allen anderen Navigationspunkten dadurch, dass er nicht verlinkt ist. Dennoch kann es beispielsweise sinnvoll sein, einige wenige kontextuelle Hinweise zur Orientierung zu berücksichtigen. Wenn Informationen per CSS vermittelt werden, wie zum Beispiel die Hervorhebung in der Navigation durch Hintergrundfarbe, Symbole oder Rahmen können diese von Screenreadern kaum ausgelesen werden.

Die oft eingesetzte Methode, ein title-Attribut anstatt eines versteckten Textes anzubringen, wäre für Screenreader genauso geeignet, allerdings werden title-Attribute in grafischen Browsern als Tooltipp angezeigt. Wenn andere Benutzer mit der Maus über die Navigation fahren, dann erschiene dieser Text ständig, was von vielen als störend empfunden wird. Von daher ist die Methode mit dem versteckten Hinweis im Sinne der Barrierefreiheit besser.

Übrigens: Wer das title-Attribut für Links so einsetzt, dass im title-Attribut genau das steht, was im Linktext auch steht fördert die Barrierefreiheit nicht. Vielmehr wird eine Information doppelt ausgegeben, sowohl am Bildschirm als auch - je nach Einstellung - in Sprachausgaben. Wenn das title-Attribut für Links eingesetzt wird, dann sollten dort ausführliche Beschreibungen zum Ziel des Links aufgenommen werden, die nicht aus dem Linktext hervorgehen.

Semantische Informationen

Gerade auf großen Webauftritten können semantische Informationen über die aktuelle Position im Gesamtkontext eines Webauftrittes hilfreich sein. Denkbar ist eine numerische Gliederung von Hauptrubriken, ggf. Unterrubriken und einzelnen Punkten bzw. Dokumenten. Inwieweit diese Informationen erforderlich sind hängt sehr stark von der Komplexität des Webauftritts ab. Eine Möglichkeit Nummerierungen zu vergeben ist mit dem DFN-Element.

Das DFN-Element bezieht sich stets auf das umschließende Element. Hier ist der Bezug also der Listenpunkt. Der Bezug auf den Link wäre semantisch gesehen auch richtig.

Da die Nummerierung am Bildschirm nicht sichtbar sein soll, wird die Deklaration für die Klasse unsichtbar um das DFN-Element erweitert:

.unsichtbar, dfn

Siehe Erläuterung oben.

Dieses Element wird ebenfalls unsichtbar gestaltet, weil es eine spezifische Information für Screenreader-Nutzer ist. Weitere Aspekte zu dieser Methode werden auf  http://www.einfachfueralle.de/ artikel/ menues/ diskutiert.

Auch hier gibt es sicher andere Methoden, die Texthinterlegung für Screenreader deutlich zu machen. Beispielsweise wäre eine Pfadangabe (bread crumb trail) eine denkbare Variante, wenn das im Design der Seite vorgesehen ist. Die Links in einer solchen Pfadangabe könnten dann ebenfalls mit unsichtbaren DFN-Elementen versehen werden, was den Nutzer einer Sprachausgabe den Bezug zur Hauptnavigation vermitteln kann.

Der unsichtbare Schlusspunkt

Der Vollständigkeit halber sei auch auf  Bedingung 10.5 der BITV hingewiesen. Demnach sind zwischen Links ausdruckbare und mit Leerzeichen umgebene Zeichen zu setzen.

Das Erfordernis nach einem solchen Zeichen zwischen Links ist vor allem für ältere Screenreader im Zusammenhang mit Braillezeilen aber auch in Textbrowsern gegeben. In dieser Zugangstechnik war es gelegentlich so, dass Links stets nebeneinander dargestellt wurden, wodurch die Unterscheidung einzelner Links nur unter erschwerten Bedingungen möglich war. Heute bieten Screenreader die Funktion an, Links immer auf einer neuen Zeile der Braillezeile darzustellen. Dieses Kriterium der Barrierefreiheit wird also in absehbarer Zeit überflüssig sein.

Um diese Bedingung zu erfüllen reicht ein einfacher (unsichtbarer) Punkt nach jedem Link. In unserem Fall ist dieses Kriterium der Barrierefreiheit aber schon erfüllt! Da sich die DFN-Elemente außerhalb der Links befinden, stellen sie "ausdruckbare" Zeichen dar, die die Links voneinander trennen. D.h. ein alter Screenreader oder Textbrowser, die übrigens CSS nicht unterstützen, zeigt die Nummerierung an und trennt somit die Links auf der Braillezeile.

Über das CSS-Design

Lesen Sie,  warum ich mich an die Standards halte und warum das Layout mit  Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der  Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.

Suchen Sie was auf barrierefreies- webdesign.de?

Geben Sie Ihr Stichwort ein:

Entspricht die Seite den W3C-Normen?

Die  Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.

Der schnelle Seitenzugriff

Verwenden Sie  Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.