Web musí jít ovládat z klávesnice
Setkali jste se s tím, že jste u počítače nemohli použít myš? Možná jste měli zlomenou ruku, nebo se vám vybila baterka v bezdrátové myši. Museli jste se spoléhat jen na klávesnici – pohybovat se po stránce pomocí tabulátoru, vybírat položky šipkami a potvrzovat klávesou Enter nebo mezerníkem. Jak to vypadá na vašem oblíbeném webu? Funguje to vůbec?
Kritérium WCAG 2.1.1 říká, že každá funkce webu musí být dostupná jen pomocí klávesnice, bez nutnosti používat myš. Pomáhá to nejen lidem, kteří myš nemohou používat, ale i těm, kteří ji používat nechtějí – třeba proto, že píší na klávesnici a nechtějí sahat na myš.
Kdo to ocení?
- Nevidomí uživatelé (uživatelé asistivních technologií): Pohybují se po webu pomocí čtečky obrazovky. Pokud nejde ovládat klávesnicí, je to pro ně, jako by vůbec neexistoval.
- Uživatelé se slabým zrakem: Nemusí sledovat kurzor myši. Při velkém zvětšení obrazovky mají problém se trefit myší na vybraný prvek.
- Lidé s motorickými hendikepy: Například ti, kteří mají třes rukou, svalovou slabost nebo nemohou přesně ovládat myš. Často mají problém na prvek webu najet myší.
- Lidé s dočasným omezením: Ruka v sádře, v obvazu nebo třeba bolest v zápěstí, může zkomplikovat použití myši. Klávesnice těmto uživatelům výrazně usnadní ovládání počítače.
- Běžní uživatelé: Momentálně nemají myš (došly baterky, zapomenutá myš doma). V některých případech, například při práci s formuláři, je ovládání stránky pomocí klávesnice výrazně rychlejší a i běžným uživatelům usnadňuje práci.
- Profesionálové a hráči – Programátoři často preferují klávesnici, je pro ně rychlejší než myš. Podobně hráči znají zkratky na klávesnici, které zlepšují jejich efektivitu.
Poznámka: Toto kritérium neznamená, že myš nesmíte používat. Důležité je to, aby bylo možné web plně ovládat i bez ní.
Jak to má správně fungovat?
Web musí být plně ovladatelný pouze pomocí klávesnice. To znamená:
- Navigace pomocí Tabelátoru (Tab a Shift+Tab) – na webu se uživatel dostane do všech úrovní menu, na všechny odkazy a tlačítka. Prostě musí mít možnost pohybovat se mezi všemi prvky na stránce pomocí tabulátoru.
- Šipky a Enter pro ovládání – Například seznamy, tlačítka a nabídky musí reagovat na klávesy, jako jsou šipky, Enter nebo Mezerník.
- Procházení formulářů – Uživatel musí být schopen procházet všechna pole formuláře (Tab a Shift+Tab) a vyplňovat je bez použití myši – editační políčka, zaškrtávací seznamy, přepínače. Rozbalovací nabídky by měly fungovat se šipkami, tlačítka by měla reagovat na Enter nebo Mezerník.
- Žádné pasti – Uživatel se nesmí „zaseknout“ v nějakém prvku, ze kterého se nemůže dostat zpět klávesnicí (například v kalendáři).
- Použitelnost bez časových omezení: Uživatel by měl mít neomezený čas na provedení všech akcí.
Důležité techniky pro vývojáře:
- Používejte standardní HTML prvky – Například tlačítka
<button>a odkazy<a>jsou z klávesnice automaticky ovladatelné. - Nechte viditelný fokus – Uživatel musí vidět, kde se právě nachází. Aktivní prvek by měl být dostatečně viditelně odlišený (např. mít rámeček).
- Nepoužívejte pouze „hover“ efekty – Pokud se něco objeví jen po najetí myší, klávesnicí to nebude dostupné.
- Správně nastavujte tabindex – Nenechávejte důležité prvky mimo dosah tabulátoru (tabindex=“-1″ je často problém).
- Web procházejte postupně – Průchod webem pomocí Tabelátoru musí být ve stejném pořadí, ve kterém se zobrazují na obrazovce. Tedy web procházíte zleva doprava a shora dolů.
- Role a vlastnosti ARIA: Použití ARIA rolí a vlastností k označení prvků, které by měly být přístupné klávesnicí.
Praktické příklady
Formuláře
Při vyplňování online formuláře se uživatel může přesouvat mezi poli pomocí klávesy TAB (SHIFT+TAB pro krok zpět) a odeslat formulář pomocí klávesy ENTER. Pořadí kroků je smysluplné a odpovídá tomu, jak jsou pole zobrazena na obrazovce.
Navigační menu
V menu se může uživatel pohybovat pomocí klávesnice, tedy procházet položky menu klávesou TAB a vybírat je pomocí klávesy ENTER. Dostane se do všech úrovní menu.
Mediální přehrávače
Přehrávání, pauza a další ovládací prvky by měly být přístupné klávesami, například mezerníkem pro přehrávání a pauzu.
Výjimky
Výjimku tvoří funkce, které závisí na způsobu a průběhu pohybu při zadávání.
Některé funkce a situace mohou být z kritéria vyloučeny:
- Neinteraktivní obsah: Obsah, který není určen k interakci, jako jsou čistě informativní texty nebo obrázky, nemusí být přístupný klávesnicí.
- Specifické úkoly: Funkce, které vyžadují specifické interakce, například kreslení nebo hry, kde je potřeba myš nebo jiné vstupní zařízení.
- Bezpečnostní důvody: Situace, kde je vyžadována fyzická akce, například snímání otisku prstu pro autentizaci.
Příklad: Výjimka – program malování
Program malování projde jako výjimka, protože tahy štětcem se liší v závislosti na rychlosti a délce pohybu.
Příklad: Výjimka – závodní hra
Hra simulující automobilové závody obstojí jako výjimka, protože její ovládání je založeno na akcích v reálném čase s využitím vstupního rozhraní jako je herní volat a pedály.