Tastaturnavigation
Schneller ans Ziel, ganz ohne Maus
Skip Links und Tastaturkürzel führen Tastatur- und Screenreader-Nutzer direkt zu Hauptinhalt, Navigation und Suche.
Ohne Sprungmöglichkeiten müssen Tastaturnutzer auf jeder Seite erst durch das gesamte Menü tabben. EZZE WCAG Pro ergänzt dein Theme um drei Skip Links und fünf Tastaturkürzel, prüft die Sprungziele auf deiner Startseite und ist in allen Plänen enthalten.
- Drei Skip Links, funktionieren ohne JavaScript
- Fünf Tastaturkürzel mit Konfliktschutz
- Zielprüfung gegen deine Startseite
Zwei Werkzeuge
Wiederkehrende Bereiche einfach überspringen
Logo, Menü und Seitenleiste wiederholen sich auf jeder Seite. Wer per Tastatur oder Screenreader unterwegs ist, braucht einen schnellen Weg daran vorbei.
Skip Links
Der erste Tab führt direkt zum Inhalt
Skip Links stehen direkt nach dem body-Tag und bleiben unsichtbar, bis jemand Tab drückt. Die Einstellungsseite zeigt jedes Sprungziel in einer eigenen Karte.
-
Drei Sprungziele, einzeln schaltbar
Hauptinhalt, Navigation und Suche sind nach der Installation aktiv. Für jedes Ziel legst du CSS-Selektor, Linktext und optional ein Titel-Attribut fest.
-
Zielprüfung gegen deine Startseite
Der Einrichtungsstatus unterscheidet ein eindeutiges Ziel, ein fehlendes Ziel und Selektoren, die mehrere Elemente treffen.
-
Skip-Link-Design mit Vorschau
Farben, Typografie, Abstände, Ecken, Rahmen und Schatten in einem Editor, rund um eine Vorschau des fokussierten Skip Links.
-
Hervorhebung und Scroll-Abstand
Das Sprungziel leuchtet kurz auf, wahlweise mit Fade oder Zoom. Der Scroll-Abstand, standardmäßig 50 px, hält es unter einem festen Header sichtbar.
Tastaturkürzel
Fünf Kürzel für die wichtigsten Bereiche
Unter Windows und Linux mit Alt + Umschalt, am Mac mit Control + Option. Jedes Kürzel lässt sich einzeln abschalten oder auf einen anderen Buchstaben legen.
- Alt+Umschalt+N Navigation
- Alt+Umschalt+H Hauptinhalt
- Alt+Umschalt+S Seitenanfang
- Alt+Umschalt+E Seitenende
- Alt+Umschalt+F Suche
WCAG
Vier Kriterien, die die Tastaturnavigation unterstützt
Skip Links und Tastaturkürzel schließen eine der häufigsten Lücken in WordPress-Themes. Fehlende Beschriftungen oder Kontraste findet der Barrierefreiheitstest.
Gut zu wissen
Fragen zur Tastaturnavigation?
Pläne, Sichtbarkeit, JavaScript, Mac, feste Header und die Tastaturhilfe.
1. Sind Skip Links und Tastaturkürzel im Free-Plan enthalten?
Ja. Beide gehören zu den Website-Optimierungen und sind in allen Plänen enthalten, auch im Free-Plan.
2. Warum sehe ich die Skip Links auf meiner Seite nicht?
Das ist richtig so. Skip Links sind versteckt und erscheinen erst, wenn sie mit der Tab-Taste fokussiert werden. Lade die Seite neu und drück einmal Tab.
3. Brauchen Skip Links und Tastaturkürzel JavaScript?
Skip Links nicht: Sie werden direkt nach dem body-Tag eingefügt und funktionieren mit HTML und CSS. Die Tastaturkürzel benötigen JavaScript.
4. Welche Tasten gelten am Mac?
Am Mac verwendest du Control + Option statt Alt + Umschalt, zum Beispiel Control + Option + H für den Hauptinhalt.
5. Mein fester Header verdeckt das Sprungziel. Was tun?
Stell den Scroll-Abstand mindestens so groß ein wie die Höhe deines festen Headers. Standardmäßig sind es 50 px, sowohl bei den Skip Links als auch bei den Tastaturkürzeln.
6. Woher wissen Besucher, welche Kürzel es gibt?
Aktiviere die Tastaturhilfe in den Einstellungen der Barrierefreiheits-Toolbar. Sie zeigt die aktiven Kürzel mit den Labels, die du festlegst.
Starte jetzt
Bereit für eine Website ohne Umwege?
Installiere EZZE WCAG Pro kostenlos, prüf deine Sprungziele und drück auf deiner Startseite einmal Tab.
Skip Links und Tastaturkürzel für WordPress
Ein Sprunglink zum Hauptinhalt gehört zu den Grundlagen barrierefreier Websites, fehlt aber in vielen WordPress-Themes. Die Tastaturnavigation von EZZE WCAG Pro ergänzt drei Skip Links für Hauptinhalt, Navigation und Suche sowie fünf Tastaturkürzel, die von jeder Stelle der Seite zu diesen Bereichen springen. Das unterstützt die WCAG-Kriterien 2.4.1 Blöcke umgehen, 2.1.1 Tastatur, 2.1.4 Zeichen-Tastenkürzel und 2.4.7 Fokus sichtbar.
Beide Werkzeuge prüfen ihre CSS-Selektoren gegen deine Startseite, damit kein Sprung ins Leere führt. Mit dem Skip-Link-Design passt du Farben, Schrift und Schatten an dein Theme an, ein Scroll-Abstand hält das Ziel unter festen Headern sichtbar.
Teil der Website-Optimierungen, in allen Plänen
Skip Links und Tastaturkürzel gehören zu den Website-Optimierungen und sind im Free-Plan enthalten. Zusammen mit den Focus Outlines sorgen sie dafür, dass Besucher jederzeit sehen, wo sie sind, und schnell dorthin kommen, wo sie hinwollen.