Umgehen von fokussierbaren Inhalten

veröffentlicht in 2016

zuletzt bearbeitet in

Sprunglink zum Inhalt (Skip navigation link)

Ein Sprunglink direkt zum Hauptinhalt einer Webseite ist dann zweckmäßig, wenn im HTML-Code vor dem eigentlichen Inhalt Inhaltsblöcke wie eine Kopfzeile oder eine Navigationsleiste stehen. Dann sollte ein per Schaltersteuerung oder mit der Tab-Taste als Erstes anspringbarer Link direkt zum Inhalt eingesetzt werden – dabei geht es darum, die aktiven Elemente in den Inhaltsblöcken zu überspringen.

<nav aria-label="Sprunglink">
  <p><a href="#inhalt">zum Hauptinhalt springen</a></p>
</nav>
… Kopfzeile,  Navigationsleiste, Suche …
<main id="inhalt">
  … Hauptinhalt der Seite …
</main>

In der Regel werden Sprunglinks dieser Art unsichtbar gestellt. Die allermeisten Nutzer benötigen diesen Link nicht, weil sie den Inhalt sehen und zudem per Mausklick den Hauptinhalt fokussieren beziehungsweise bedienen können.

Es gibt diverse Techniken, um Inhalte unsichtbar zu stellen, aber nur bestimmte Techniken verstecken Texte und erlauben gleichzeitig, dass die Inhalte zugänglich für Tastatur und Screenreader bleiben. Nachfolgend werden CSS-Eigenschaften für den Sprunglink festgelegt, die den Link am Bildschirm zeigen, wenn er fokussiert wird:

.skip-link:not(:focus){
position: absolute;
display:inline-block;
height: 1px;
width: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}

Ein Link zum Überspringen von Inhaltsblöcken darf unsichtbar gestaltet werden. Der Link muss aber spätestens bei Fokus sichtbar werden.

Der Link benötigt noch die Klasse "skip-link":

<a class="skip-link" href="#inhalt">zum Hauptinhalt springen</a>

Sprunglinks bei Bedarf

Im Allgemeinen reicht ein Sprunglink zum Hauptinhalt am Anfang der Webseite. Wenn Sie aber feststellen, dass andere Bereiche einer Webseite mit wichtigen Inhalten (zum Beispiel eine besondere Sidebar oder die Kommentare in einem Blogbeitrag) per Tab-Taste schwer zu erreichen sind, dann können weitere Sprunglinks sinnvoll sein.

Wenn mehr als ein Sprunglink bereitgestellt wird, dann ist es sinnvoll, alle Sprunglinks anzuzeigen, wenn einer der Sprunglinks den Fokus erhält. So wissen Tastaturnutzer, welche Bereiche sie anspringen können oder wie oft sie die Tab-Taste drücken müssen, bevor die Links wieder ausgeblendet werden.

Manchmal treten Inhaltsblöcke im Inhalt auf, die auf verschiedenen Webseiten wiederholt werden. In einem Glossar könnte das eine A-Z-Liste sein oder bei einer Suche die Paginierung. Generell müssen solche Inhaltsblöcke gut strukturiert sein (zum Beispiel eine Navigationsregion mit einer Linkliste), aber Sie können die Überspringbarkeit für die Tab-Taste ebenfalls berücksichtigen:

Anforderung der WCAG 2.2

Ein Sprunglink ist für die Barrierefreiheit von Webseiten nicht immer erforderlich. Das Erfolgskriterium 2.4.1 der Web Content Accessibility Guidelines (WCAG) 2.2 gibt lediglich vor, dass es eine Möglichkeit geben muss, Inhaltsblöcke zu umgehen. Der Mechanismus kann wie ein Sprunglink im Inhalt der Webseite bereitgestellt werden oder Sie verlassen sich darauf, dass der Mechanismus von der Plattform oder dem Benutzeragenten einschließlich Assistenztechnologien bereitgestellt wird. Gut strukturierte Webseiten erfüllen das Erfolgskriterium meist aucch ohne Sprunglink.

Auch wenn eine Webseite gut strukturierte Inhaltsblöcke vor dem Hauptinhalt aufweist kann ein Sprunglink zum Inhalt dennoch sinnvoll sein. Der Hauptgrund ist, dass die Arten der Navigation von verschiedenen Nutzergruppen eingesetzt werden. Während Assistenztechnologien wie Screenreader eigene Tastaturkürzel bereitstellen, um über die Strukturen der Webseite zu navigieren, können andere Nutzer die Tab-Taste nutzen wollen. Die Sprunglinks sollten dann für die Nutzung mit der Tab-Taste optimiert werden.

Checkliste für einen Sprunglink zum Inhalt

Zusammengefasst sollten folgende Aspekte für einen Sprunglink berücksichtigt werden:

  1. Ein Sprunglink am Anfang einer Webseite ist nur sinnvoll, wenn damit weitere aktive Elemente übersprungen werden. Bei umfangreichen oder unstrukturierten Inhaltsblöcken sind eventuell auch weitere Sprunglinks zweckmäßig.
  2. Der Sprunglink zum Hauptinhalt sollte das erste fokussierbare Element der Seite sein.
  3. Der Linktext sollte Auskunft über den Linkzweck geben. Beispiele sind "Hauptinhalt anspringen" oder "Navigationsbereiche überspringen". Generell ist die Beschreibung des Linkziels aufschlussreicher.
  4. Spätestens bei Fokus muss der Linktext des Sprunglinks sichtbar sein.