Was ist eigentlich dieser “Skip to content”-Link?

In den WordPress-Standard-Themes der Twenty-Reihe (und in vielen anderen standardkonformen Themes) sitzt in der header.php kurz nach dem body-tag ein Link der mit Skip-To-Content bezeichnet ist.

<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

Diesen Link sieht man normalerweise nicht. Er wird erst sichtbar und aktiv, wenn jemand die Tastatur (Tab-Taste) nutzt um durch die Seite zu navigieren.

Möglich wird das durch die Eigenschaft :focus im CSS. Normalerweise ist der Skip to Content Link nicht sichtbar. Hier die Anweisung im CSS, die den Link ausblendet:

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

Sobald man die Tastatur zum Navigieren einsetzt und auf die Tab-Taste drückt, erscheint der Link ganz oben links. Probiert es mal aus, den Skip-Link gibt es auch hier auf dieser Seite.

Die Pseudo-Klasse :focus macht’s möglich. Sie wird aktiv, sobald der Tabulator den Link erreicht.

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    color: #21759b;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
}

Und wozu braucht es diesen Link jetzt?

Die Navigierbarkeit einer Website per Tastatur ist ein wichtiges Kriterium für ihre Barrierefreiheit. Mit der Tastatur bewegen sich nicht nur Screenreader über die Seite. Auch Menschen nutzen die Tab-Taste zum Navigieren. Weil sie Arthritis in den Händen haben, weil sie keine Arme haben oder weil sie den rechten Arm seit zwei Wochen im Gips tragen.

Ganz praktisch funktioniert das so: Angenommen, ich habe das Excerpt eines Artikels gelesen und möchte jetzt die ganze Version lesen. Ich steuere mit der Tastatur den Read-More-Link an, der Browser öffnet die Seite mit der Einzelansicht des Artikel.

Gäbe es nun den Skip-to-Content-Link nicht, müsste ich mich in der Einzelansicht erst mal durch den gesamten Header-Bereich durchklicken. Ich müsste alle Elemente – Logo, Seitentitel, Navigation, Suchfeld – der Reihe nach anklicken bevor ich endlich beim Artikel landen würde. Die Tab-Taste arbeitet sich nämlich stur von links oben nach rechts unten durch den Code. Gibt es keine Abkürzung, dann kann das ganz schön dauern. Ist dagegen ein Skip-Link vorhanden, kann ich sofort an die Stelle springen, die mich interessiert.
Aus diesem Grund sollte jede Webseite einen Skip-Link zur Verfügung stellen.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.