Stellen Sie sicher, dass alle Skip Links ein fokussierbares Ziel haben

Casandra Visser

Autor

Yotam Flohr

Forscher

Ritvik Shrivastava

Experte

Juli 29, 2024

Betroffene Behinderungen: Blind Sehbehindert Hören Mobilität

Standards: WCAG 2.2 Level A

Eine HTML-Seite muss einen Link am Anfang, vor der Navigation, haben, der es Benutzern ermöglicht, die umfangreiche Navigation zu überspringen und direkt zum Hauptinhalt der Seite zu gelangen.

Warum es wichtig ist

Screenreader geben Inhalte sequenziell in der Reihenfolge wieder, in der sie in einer HTML-Datei erscheinen. Assistive Technologien fokussieren sich zuerst auf den Inhalt am oberen Rand der Seite, der oft umfangreich ist. Dies kann zeitaufwendig für Benutzer sein, die nur am Hauptinhalt interessiert sind. Das Einfügen eines „Skip Links“ in eine HTML-Seite hilft blinden Benutzern, Menschen mit Sehbehinderungen und Nutzern, die ausschließlich die Tastatur verwenden.

Behebung des Problems

Jeder Skip-Link muss ein fokussierbares Ziel haben, das es ermöglicht, die Navigation zu überspringen.

Platzieren Sie den Skip-Link direkt nach dem öffnenden <body>-Tag. Vermeiden Sie Techniken, die den Skip-Link für sehende Tastaturnutzer unzugänglich machen.

Gutes Codebeispiel

Verwenden Sie das folgende Markup, um einen „Skip Link“ hinzuzufügen:

Codebeispiel

<div id="skip">
<a href="#content">Zum Inhalt springen</a>
</div>

Kopieren

Achtung bei WebKit-basierten Browsern (Safari, Chrome):

Diese Browser haben einen bekannten Bug, der gleichseitige Links manchmal nicht korrekt funktionieren lässt. Eine JavaScript-Lösung kann hier als Workaround dienen.

Folgende CSS-Techniken sollten NICHT verwendet werden:

display: none; → Entfernt das Element vollständig aus dem Dokumentfluss, macht es für alle Nutzer unsichtbar.
visibility: hidden; → Macht das Element unsichtbar, aber es bleibt im Dokumentfluss und erhält keinen Fokus.
Dauerhaftes Verschieben des Links außerhalb des Bildschirms mit CSS ohne eine Möglichkeit, ihn sichtbar zu machen.

Das Ausblenden des „Skip Links“ mit CSS funktioniert für Screenreader-Benutzer, aber es entfernt den Zugriff auf den Link für sehende Benutzer, die vom „Skip Link“ profitieren. Das Setzen der Eigenschaften display: none; oder visibility: hidden; macht den Link für

Codebeispiel

#skip a {
display: block;
position: absolute;
left: -999px;
top: -999px;
}#skip a:focus {
left: 0;
top: 0;
padding: 3px;
background: #ffc;
border:1px solid #990000;
}

Kopieren

Möglicherweise möchten Sie auch weitere Sprunglinks hinzufügen, damit Benutzer sich wiederholende Inhalte überspringen können.