Klávesové zkratky, po kterých web působí dospěle
Maličkosti dělají rozdíl mezi koníčkovou stránkou a opravdovým produktem. Jedna z největších: návštěvník zmáčkne ⌘ K a vyskočí hledání — žádné lovení lupy. Je to pár řádků kódu a agent ti to přidá. Tady je vzor a konvence, které stojí za dodržení.
Proč na zkratkách záleží
Klávesové zkratky říkají „tohle stavěl někdo, kdo ví, co dělá". Časté akce jsou díky nim okamžité pro zkušené uživatele, drží ruce mimo myš a — když je uděláš dobře — pomůžou i lidem, kteří myš použít nemůžou. Na tomhle webu otevře ⌘ K (nebo Ctrl K) command paletu Academy; / dělá totéž; Esc ji zavře. Vyzkoušej to hned a pak se vrať.
Konvence, které lidé už čekají
Nevymýšlej nové zkratky tam, kde existují běžné — drž se toho, co lidem už sedí v prstech:
| Zkratka | Co obvykle dělá |
|---|---|
| ⌘ K / Ctrl K | Otevři hledání / command paletu. De-facto standard (Slack, Linear, VS Code, GitHub). |
| / | Skoč na hledání — jen když návštěvník zrovna nepíše do pole. |
| Esc | Zavři otevřenou věc (modal, paletu, menu). |
| ? | Ukaž panel nápovědy „klávesové zkratky". |
| ↑ ↓ · Enter | Procházej výsledky a jeden vyber. |
Přesně tohle jsme udělali na tomhle webu
Command paleta samotné Academy je ten ukázkový příklad. Její pravidla stojí za okopírování:
- ⌘ K / Ctrl K ji vždy otevře — na Macu i na Windows/Linuxu, jeden handler pokryje obojí.
- / ji otevře taky — ale nikdy, když píšeš. Když je kurzor v inputu, textarea nebo jakémkoli editovatelném poli, / prostě napíše lomítko jako normálně. (Nic není otravnější než hledání, co ti unese klávesu, kterou jsi chtěl napsat.)
- ↑ / ↓ posouvají, Enter potvrdí, Esc zavře.
- Je to opravdový dialog. Panel je označen jako
role="dialog"saria-modal="true", fokus se do něj při otevření přesune a je uzamčen (Tab a Shift+Tab cyklí uvnitř) a při zavření se fokus vrátí, kde byl.
Přístupnost — čtyři pravidla, aby to bylo laskavé
- Neuzamkni klávesnici špatně. Modal má uzamknout Tab v sobě, dokud je otevřený — ale Esc tě z něj musí vždy dostat. Nikdy nikoho neuvězni bez východu.
- Respektuj pole. Jednoklávesová zkratka jako / nebo ? nesmí dělat nic, když člověk píše do pole — nejdřív zkontroluj zaměřený prvek.
- Ukaž nápovědy. Dej zkratku k jejímu tlačítku (slabé ⌘K v hledání) a nabídni panel nápovědy přes ?. Zkratka, kterou nikdo neobjeví, nikomu nepomůže.
- Oznam to čtečkám obrazovky. Použij opravdové role (
role="dialog",aria-modal,aria-label), aby asistivní technologie věděla, že se otevřel dialog.
Popros o to agenta
Tohle nepíšeš ručně. Popiš, co chceš, a nech agenta postavit to ověřeně — zkopíruj tohle:
Přidej mému webu vrstvu klávesových zkratek jako Flowsmith Academy:
- ⌘K / Ctrl+K otevře hledání / command paletu; "/" ji otevře taky, ale
JEN když uživatel nepíše do inputu/textarea/contenteditable.
- Šipky procházejí výsledky, Enter vybírá, Esc zavírá.
- Paleta je opravdový modal: role="dialog", aria-modal="true", fokus
přesunutý dovnitř a uzamčený (Tab/Shift+Tab cyklí), po zavření vrácený.
- Ukaž slabou nápovědu "⌘K" v hledání a panel "?" se seznamem zkratek.
- Respektuj prefers-reduced-motion. Žádné externí knihovny.