Čo je Navigácia klávesnicou?
Navigácia klávesnicou je schopnosť ovládať celú webstránku bez myši, iba pomocou klávesov Tab, Enter, Escape a šípok. Je nevyhnutná pre používateľov s motorickým postihnutím a používateľov screen readerov.
Definícia Navigácia klávesnicou
Čo je navigácia klávesnicou
Navigácia klávesnicou znamená, že používateľ môže pristupovať ku všetkým funkciám a obsahu webstránky výhradne pomocou klávesnice. Podľa WCAG kritéria 2.1.1 musí byť všetok obsah ovládateľný klávesnicou.
Kľúčové klávesy pre navigáciu sú Tab (presun na ďalší interaktívny prvok), Shift + Tab (návrat na predchádzajúci prvok), Enter (aktivácia odkazu/tlačidla), Escape (zatvorenie dialógu) a šípky (pohyb v rámci komponentov ako záložky alebo rozbaľovacie menu).
Kto potrebuje navigáciu klávesnicou
- Ľudia s motorickým postihnutím — nemôžu presne ovládať myš
- Nevidiaci používatelia — používajú screen reader spolu s klávesnicou
- Power users — preferujú klávesnicu pre rýchlejšiu prácu
- Dočasne zranení — zlomená ruka, operácia, RSI syndróm
Časté problémy
Medzi najčastejšie problémy patrí:
- Neviditeľný fokus — CSS
outline: nonebez náhrady vlastným štýlom - Klávesnicová pasca — používateľ sa nemôže dostať z určitého prvku (napr. embedded video)
- Nesprávne poradie — Tab poradie nezodpovedá vizuálnemu rozloženiu stránky
- Neprístupné vlastné komponenty —
<div onclick>namiesto<button>
Praktický príklad
Príklad: Testovanie navigácie e-shopu klávesnicou.
Používateľ začne na úvodnej stránke a stlačí Tab. Fokus sa presunie na logo, potom na položky navigácie, tlačidlo vyhľadávania a nákupný košík. Po stlačení Enter na kategórii „Elektronika" sa otvorí podstránka. Všetky produkty, filtre a tlačidlá „Pridať do košíka" sú dostupné cez Tab a Enter.
Problém: Ak je filter realizovaný cez vlastný <div> bez tabindex a role, klávesnicový používateľ nemôže filtrovať produkty.
Často kladené otázky
Čo je navigácia klávesnicou na webe?
Je to schopnosť ovládať celú webstránku bez myši — iba pomocou klávesov Tab, Enter, Escape a šípok. Je povinná podľa WCAG pre prístupnosť webu.
Ako otestovať navigáciu klávesnicou?
Odložte myš a skúste prechádzať webom iba klávesnicou. Použite Tab na presun medzi prvkami, Enter na aktiváciu a Escape na zatvorenie. Skontrolujte, či je fokus vždy viditeľný a či sa dostanete ku všetkým funkciám.
Čo je klávesnicová pasca?
Klávesnicová pasca nastane, keď sa používateľ klávesnicou nedokáže dostať z určitého prvku — napríklad z embedded videa alebo vlastného widgetu. WCAG 2.1.2 vyžaduje, aby sa používateľ mohol vždy vrátiť.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.