Tastaturkürzel ermöglichen es Besuchern, schnell zu wichtigen Bereichen der Seite zu springen, ohne die Maus verwenden zu müssen.
Was sind Tastaturkürzel?
Tastaturkürzel (Access Keys) sind Tastenkombinationen, die es Benutzern ermöglichen, direkt zu bestimmten Elementen auf der Seite zu springen. Sie sind besonders wichtig für Menschen, die ausschließlich die Tastatur zur Navigation verwenden.
Standardwerte bei Neuinstallation
Hauptschalter und alle fünf Standard-Kürzel sind aktiviert. Hervorhebung nach Sprung ist an (Effekt: keine Animation).
Sinn und Einsatzmöglichkeiten
- Für Tastaturnutzer: Schneller Zugriff auf wichtige Bereiche ohne mühsames Tabben
- Für Screenreader-Nutzer: Direkter Sprung zu Navigation, Hauptinhalt oder Suche
- Für alle Besucher: Effiziente Navigation, besonders auf langen Seiten
- WCAG-Konformität: Erfüllt WCAG 2.4.1 (Bypass Blocks) und 2.1.4 (Character Key Shortcuts)
Relevante WCAG-Kriterien:
- 2.1.1 Tastatur: Die Funktion ist eine reine Tastaturfunktion.
- 2.1.4 Zeichen-Tastenkürzel: Bietet einen Mechanismus, um die Shortcuts zu (de)aktivieren.
- 2.4.1 Blöcke umgehen: Ein Shortcut zum Hauptinhalt erfüllt diese Anforderung.
- 2.4.7 Fokus sichtbar: Die Highlight-Funktion macht den Fokus nach dem Sprung deutlich.
Standard-Kürzel
Das Plugin bietet fünf vorkonfigurierte Kürzel:
- Alt + Shift + N: Sprung zur Navigation
- Alt + Shift + H: Sprung zum Hauptinhalt
- Alt + Shift + S: Sprung zum Seitenanfang
- Alt + Shift + E: Sprung zum Seitenende
- Alt + Shift + F: Sprung zur Suche
Hinweis: Auf Mac-Systemen verwende Control + Option statt Alt + Shift.
Konfigurationsmöglichkeiten
Die Einstellungsseite führt dich jetzt schrittweise durch die Konfiguration. Jede Sprungziel-Karte zeigt zunächst nur Status, Tastenkombination und eine kurze Erklärung. Über Konfigurieren öffnest du die technischen Felder für Taste, CSS-Selektor und Toolbar-Label.
- Einrichtungsstatus: zeigt kompakt, welche der fünf Tastaturkürzel aktiv sind.
- Alle Ziele prüfen: prüft die aktiven CSS-Selektoren gegen die Homepage und kennzeichnet nicht gefundene oder ungültige Ziele.
- Kontexthilfe: erklärt direkt an einem Feld, was ein Sprungziel ist. Die zentrale Hilfe öffnet sich am Desktop als Seitenpanel und mobil als Bottom-Sheet.
- Erweiterte Einstellungen: bündelt Hervorhebung, Animation und Scroll-Offset, damit die grundlegende Einrichtung übersichtlich bleibt.
- Konfliktschutz: aktive Tastaturkürzel müssen unterschiedliche Buchstaben verwenden.
Kürzel aktivieren/deaktivieren:
- Jedes Kürzel kann einzeln aktiviert oder deaktiviert werden
- Die Hauptfunktion kann global ein- oder ausgeschaltet werden
Kürzel anpassen:
- Tastensequenz: Ändere den Buchstaben (z.B. von N zu M)
- Ziel-Selektor: CSS-Selektor des Zielelements (z.B. #main-menu, .search-form)
- Toolbar-Label: Text, den die Detailansicht Tastaturhilfe der Toolbar für dieses Kürzel anzeigt
Die Tastaturhilfe zeigt nur tatsächlich aktivierte Kürzel. Sie erstellt keine zusätzlichen globalen Buchstaben-Shortcuts.
Hervorhebungseffekte:
- Hervorhebung aktivieren: Zeigt das Zielelement kurz farbig hervor
- Hervorhebungsfarbe: RGBA-Farbe für die Hervorhebung (z.B. rgba(0, 115, 170, 0.3))
- Hervorhebungseffekt: Keine, Fade, Zoom oder Fade & Zoom
- Scroll-Offset: Abstand vom oberen Rand beim Sprung (in Pixel, Standard: 50px)
Anwendungsbeispiele
Beispiel 1: Standard-Konfiguration
Aktiviere alle fünf Standard-Kürzel mit den Standard-Zielen. Verwende eine dezente Hervorhebung ohne Animation und einen Scroll-Offset von 50px für feste Header.
Beispiel 2: Custom Navigation
Wenn deine Navigation einen anderen Selektor hat (z.B. #site-navigation), passe den Ziel-Selektor für das N-Kürzel entsprechend an.
Beispiel 3: Zusätzliche Kürzel
Du kannst die Standard-Kürzel anpassen oder neue hinzufügen, indem du die Einstellungen im Code erweiterst. Beachte dabei, dass nicht alle Tasten verfügbar sind (Browser-Reservierungen).
Tipps
- Verwende aussagekräftige Buchstaben (N für Navigation, H für Hauptinhalt, etc.)
- Teste die Kürzel in verschiedenen Browsern, da die Tastenkombinationen unterschiedlich sein können
- Stelle sicher, dass die Ziel-Selektoren korrekt sind (nutze die Browser-Entwicklertools zum Testen)
- Der Scroll-Offset sollte mindestens so groß sein wie die Höhe deines festen Headers
- Aktiviere Tastaturhilfe in den Toolbar-Einstellungen, damit Besucher die verfügbaren Kürzel dort nachlesen können
- Vermeide Konflikte mit Browser-Kürzeln (z.B. Alt+F öffnet normalerweise das Datei-Menü)
Technische Details
- Die Kürzel werden mit JavaScript implementiert und funktionieren nur, wenn JavaScript aktiviert ist
- Die Hervorhebung wird automatisch nach einigen Sekunden entfernt
- Für Scroll-Aktionen (scrollToTop, scrollToBottom) wird kein Selektor benötigt
Verfügbar für: Alle Pläne Free