Bc. Michaela Hakenová

UX/UI designerka

Chystáte vánoční kampaň? Odhalte chyby dřív, než začne. Sledujte rolničku

Rozbalovací menu se nesmí rozevírat hoverem

Dostala jsem se ke stavbě obecního webu a doslechla jsem se jednu teorii ohledně rozbalovacích nabídek. A tak jsem rozhodla, že si tohle téma vezmu pod lupu a zjistím, co je na tom pravdy. 

Rozbalovací položka v menu (ta se šipkou) se nesmí rozbalovat jako hover efekt. 

Rozbalovací menu
Rozbalovací menu

V čem je problém?

V menu vašeho webu jsou položky. U položek, které se rozbalují, byste měli mít vedle názvu i šipku, která znázorňuje, že daná položka má podnabídku. Někdy je to šipka, jindy plus. A vy tuhle šipku rozbalíte pouze tím, že na ní najedete myší = hover efektem. 

Jenže lidé, kteří zrovna myš nemohou používat a využívají k pohybu na webu klávesnici (tabulátor a enter), si vaší podnabídku prostě nezobrazí. Nemají šanci.

Co na to říká WCAG 2.2?

WCAG (mezinárodní standard přístupnosti webu) nikde doslova nepíše, že se menu musí otevírat kliknutím nebo hoverem. ALE, jsou tam 3 pravidla, která z problému dělá opravdový problém.

· Slovník pojmů · 

Co je to hover efekt?

Hover efekt je vizuální změna prvku na webových stránkách. Nastane v momentě, kdy na něco najedete myší. Logicky se neprojevuje na mobilech a tabletech, protože tam nemáte k dispozici myš.

Čeho se to týká?

  • Tlačítka
  • Fotky
  • Karty a boxy

Jak se hover efekt projevuje?

Obvykle změna barvy nebo velikosti, zvětšením stínu nebo zoom fotografie, nebo se objeví ikona. 

WCAG 2.1.1 Keyboard · (úroveň A)

Musí to jít ovládat klávesnicí

Hover jako akce pro klávesnici ani čtečku obrazovky neexistuje. Pokud se podnabídka rozbaluje jen najetím myši, uživatelé klávesnice se k položkám uvnitř nikdy nedostanou. 

Jinak řečeno to, co jde udělat myší, by mělo jít i s klávesnicí.

WCAG 3.2.1 On Focus · 3.2.2 On Input · (obě úroveň A)

Obsah by se neměl měnit sám od sebe

K rozbalení podnabídky by mělo dojít až po vaší akci (kliknutí, Enter, mezerník). Ne automaticky tím, že tam kurzor jen zabloudí.

WCAG 1.4.13 Content on Hover or Focus ·  (úroveň AA)

Pokud přece jen hover používáte:

musí jít to, co se objeví, zavřít bez posunu myši (Escape), musí se na to dát najet, aniž by to zmizelo, a musí to zůstat vidět, dokud to sami nezavřete.

Jaká se nabízejí řešení?

Nadřazená položka má obsah

Pokud víte, že hlavní položka v menu (v mém případě by to byly „Služby“) má nějaký smysluplný obsah, mělo by být pomyslné tlačítko rozdělené na 2 části: 1. část s textem „Služby“ by odkazovala na samotnou stránku a 2. část s šipkou (nebo plusem) podnabídku rozbalí.

Dává to smysl například v kategoriích e-shopů, kde chce uživatel vidět všechny položky v dané kategorii.

Nadřazená položka nemá obsah

Pokud víte, že hlavní položka nemá smysluplný obsah a byl by tam například jen obyčejný rozcestník, nemá smysl mít dvě různé klikatelné části (text a šipka). Vyrábět prázdnou stránku jen proto, aby odkaz měl kam vést není dobré.

Tlačítko tedy funguje pouze jako pokyn „rozbal podnabídku“. Nikam vás to nepřesměruje.

Jak jsem to vyřešila já?

Na webu mám položku „Služby“. Sice jsem tam nějaký obsah měla, ale položka odkazovala na stejný rozcestník jako rozbalovací položka. Takže úplně zbytečná stránka na webu.

Protože už jí mám zaindexovanou, zůstanu u varianty 1 a stránku doladím, aby tam bylo více obsahu. Jinak bych zvolila variantu 2 a nechala položku jen rozbalovací.

Sami se rozhodněte, která varianta je nejlepší. 

Krok 1: Jak to funguje u vás?

Vyzkoušejte si, jak to funguje u vás. Nejprve pomocí klávesnice, pak pomocí myši. 

  1. Otevřete svůj web v prohlížeči. 
  2. Stiskněte tabulátor, dokud nedojedete na položku, která se rozbaluje. 
  3. Stiskněte Enter.
    1. Objevila se podnabídka? Super, menu funguje. Můžete vyzkoušet i to, že zmáčknete Esc. Podnabídka by se měla sbalit. 
    2. Nic se neotevřelo, nebo se dostanete tabulátorem až za rozbalovací položku? Máte stejný problém, jako jsem měla já.
  4. Test pomocí myši. Není to požadavek WCAG, ale obyčejného UX. Uživatelé očekávají základní funkci rozbalení podnabídky.
    1. Klikněte na text a zjistěte, co se stane. Tady je možné, že se otevře stránka hlavní položky. Nebo, se rozevře podnabídka. 
    2. Klikněte pouze na šipku. Měla by se rozbalit podnabídka. 

Krok 2: Zjistěte, jak to udělat u vás

Protože jsem UX/UI designerka, ne vývojářka, nemohu vám poradit, jak to udělat u vás. 100 webů, 1.000 různých řešení a individuálních úprav.

Princip je ale univerzální: menu musí jít otevřít kliknutím nebo klávesou Enter, ne jen najetím myši.  

Newsletter: Míša píše

Získejte tipy, jak zlepšit web nebo e-shop dříve než ostatní.