WCAG 2.1.1 Klávesnice

Kritérium úspěšnosti 2.1.1 zajišťuje, že lidé mohou web používat bez myši: nevidomí návštěvníci se čtečkou obrazovky, lidé s třesem nebo omezenou pohyblivostí rukou, lidé používající spínače nebo hlasové ovládání, které napodobují klávesnici, i zkušení uživatelé, kteří klávesnici prostě dávají přednost. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.2.1.1), o kterou se opírá Evropský akt o přístupnosti. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Všechny funkce obsahu musí být ovladatelné přes rozhraní klávesnice a nesmí záviset na konkrétním časování jednotlivých stisků kláves (například „stiskněte dvakrát rychle za sebou“).

Jedinou výjimkou je, když samotná funkce vyžaduje vstup, který závisí na dráze pohybu uživatele, nejen na koncových bodech — například kreslení od ruky. Výjimka se týká funkce, ne techniky vstupu: zadávání textu ručním písmem dráhu používá, ale samotné zadání textu ne, takže musí fungovat i z klávesnice.

Nabízet navíc ovládání myší, dotykem nebo jinými způsoby je v pořádku a doporučuje se.

Typické chyby v e-shopu

• mega menu nebo rozbalovací seznam kategorií, který se otevře jen najetím myší;
• galerie obrázků produktu, vzorníky barev nebo výběr velikosti sestavené z elementů div s obsluhou kliknutí a bez podpory klávesnice;
• posuvníky cenového rozsahu a ovladače množství, kterými nelze pohnout šipkami;
• „rychlý náhled“ nebo mini košík, který se otevře kliknutím, ale z klávesnice ho nelze otevřít ani zavřít;
• cookie lišta nebo chatovací widget, jejichž tlačítka nejsou dosažitelná klávesou Tab;
• posouvatelná oblast (tabulka velikostí, seznam recenzí), která nemůže získat fokus, takže ji uživatelé klávesnice nemohou posouvat.

Jak to zkontrolovat

Automaticky: náš nástroj označí několik vzorců souvisejících s klávesnicí: posouvatelné oblasti, které nemohou získat fokus, iframy s interaktivním obsahem vyřazeným z pořadí tabulátoru a obrázkové mapy na straně serveru (pravidla v naší knihovně pravidel). Neumí určit, zda každá funkce funguje z klávesnice, proto je hlavní test ruční.

Ručně: odložte myš a projděte skutečný nákup. K pohybu použijte Tab a Shift+Tab, Enter k otevření odkazů a stisku tlačítek, mezerník pro tlačítka a zaškrtávací políčka, šipky uvnitř menu, posuvníků a skupin přepínačů a Esc k zavření dialogů. Otevřete menu, vyfiltrujte kategorii, vyberte variantu, přidejte do košíku, uplatněte kupón a dostaňte se ke kroku platby. Každá akce, kterou zvládnete myší, musí jít provést i takto.

Jak to opravit

• Používejte nativní prvky HTML — <button>, <a href>, <input>, <select> — ty jsou z klávesnice ovladatelné automaticky.
• Pokud musíte vytvořit vlastní widget, dejte mu tabindex="0", roli ARIA a obsluhu kláves podle vzoru WAI-ARIA Authoring Practices pro daný widget.
• Menu otevíraná najetím myší otevírejte i při fokusu nebo klávesou Enter a nechte je otevřená, dokud je fokus uvnitř.
• Zkontrolujte aplikace a pluginy šablony (recenze, chat, seznamy přání) — mnoho problémů s klávesnicí pochází z widgetů třetích stran.

Související kritéria

• 2.1.2 Žádná past pro klávesnici — fokus klávesnice musí vždy umět komponentu opustit.
• 2.4.3 Pořadí fokusu — pořadí zastávek klávesy Tab musí dávat smysl.
• 2.4.7 Viditelný fokus — uživatelé musí vidět, kde je fokus klávesnice.

Časté otázky

Co vyžaduje WCAG 2.1.1 Klávesnice?

Každá funkce obsahu musí fungovat přes rozhraní klávesnice, aniž by vyžadovala konkrétní časování jednotlivých stisků kláves. Ovládání myší a dotykem lze nabídnout také, ale ne místo klávesnice.

Existuje z požadavku na klávesnici nějaká výjimka?

Jen u funkcí, kde samotný úkol závisí na dráze pohybu, nejen na počátečním a koncovém bodě, například kreslení od ruky nebo podpis. Psaní textu ručním písmem se nepočítá, protože samotné zadání textu dráhu nepotřebuje.

Dokáže přístupnost klávesnice otestovat automatický nástroj?

Jen částečně. Nástroj najde některé vzorce, například posouvatelné oblasti, které nemohou získat fokus. Zda každé menu, filtr a krok pokladny skutečně funguje s klávesami Tab, Enter, mezerník a šipkami, je nutné vyzkoušet ručně.