Ovládání webu klávesnicí: menu, hledání a návrat do článku

Mobilní nabídku lze otevřít myší, ale po stisku Tab se kurzor ztratí za překryvnou vrstvou. Čtenář bez myši už neví, kde je. Ovládání klávesnicí musí umožnit dokončit stejný úkol, nejen aktivovat první tlačítko. Provozovatel magazínu může základní chyby hledat bez zásahu do kódu a vývojáři předat přesný scénář.

Návod se zaměřuje na nabídky, odkazy, hledání a překryvná okna. Není úplným auditem přístupnosti a nepopisuje test konkrétní šablony. Způsob ovládání některých složitých prvků se může lišit; důležité je odpovídající chování a srozumitelná informace pro uživatele.

Začněte na běžné veřejné stránce

Otevřete článek bez přihlášení a odložte myš. Klávesa Tab obvykle přechází mezi aktivními prvky, Shift+Tab opačným směrem. Odkaz se standardně aktivuje Enterem, běžné tlačítko také mezerníkem. Při zkoušení sledujte, zda lze poznat aktuálně aktivní prvek, tedy fokus.

Fokus není ukazatel myši ani místo v rozečteném odstavci. Je to prvek, který právě přijímá klávesové ovládání. Vizuálně jej může označovat rámeček nebo jiný jasný styl. Pokud se po každém stisku musíte domýšlet, kam se přesunul, uložte konkrétní místo a pokračujte v diagnostice.

Do zápisu přidejte prohlížeč, systém, velikost okna a výchozí stav nabídky. Některé prostředí vyžaduje vlastní nastavení klávesové navigace; ověřte je před prohlášením webu za nefunkční. Přesný počet stisků pomůže nález zopakovat, ale není sám o sobě měřítkem kvality.

Sledujte cestu od záhlaví k článku

Nejprve zkuste najít hlavní obsah, otevřít související článek a vrátit se. Zkontrolujte také možnost přeskočení opakovaného záhlaví, pokud ji web nabízí. Smyslem je dostat se k textu bez procházení všech opakovaných odkazů při každé nové stránce.

  • Aktivní odkaz nebo tlačítko musí být viditelné a rozpoznatelné.
  • Pořadí má dávat smysl vzhledem k uspořádání a funkci stránky.
  • Prvek nesmí zůstat zakrytý lištou, pokud jej člověk potřebuje použít.
  • Ovládání musí jít opustit běžným způsobem, bez trvalého uvěznění.
  • Nově zobrazený obsah má mít pochopitelnou návaznost na ovládací prvek.

Při hledání příčiny rozlišujte chybějící zvýraznění a skutečně nedostupný prvek. Mohou vypadat podobně, ale vyžadují jinou opravu. Obecný výchozí vzorek můžete připravit podle vstupní kontroly přístupnosti magazínu.

Nabídku vyzkoušejte otevřenou i zavřenou

Podnabídka dostupná pouze po najetí myší vylučuje jiné způsoby ovládání. U rozbalovací navigace ověřte, co ji otevře, jak se vstupuje do jejích odkazů a jak se zavře. Pokud hlavní položka současně někam vede a rozbaluje podnabídku, musí být tyto úkoly pro člověka rozlišitelné.

Vývojář může použít samostatné tlačítko pro rozbalení vedle odkazu. Není však vhodné předepsat jedinou implementaci bez znalosti návrhu. Do zadání raději napište požadované akce a doložený problém. Informace o rozbaleném stavu musí odpovídat tomu, co se skutečně zobrazuje; technický atribut s nesprávnou hodnotou nepomůže.

Situace Co ověřit Typický problém
Zavřená navigace Dosažení ovládacího tlačítka Tlačítko reaguje jen na myš
Otevřená podnabídka Vstup do odkazů a pokračování Fokus skáče za skrytý obsah
Návrat Srozumitelné zavření a poloha fokusu Uživatel se ocitne na začátku stránky
Změna šířky Použitelnost nového typu menu Mobilní varianta nemá stejné funkce

U dialogu kontrolujte celý cyklus

Vyhledávací překryv nebo jiné skutečně modální okno má vlastní začátek a konec. Zkuste jej otevřít, najít ovládání, zavřít a pokračovat tam, odkud jste přišli. U modálního dialogu je důležité, aby fokus neodcházel do neaktivního pozadí a aby po zavření dával návrat smysl.

Ne každá rozbalená nabídka je modální dialog. U běžné navigace může být správné pokračovat dál po stránce. Požadavek na chování odvozujte od typu prvku. Univerzální příkaz „zamknout Tab ve všem otevřeném“ by mohl vytvořit další překážku. Vývojář má navrhnout odpovídající řešení a předat ověřitelný průchod.

Hledání musí jít také opravit

Přesuňte se do hledání, zadejte běžné slovo a otevřete výsledek. Potom zkuste dotaz bez výsledku a upravte jej. Ověřte, že poznáte účel vstupního pole, že se dostanete na odesílací tlačítko a že výsledek není jen nenápadná změna, kterou uživatel přehlédne.

Nezasílejte při běžném testu skutečné osobní údaje. Pro kontaktní formuláře použijte schválené testovací prostředí. Podrobné chybové průchody řeší návod k přístupným formulářům. Zde je cílem hlavně dostupnost a logika ovládání, nikoli ověření doručení zprávy.

Co předat vývojáři místo „nejde Tab“

Vlastní model zadání může znít: „Na veřejném článku po otevření mobilní navigace tlačítkem a třech stiscích Tab přejde fokus na odkaz v zakrytém článku. Očekáváme použitelnou cestu nabídkou a srozumitelné zavření. Problém nastává ve vybraném prohlížeči při šířce 390 px.“ Připojte adresu a případně krátký záznam.

Pole zadání Modelový obsah
Výchozí stav Článek, zavřená navigace, bez přihlášení
Postup Tab na menu, Enter, třikrát Tab
Pozorování Aktivní odkaz je pod překryvem
Očekávání Dostupné položky a možnost návratu
Převzetí Stejný průchod po opravě v obou šířkách

K opravě nepřidávejte automaticky nové číselné pořadí všech prvků přes kladný tabindex. Takové přeskupení může oddělit klávesovou cestu od struktury dokumentu. Preferujte logické pořadí a nativní ovládací prvky; konkrétní technický zásah patří správci, který zná šablonu.

Opravu převzít znamená znovu projít úkol

  1. Zopakujte původní problém na testovací kopii a uložte výchozí stav.
  2. Po změně vyzkoušejte otevření, ovládání, zavření a pokračování.
  3. Ověřte alespoň jednu jinou stránku se stejnou komponentou.
  4. Zkontrolujte myš i dotyk, aby oprava nepoškodila další ovládání.
  5. Po nasazení projděte veřejnou verzi a zaznamenejte skutečný rozsah.

Před společnou změnou menu se hodí postup pro staging WordPressu. Pokud nabídka reaguje, ale s velkým zpožděním, jde navíc o otázku výkonu; tu rozebírá diagnostika INP a pomalých interakcí.

V přejímacím zápisu oddělte funkční průchod klávesnicí od testu s odečítačem. První je důležitý, ale sám nedokládá správné názvy, role a oznámení pro asistivní technologii. Pro důležitou společnou komponentu má smysl objednat i tuto druhou část. Uchovejte seznam vyzkoušených kombinací, aby pozdější aktualizace mohla navázat.

Časté otázky

Musí Tab zastavit na každém odstavci?

Ne. Běžný text není standardně součástí tabulační cesty. Klávesová navigace mezi ovládacími prvky a čtení dokumentu jsou odlišné činnosti.

Může stačit klikatelný obrázek místo tlačítka?

Pouhý vzhled nestačí. Prvek musí mít odpovídající funkci, dostupný název a ovládání. Nativní tlačítko často usnadní správnou implementaci.

Má každé otevřené menu zadržovat fokus?

Ne automaticky. Záleží na tom, zda jde o modální dialog, nebo běžnou navigaci. Nevhodné zadržování může samo vytvořit past.

Je test na počítači úplnou mobilní kontrolou?

Není. Zúžené okno ověří určitou variantu rozložení. Skutečný telefon a jeho asistivní technologie mohou potřebovat další ověření.

Stačí po aktualizaci šablony ověřit první tlačítko?

Nestačí. Projděte celý původní scénář včetně návratu. Chyba se může projevit až při zavření nabídky nebo přechodu na další stránku.

Zdroje

Související články

Radek Vávra
Radek Vávra

Radek Vávra je šéfredaktor Podnikmag.cz. Věnuje se financím, investování a podnikání.

Články: 771