Teil 4 – Accessibility (Zugänglichkeit)

Übersprung-Links

Was ist das?

Übersprung-Links sind dazu da, um bestimmten Nutzern die Möglichkeit zu geben, einen Teil des Inhaltes zu überspringen um so schnell zu einem anderen Teil zu gelangen. Das bedeutet zum Beispiel das Überspringen von Navigations-Links, um direkt zum eigentlichen Inhalt zu gelangen oder das Überspringen des Inhalts, um schnell zur Navigation zu gelangen.

Einige Beispiele:

<div id="skiplink">
   <a href="#content" title="skip to content">Skip to content</a>
</div>
<p id="skiplink">
   <a href="#content" title="skip to navigation">Skip to navigation</a>
</p>
<ul id="skiplink">
   <li><a href="#content" title="skip to content">Skip to content</a></li>
   <li><a href="#content" title="skip to content">Skip to content</a></li>
</ul>

Sichtbare Übersprung-Links

Wo immer möglich, sollten Übersprung-Links sichtbar sein, anstatt sie im Quellcode zu verstecken. Dies ermöglicht es den Benutzern, die sich auf die Tastaturnavigation verlassen müssen (keine Maus), zuerst zum Übersprung-Link zu navigieren, um dann zu entscheiden ob sie den Inhalt überspringen möchten oder die Navigation.

Übersprung-Links positionieren

Sichtbare Übersprung-Links können an den Anfang des Quellcodes positioniert werden, aber visuell dann per CSS-Positionierung irgendwohin auf der Seite positioniert werden.

Im Falle, dass Übersprung-Links sich innerhalb eines bestimmten Containers befinden müssen, kann man diesen Container relativ positionieren mittels position: relative und die Übersprung-Links wiederum mit position: absolute. Dies ermöglicht es, dass die Übersprung-Links irgendwo dargestellt werden können - in Relation zu deren Container.

Übersprung-Link-Beispiel