Jak otestovat e-shop pomocí klávesnice
K základní kontrole ovládání klávesnicí nepotřebujete vývojářské nástroje. Odložte myš a zkuste dokončit důležitou cestu pouze klávesnicí. Takové ovládání využívají například lidé s omezenou motorikou, nevidomí uživatelé společně s odečítačem obrazovky i lidé, kterým myš dočasně nevyhovuje.
Běžný problém: zaměření se ztratí nebo uvázne
Vizuálně funkční formulář může být bez myši nepoužitelný. Zaměření přeskočí důležité tlačítko, není viditelné, zůstane pod modálním oknem nebo okno nelze bez myši zavřít. Jednoduchý manuální průchod pomůže tyto chyby odhalit.
Jak postupovat
Otevřete domovskou stránku, dejte ruce pryč od myši a použijte tyto klávesy:
- Tab posouvá zaměření na další ovládací prvek, Shift + Tab zpět
- Enter aktivuje odkaz nebo tlačítko, mezerník zaškrtne políčko
- šipky přepínají mezi možnostmi v rozbalovacím seznamu nebo ve skupině přepínačů
- Escape se běžně používá k zavření modálního okna, pokud je tak navrženo
Nyní se pokuste dokončit nákup. Najít produkt, vložit ho do košíku, přejít do košíku, vyplnit dodací údaje, vybrat dopravu a platbu a dostat se až k odeslání objednávky. Nic víc.
Co cestou sledovat
Vidíte, kde jste? Prvek, na kterém právě stojíte, musí být zřetelně označen – rámečkem, obrysem nebo jiným zvýrazněním. Pokud mačkáte Tab a na obrazovce se nic nemění, zaměření může být neviditelné. Častou příčinou je odstraněný výchozí obrys bez odpovídající náhrady.
Postupuje zaměření v logickém pořadí? Mělo by odpovídat významu a vizuálnímu uspořádání obsahu. Pokud náhle přeskočí z hlavičky do patičky a zpět doprostřed stránky, pořadí v kódu pravděpodobně neodpovídá očekávanému postupu.
Dostanete se rychle k obsahu? Běžným řešením je odkaz „Přeskočit na obsah“, který se zobrazí po prvním stisknutí klávesy Tab. WCAG připouští i jiné mechanismy pro přeskočení opakovaných bloků; důležité je, aby uživatel nemusel při každém načtení znovu procházet celé menu.
Neuvězní vás modální okno? Otevřete skutečně modální dialog, například přihlášení, výběr velikosti nebo potvrzení vložení do košíku. Zaměření se má přesunout dovnitř a zůstat v něm, dokud je okno otevřené. Dialog musí mít způsob zavření dostupný z klávesnice; klávesa Escape je běžná možnost. Problém nastává, pokud lze zaměřit obsah „za“ oknem nebo pokud dialog nelze bez myši zavřít.
Fungují vlastní ovládací prvky? Nejčastěji selhávají ty, které vývojář vytvořil sám místo standardních HTML prvků: hvězdičkové hodnocení, přepínač množství, vlastní výběr dopravy. Na ně často ani nelze přesunout zaměření.
Projdete s košíkem až do konce? Pokud se někde zastavíte a bez myši nelze pokračovat, našli jste bariéru, která může bránit dokončení nákupu.
Co tímto testem neodhalíte
Tento test je cenný, ale ukáže jen jednu vrstvu. Neřekne vám, co slyší nevidomý zákazník: zda odečítač obrazovky přečte u pole jeho popisek, zda oznámí chybu ve formuláři, nebo jen mlčí, zatímco se vizuálně zobrazí červený rámeček. Neověří smysluplnost alternativních textů, kontrast ani pořadí, ve kterém se obsah skutečně čte.
Část scénářů ovládaných klávesnicí a pastí zaměření lze ověřovat automatizovanými funkčními testy. Výsledek je však třeba doplnit manuálním průchodem, protože samotný skener neposoudí celou použitelnost ani zkušenost s odečítačem obrazovky. Více vysvětluje téma co skener zachytí a co ne.
Co vám tento test přinese
Získáte konkrétní místo, kde se cesta bez myši zastaví, a reprodukovatelný postup pro vývojáře. Není to úplný audit, ale praktický první filtr před hlubším testováním.
Další krok
Pokud jste se při procházení klávesou Tab zasekli, zapište si stránku, krok a očekávané chování. Na nezávazné konzultaci můžeme určit, co ověřit manuálně a co se vyplatí sledovat automatizovaným testem.