Barrierefreie Navigation

Unsichtbare semantische Informationen
(Schritt 10 von 10)

Bitte verwenden Sie die Zurück-Funktion Ihres Browsers (Alt + linke Pfeiltaste), um die vorherige Seite wieder aufzurufen.
Oder drücken Sie Alt + F4 um das Fenster zu schliessen.

Die Erläuterungen finden Sie in Texthinterlegung für Screen- und Webreader aus dem Beitrag "Das Rückgrat des Webauftrittes: Die Navigation".

Der HTML-Code

<div id="hauptnavigation">
<p class="unsichtbar"><a href="#zielAnker">Navigation überspringen</a></p>
<strong class="unsichtbar">Hauptnavigation</strong>
<ul>
<li><dfn>1: </dfn><a href="eintrag1.html">Eintrag 1</a></li>
<li class="aktiv">
<div class="aktiv"><span class="unsichtbar">aktuelle Seite: </span><dfn>2: </dfn>Eintrag 2</div>
<ul>
<li><dfn>2.1: </dfn><a href="eintrag2a.html">Eintrag 2 A</a></li>
<li><dfn>2.2: </dfn><a href="eintrag2b.html">Eintrag 2 B</a></li>
</ul>
</li>
<li><dfn>3: </dfn><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
<a name="zielAnker"></a>
</div>


Die CSS-Deklarationen

.unsichtbar, dfn {
position: absolute;
left: -1000px;
top: -1000px;
width: 0px;
height: 0px;
overflow: hidden;
display: inline;
}


Download

Ein komplettes Beispiel einer Navigation (3 Haupteinträge mit jeweils zwei Unterpunkten) samt CSS und Grafiken können Sie als ZIP-Datei herunterladen. (10 KB).