Tastenkürzel
Die vier Tasten, die das Theme belegt, wo jede davon gilt, und wo die Lesende davon erfährt.
Das Theme belegt vier Tasten. Diese Seite sagt, welche das sind, wann sie zuhören und wo eine Lesende, die diese Seite nie gelesen hat, davon erfährt — denn ein Kürzel, das niemand entdecken kann, ist ein Kürzel, das niemand hat.
Die Belegungen
| Tasten | Tut | Hört zu, solange |
|---|---|---|
| ⌘K · CtrlK | Öffnet die Suche und schließt sie wieder | Überall auf der Seite, auch auf einem fokussierten Link oder Button |
| ? | Öffnet die Übersicht der Kürzel | Der Inhalt der Seite selbst den Fokus hat |
| [ | Die vorherige Seite dieser Sektion | Der Inhalt der Seite selbst den Fokus hat |
| ] | Die nächste Seite dieser Sektion | Der Inhalt der Seite selbst den Fokus hat |
Der Modifikator folgt der Tastatur der Lesenden, nicht der der Autorin: ⌘ auf
einer von Apple, Ctrl überall sonst. Er wird aufgelöst, sobald ein Browser da
ist, der antworten kann — eine vorgerenderte Seite liefert also zunächst das
sicherere Ctrl und tauscht es bei der Ankunft.
[ und ] bleiben innerhalb der gelesenen Sektion. Die letzte Seite einer
Sektion bietet keine nächste in eine andere hinein — eine Sektion zu wechseln
ist Aufgabe der Sektionszeile, und eine Taste namens „nächste Seite“, die das
Thema verlässt, ist nicht dieselbe Taste.
Wo die Lesende es erfährt
Vier Stellen, und alle vier schöpfen aus derselben Definition. Keine von ihnen kann also dazu kommen, eine Taste anzukündigen, die die Ebene nicht mehr belegt:
- Der Suchbutton trägt sein eigenes Kürzel —
⌘KoderCtrl+K— in der Kappe rechts. - Die Links auf die vorherige und nächste Seite am Fuß einer Seite tragen
[und]. Das waren die Tasten, die nirgends erwähnt wurden: Eine Lesende musste die Übersicht öffnen, um zu erfahren, dass die beiden Links, die sie ohnehin ansah, Tasten haben. - Der Tastatur-Button neben der Suche öffnet die Übersicht mit dem Zeiger,
auf jeder Seite ab dem Breakpoint
lg; darunter blendet der Kopfbereich ihn aus, denn ein Touchscreen hat keine Tasten, die sich auflisten ließen. Er ist die Antwort auf den zirkulären Teil des Problems:?öffnet die Liste der Tasten, und man muss das wissen, um sie zu drücken. - Die Übersicht selbst listet jede aktive Belegung mit ihren Tasten, auf
?oder über diesen Button.
Wann eine Taste zurücktritt
Ein globales Ein-Zeichen-Kürzel löst auch unter einer Lesenden aus, die es nie gewollt hat. Die unmodifizierten Tasten sind deshalb bewacht, nicht bloß belegt. Nichts löst aus:
- sobald etwas Näheres die Taste bereits behandelt hat;
- während die Lesende tippt — ein Eingabefeld, eine Textarea, ein Select, ein editierbarer Bereich;
- irgendwo innerhalb eines Dialogs, Menüs, einer Listbox, Combobox, eines Grids oder Baums, die Tastendrücke selbst beantworten.
Die unmodifizierten Tasten treten einen Schritt weiter zurück: Sie lösen nur
aus, solange der Inhalt der Seite selbst den Fokus hat, nie auf einem Link,
Button oder Tab. ⌘/Ctrl+K ist die Ausnahme, weil kein Bedienelement dieses
Kürzel will.
Ein Fokusziel mit tabindex="-1" zählt absichtlich als Inhalt — dort parkt der
Fokus nach einer Navigation, und eine Lesende, die gerade auf einer Seite
angekommen ist, ist genau die, für die [ und ] da sind.
Die bloßen Tasten abschalten
shortcuts.singleCharacter: false löst ?, [ und ] und lässt ⌘/Ctrl+K
stehen. Schaltersteuerung, Sprachsteuerung und Diktat senden reihenweise bloße
Zeichen, und eine Seite, die darunter wegnavigiert, zeigt keinen Grund dafür;
das modifizierte Kürzel erzeugt keine Eingabemethode versehentlich.
? ist ein bloßes Zeichen wie die anderen. Eine Website, die das setzt, hat also
keine Taste mehr, die die Übersicht öffnet. Der Tastatur-Button im Kopfbereich
ist dann der einzige Weg hinein. Unterhalb von lg blendet der Kopfbereich ihn
aus — ein Touchscreen hat keine Tasten aufzulisten —, indem DuxtHeaderhidden lg:inline-flex übergibt; die Komponente selbst trägt keine
Responsive-Klasse. Entferne ihn aus einem überschriebenen Kopfbereich, und die
Übersicht ist nicht mehr erreichbar.
Die Richtlinie ist ein Boolean statt einer Tabelle von Belegungen, und das mit
Absicht: siehe
shortcuts in der Konfigurationsreferenz.
Alles davon überschreiben
Die Liste, die Wächter und das Zeichnen sind ein Modul —
useDuxtShortcuts(). Die
beiden Komponenten darum herum sind
DuxtShortcuts, die Übersicht,
und
DuxtShortcutsTrigger,
der Button, der sie öffnet. Beide gehören dir auf dem gewohnten Weg; siehe
Das Theme überschreiben.