Používajte natívne ovládacie prvky, zachovajte logické DOM poradie, ponechajte silný viditeľný focus a pri otvorení či zatvorení vrstvy ho presúvajte predvídateľne.
Web ovládaný klávesnicou potrebujú ľudia, ktorí nepoužívajú myš, pracujú s čítačkou obrazovky, hlasovým vstupom alebo si jednoducho zvolili rýchlejší spôsob. Funkcia nie je dostupná len preto, že sa na prvky dá tabulátorom dostať. Poradie, viditeľný focus a správanie dynamických komponentov musia zodpovedať tomu, čo človek vidí a očakáva.
Najčastejšie problémy vznikajú pri vlastných tlačidlách, presúvaní prvkov cez CSS, modálnych oknách a skriptoch, ktoré focus odstránia alebo uväznia. Riešením je začať natívnym HTML, definovať model klávesnice pre každý komponent a testovať celú úlohu. ARIA môže význam doplniť, ale nevytvorí chýbajúce správanie.
Natívny prvok poskytuje očakávané správanie bez skratiek
Odkaz používajte na navigáciu a tlačidlo na akciu. Oba prvky sú fokusovateľné, majú rolu a reagujú na očakávané klávesy. Klikateľný div tieto vlastnosti nemá a ručné dopĺňanie tabindexu nevyrieši celé správanie. Vlastný komponent potrebuje názov, rolu, stav, hodnotu a obsluhu klávesnice podľa vhodného vzoru.
Nepridávajte pozitívne hodnoty tabindexu, ktoré vytvoria samostatné umelé poradie. Bežný prvok nech nasleduje DOM a programovo fokusovateľný kontajner môže podľa potreby použiť zápornú hodnotu. Zakázaný prvok a prvok dočasne nedostupný potrebujú zrozumiteľné vysvetlenie, nie iba odstránenie zo sekvencie bez kontextu.
Poradie focusu má sledovať význam a vizuálny tok
Usporiadajte DOM podľa prirodzeného čítania a ovládania. Vizuálne presunutie cez grid alebo flex nesmie vytvoriť rozpor, pri ktorom focus skáče po obrazovke. Opakované bloky môžu mať preskočovací odkaz na hlavný obsah. Po jeho aktivácii musí byť cieľ správne označený a focus alebo pozícia zrozumiteľne zmenené.
Skryté menu, neaktívny carousel panel a zatvorený dialóg nesmú obsahovať prvky v tab sekvencii. Naopak, vizuálne dostupný ovládací prvok nemá byť nedosiahnuteľný. Pri pridávaní obsahu zachovajte pozíciu používateľa, pokiaľ úloha nevyžaduje presun na novú správu alebo začiatok kroku.
- DOM poradie zodpovedá čítaniu stránky
- žiadne kladné hodnoty tabindexu
- skryté prvky nie sú fokusovateľné
- preskočovací odkaz funguje aj vizuálne
Viditeľný focus musí byť jasný v každom stave a téme
Neodstraňujte predvolený outline bez rovnocennej alebo lepšej náhrady. Indikátor má byť viditeľný na svetlom, tmavom aj farebnom pozadí a nesmie ho zakryť sticky hlavička. Farba sama môže zlyhať; kombinujte kontrast, obrys, hrúbku alebo odsadenie podľa aktuálnych kritérií prístupnosti.
Rozlišujte focus, hover, active, selected a error. Používateľ klávesnice potrebuje vedieť, ktorý prvok práve ovláda, nie iba ktorý je zvolený. Štýl testujte na všetkých komponentoch dizajnového systému vrátane odkazov v texte, ikonových tlačidiel, formulárov, tabov a prvkov v prekryvnej vrstve.
Modály a dynamické zmeny potrebujú riadený presun focusu
Po otvorení modálneho dialógu presuňte focus na jeho nadpis, úvod alebo prvý vhodný ovládací prvok podľa úlohy. Focus má zostať v dialógu, kým je modalita aktívna, a Escape ju má zavrieť, ak neexistuje vážny dôvod inak. Pozadie nesmie byť ovládateľné ani oznamované ako súčasť dialógu.
Po zatvorení vráťte focus na prvok, ktorý dialóg otvoril, alebo na logickú náhradu, ak bol odstránený. Pri klientskom routingu oznámte nový nadpis a umiestnite focus podľa konzistentného modelu. Toast alebo živá správa nemajú bez dôvodu ukradnúť focus; stačí ich vhodne oznámiť.
- focus po otvorení na zrozumiteľnom mieste
- žiadny únik do neaktívneho pozadia
- Escape a viditeľné tlačidlo zatvorenia
- návrat na pôvodný alebo logický prvok
- kontrola poradia vpred aj naspäť
- žiadny focus pod pevnou hlavičkou
- natívne klávesy podľa typu komponentu
- regresný test po dynamickej zmene DOM
Manuálny test prechádza celou úlohou v oboch smeroch
Odložte myš a pomocou Tab, Shift+Tab, Enter, Space, šípok a Escape prejdite navigáciu, formulár, dialóg, carousel aj vlastné widgety. Správne klávesy závisia od typu komponentu. Kontrolujte, či sa na každý prvok dostanete, rozumiete jeho stavu, aktivujete ho a bezpečne ho opustíte.
Test zopakujte so zväčšením, čítačkou obrazovky a na viacerých prehliadačoch. Automatický nástroj môže nájsť chýbajúci názov alebo pozitívny tabindex, no neodhalí nelogický presun a pascu v komplexnej úlohe. Regresný test pridajte k dizajnovému systému aj kritickým používateľským cestám.
Časté otázky
Môžeme odstrániť outline, ak sa dizajnovo nehodí?
Iba ak ho nahradíte jasným, konzistentným a dostatočne viditeľným indikátorom focusu vo všetkých témach a stavoch. Bez náhrady ho neodstraňujte.
Má byť každý textový prvok fokusovateľný?
Nie. Do tab sekvencie patria interaktívne prvky a špecifické programové ciele. Bežný text čítačka obrazovky sprístupní bez tabindexu.
Stačí pridať role a tabindex ku klikateľnému divu?
Nie. Museli by ste doplniť aj klávesy, stavy a ďalšie správanie. Natívne tlačidlo alebo odkaz je zvyčajne spoľahlivejší základ.
Zdroje a ďalšie čítanie
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
