Dieser Beitrag zeigt dir, wie du auf deiner Website in deinem Block Theme einen Skip Link Test machen kannst.

Wer braucht Skip Links ?

Menschen mit motorischer Behinderung, die die Maus nicht gut steuern können, können besser mit der Tastatur navigieren. Damit man sich nicht durch X Menüs klicken muss, gibt es den Skip Link.

Das ist ein Text – Direkt zum Inhalt wechseln – der links oben auf der Webseite erscheint, wenn man die Tab Taste ( ist die mit zwei Pfeilen ) drückt.

Zum Inhalt wechseln:

Wenn die Seite neu geladen ist, drückt man die Tab Taste. Man sieht dann links oben im Eck der Webseite diesen Skip Link Button, drückt man auf der Tastatur die > Enter Taste. Dann springt man sofort zum Inhalt der Seite.

Wenn das so funktioniert, dann hat der Skip Link auf deiner Webseite funktioniert. Ich schreibe bewusst Webseite, weil du musst das jetzt für jede Seite deiner Website / Webauftrittes testen.

Wie weiter steuern ?

Wenn du dann die Enter Taste gedrückt hast, und du willst dann weiter, brauchst du nur wieder die Skip Link Taste drücken.

Es kann sein, dass du das < main > Element, nicht überall auf jeder Seite in einem Block Theme implementiert hast. Also alles kontrollieren.

Zusammenfassung:

Zum Inhalt springen

Webseite öffnen, die Tab Taste drücken. Dann > Enter und du bist beim Inhalt der Seite.

Mit Tastatur navigieren

Öffne die Website drücke die Tab Taste. Drücke die Tab Taste so oft, bist du bei dem Menü Link angekommen bist, den du öffnen möchtest. Dann drücke die Tab Taste erneut. Jetzt hast du einen gewünschten Menüpunkt geklickt und geöffnet.

Beispiel:

💡Startseite – drücke die Tab Taste.
💡Navigiere durch das Menü.
Bleibe mit dem Tab bei dem Menüpunkt stehen, den du öffnen möchtest. 💡Drück dort die Enter Taste. Du hast jetzt die Seite geöffnet.
💡 Drücke jetzt die Tab Taste erneut. Es kommt wieder der Skip Link Text links oben.
💡Klicke wieder auf Enter. Jetzt bist du direkt zum Inhalt gesprungen.

Links im Inhalt anklicken

Wie klicke ich nun Links an, welche direkt im Inhaltstext vorhanden sind ? mit der Tab Taste navigiere ich durch den Inhalt. Wenn ich auf einen Link komme, kann ich diesen mit der Enter Taste öffnen. Oder ich bleibe weiter auf der Tab Taste und übergehe den link.

Skip Link in Block Themes

Die Besonderheit in denn neuen WordPress Block Themes ist, dass der Skip Link an das < main > Element in dem Block Templates gebunden ist.

Deswegen braucht man nur die Theme Dateien kontrollieren, ob das auch überall der Fall ist.
Natürlich ist das bei allen Free Block Themes aus dem WordPress Theme Repository der Fall😉. Aber falls du mal selber ein Custom Block Theme erstellen möchtest…

Hier der Code von der page.html Datei :

<!-- wp:template-part {"slug":"header-seite"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->

<main class="wp-block-group"><!-- wp:post-content {"align":"full","layout":{"inherit":true}} /--></main>

<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

Und genau darauf sollte man dann in allen Template Dateien achten.

Fazit:

Skip Links in den modernen WordPress Block Themes sind standardmäßig implementiert. Aber trotzdem auch gut zu wissen, wie man so einen Skip Link selber verwenden kann.