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>Code-Sprache: HTML, XML (xml)

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;
}Code-Sprache: CSS (css)

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;
}Code-Sprache: CSS (css)

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.