Pod pokličkou technologických voleb: Co (ne)používáme a proč
PŘEČÍST ČLÁNEK
Hamburger menu. Tři nenápadné čárky v rohu obrazovky, které dnes najdeme téměř na každém webu. Elegantní způsob, jak udržet design čistý a přehledný. Právě tahle drobná ikonka ale dokáže způsobit větší problém, než se na první pohled zdá. Pokud totiž není navržena s ohledem na přístupnost, může řadě uživatelů zkomplikovat nebo úplně znemožnit orientaci na webu.
Přístupnost webu zahrnuje celou řadu prvků. Od kontrastu barev přes alternativní texty až po správně strukturované nadpisy. Stejně důležité je ale věnovat pozornost i samotné navigaci. Právě ta totiž hraje klíčovou roli v tom, jak snadno se uživatelé na webu zorientují. A hamburger menu v tomto směru vyžaduje obzvlášť pečlivý přístup.
Jak tedy udělat hamburger menu, které nezamkne obsah jen pro vyvolené? A co všechno je potřeba ohlídat, aby bylo dostupné opravdu pro každého?
Aby bylo hamburger menu skutečně přístupné, nestačí ho jen umístit do rohu obrazovky a přidat ikonku. Je potřeba myslet na to, kdo všechno ho bude používat, a jak.
Základem je správné technické řešení. Tlačítko, které menu otevírá, by mělo být vytvořené jako <button> nebo <a> prvek, aby s ním dokázaly pracovat čtečky obrazovky. Klíčové je přidat srozumitelný popisek, nejčastěji formou aria-label, který uživateli jasně řekne, že jde o hlavní navigaci webu. Popisek typu „Otevřít menu“ nebo „Navigace“ je pro uživatele s asistivními technologiemi naprosto zásadní.
Důležité ale je i to, co se děje po kliknutí. Rozbalené menu musí být:
Nejde tedy jen o ikonku. Jde o celý tok interakce od vstupu až po orientaci v obsahu.
.png)
Přístupnost se nejlépe ověřuje v praxi. U hamburger menu to platí dvojnásob. Nestačí se spoléhat na vizuální kontrolu nebo správně napsaný kód. Je potřeba si skutečně vyzkoušet, jak se k menu dostává uživatel, který nevidí, nekliká nebo pracuje bez myši.
Jednoduchý test? Zkuste projít web pouze skrze klávesnici. Pomocí tabulátoru se pohybujte po jednotlivých prvcích a sledujte, jestli je možné se k menu vůbec dostat.
Důležité je testování i v rámci responzivity. Nejde totiž jen o mobilní zařízení. Mnoho uživatelů si přizpůsobuje zobrazení podle svých potřeb, například si stránku výrazně zvětší. V tu chvíli se i na desktopu může objevit verze s hamburger menu. A právě v takových situacích často vyplavou na povrch přístupnostní nedostatky, které běžný test nezachytí.
Kromě klávesnice je dobré zkusit i základní čtečku obrazovky. Stačí krátká simulace a hned zjistíte, jestli dává web uživatelům potřebné informace, nebo je nechává tápat.
Přístupnost hamburger menu není jen úkolem vývojářů nebo UX designérů. Svoji roli tu má i obsah. Už jen správně napsaný text může rozhodnout o tom, jestli se uživatel v navigaci zorientuje nebo ztratí.
Například název tlačítka, které menu otevírá, je pro mnoho lidí první (a někdy jediná) stopa, jak se na webu pohybovat. Pouhá ikonka ☰ nestačí. Doplnění textu „Menu“ výrazně pomáhá, ať už je vedle ikonky, nebo jako aria-label v kódu. Zvlášť uživatelé s kognitivním znevýhodněním nebo nižší digitální gramotností často ikonku vůbec nerozpoznají.
Obsah ale ovlivňuje i samotnou strukturu rozbaleného menu. Jasné, stručné a logicky seřazené názvy položek navigace mohou výrazně zjednodušit orientaci, zvlášť když je uživatel čte po paměti, nebo prostřednictvím čtečky obrazovky.
A i když nejste vývojář, můžete při testování sehrát důležitou roli. Stačí si klást jednoduché otázky:
👉 Rozumím tomu, kam jednotlivé položky vedou?
👉 Je zřejmé, co se stane po kliknutí?
👉 Dovedlo by mě to menu tam, kam potřebuji?
Přístupnost je týmová práce. A obsah má v ní pevné místo.
Přístupnost není technický dluh, který se dá odkládat. Je to důkaz, že na webu počítáme se všemi bez rozdílu. A právě hamburger menu je jeden z těch malých detailů, který může rozhodnout, jestli se člověk zorientuje, nebo ne.
Od 28. června 2025 začne platit Evropský akt o přístupnosti, který přináší nové požadavky i pro provozovatele e-shopů. Nejde ale jen o paragrafy. Jde o to, aby měl každý uživatel stejný přístup k informacím, službám a nákupům. Bez výjimek, bez překážek.
Přístupnost není jen o splnění povinností. Je to příležitost otevřít svůj web všem bez výjimek.
Na naší stránce Byznys bez bariér se dozvíte více o tom, proč na přístupnosti záleží a jak vám s ní můžeme pomoci. Pokud chcete zjistit, co všechno by šlo zlepšit právě na vašem webu, budeme rádi, když se nám ozvete.
.png)
.jpg)
