Screenreader und versteckte Inhalte

[Tobias Müller]

Hallo allerseits,

<!-- HTML -->
<ul id="skip">
<li><a href="#content">skip to content"></a></li>
<li><a href="#subnavi">skip to subnavigation</a></li>
<li><a href="#search">skip to searchform</a></li>
</ul>
<!-- Ende HTML -->

/* CSS */
#skip {
position: absolute;
left: -9999px;
top: -9999px;
}
/* Ende CSS */

Ich blende den Text einer grafischen CSS-Navigation beispielsweise immer so aus:

HTML:
<ul id="navi">
  <li><a href="link1.html"><span class="nichtzeigen">Link1<span></a></li>
  <li><a href="link2.html"><span class="nichtzeigen">Link2<span></a></li>
</ul>

CSS:
.nichtzeigen {
  display:block;
  margin-left:-10000em;
}

Idealerweise sollte das umgebende Element dann noch ein overflow:hidden erhalten.

MfG, Mülli