Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies ist ein Beispiel aus dem Buch 
Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.
Unsortierte Liste zur Navigation
Auf dieser Seite wird eine Liste zur Navigation gezeigt. In der Hauptkategorie 1 ist eine Liste mit Unterpunkten eingeschachtelt. Im Quelltext ist ein unsichtbarer Hinweis für Nutzer von Screenreadern eingebunden, der diesen bei der Orientierung innerhalb der Navigation hilft.
HTML
<div class="nav">
<span class="unsichtbar">Hauptnavigation</span>
<ul>
<li class="hauptkategorie"><a href="#">Hauptkategorie 1</a>
<ul>
<li class="unterseiten"><a href="#">Unterseite 1 </a></li>
<li class="unterseiten"><a href="#">Unterseite 2 </a></li>
<li class="unterseiten"><a href="#">Unterseite 3 </a></li>
<li class="unterseiten"><a href="#">Unterseite 4 </a></li>
</ul>
<span class="unsichtbar">Ende Unterseiten Hauptkategorie 1</span>
</li>
<li class="hauptkategorie"><a href="#">Hauptkategorie 2 </a></li>
<li class="hauptkategorie"><a href="#">Hauptkategorie 3</a> </li>
</ul>
</div>
CSS
.nav {
width: 14em;
float:left;
}
.nav ul {
list-style-type:none;
margin:0em;
padding:0;
}
.nav a {
border:solid 0.1em;
display:block;
width: 100%;
padding:0.2em;
text-decoration:none;
}
.nav a:active,
.nav a:hover {
text-decoration:underline;
}
.hauptkategorie {
margin-bottom:0.05em;
padding:0.05em;
font-weight: bold;
}
.unterseiten {
padding-left:1em;
margin-top:0.1em;
font-weight: normal;
}
.unsichtbar {
position:absolute;
left:-1000px;
top:-1000px;
width:0px;
height:0px;
overflow:hidden;
display:inline;
}
Hinweis: Die Eigenschaft display wird zwischenzeitlich nicht mehr empfohlen, um Inhalte zu verstecken. Weitere Informationen finden Sie im Beitrag Unsichtbare Texte.