Proč je klávesnicová přístupnost kritická
Když mluvíme o mega menu a rozbalovacích panelech, často zapomínáme na lidi, kteří klávesnici potřebují. Nejde jen o slabozraké či nevidomé — i motoricky postižení nebo tělesně hendikepovaní uživatelé nemohou vždy myš ovládat. A je tu víc lidí, než si myslíte.
Realita? Kolem 15 % populace má nějaký typ postižení. Část z nich nemůže bez klávesnice vůbec pracovat. To není okrajová skupinka — to je obchodní příležitost a hlavně etická odpovědnost.
Tab klávesa jako základní navigace
Tab klávesa je nejdůležitější. Uživatel ji stiskne a focus se přesune na další interaktivní prvek. Shift+Tab jde zpět. Jednoduché, ale musí to fungovat.
V mega menu se to často pokazí. Když uživatel vstoupí do rozbalovacího panelu, musí se focus pohybovat POUZE mezi viditelným prvky. Skrytý obsah se ignoruje. To je podstatné — špatná order fokusových prvků vede k frustraci.
- Focus musí být viditelný (ne neviditelný nebo skrytý)
- Order musí být logický — zleva doprava, shora dolů
- Skrytý obsah se nevstupuje (display: none, visibility: hidden)
- Fallback pro klávesnici musí existovat — bez myši
Praktická realita
Jsme testovali mega menu jedné velké e-commerce firmy. Tab pořadí bylo chaotické. Uživatel se tlačítkem Tab dostal do submenu, pak skokem na footer, pak zpět. Bez myši by tam seděl 5 minut. S naší opravou — 10 sekund. To je rozdíl mezi použitelností a frustací.
ARIA atributy: Řeč pro screenreadery
ARIA znamená Accessible Rich Internet Applications. Je to standard, kterým říkáte screenreaderem, co prvek dělá. Bez toho si screenreader myslí, že je to jen div.
Mega menu potřebuje aria-label, aria-expanded, aria-controls. Každý atribut má účel. aria-label říká, co to je. aria-expanded říká, je-li otevřeno. aria-controls propojuje tlačítko s panelem, který řídí.
<button aria-label="Produkty menu"
aria-expanded="false"
aria-controls="produkty-panel">
Produkty
</button>
Implementace: Krok za krokem
Správný HTML markup
Používejte semantické prvky. Button pro tlačítko (ne div). Nav pro navigaci. Aria atributy jsou doplněk, ne náhrada.
Viditelný focus state
Nikdy neodstraňujte outline. Barva focusu musí kontrastovat s pozadím — minimálně 3:1. Měla by být rozlišitelná a konzistentní.
Focus trap v panelu
Když je mega menu otevřeno, focus se nesmí dostat ven z panelu. Poslední prvek Tab první prvek. To je focus trap a je to správně.
Escape pro zavření
Stisknutí Escape zavře menu a focus se vrátí na tlačítko. Bez toho se uživatel cítí uvězněný. To je základní UX.
CSS a focus states
CSS je tu klíčový. Focus outline nesmí být jen něco, co odstraníte. Musí být viditelný, barevný a jasný.
Moderní přístup je :focus-visible — funguje na klávesnici, ale ne na myši. To je lepší UX. Klávesnicový uživatel vidí focus, myší uživatel ne.
Důležité upozornění
Tento průvodce je informativní a edukační. Není to právní poradenství. Zákony o přístupnosti se liší podle země. V EU platí EN 301 549 a Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. Consulťte právníka pro váš specifický případ.
Testování s screenreaderem
Teorie je krásná, ale test s NVDA nebo JAWS to prozradí. Nevidomý uživatel používá screenreader — program, který čte obsah nahlas.
Mega menu by mělo být slyšet jasně. Screenreader by měl říci: “Produkty tlačítko, rozbalené, submenu obsahuje 8 položek”. Pokud jen řekne “Produkty tlačítko”, něco chybí.
Testování je snadné — stáhněte si NVDA (zdarma), zavřete oči a navigujte. Překvapí vás, co zjistíte. Zkušenost bez obrazovky změní váš pohled na design.
Běžné chyby a jak je opravit
Vidíme stejné chyby stále znovu. Aria bez sémantiky — aria-role=”button” na divu. To nefunguje. Button na buttonu — redundantní a matoucí.
Další problém? Skip linky. Uživatel přijde na stránku, chce přeskočit navigaci. Skip link musí být viditelný při focusu. Skrytý skip link je k ničemu.
A focus order. Když je submenu skryté, prvky v něm se nesmí focusovat. CSS visibility: hidden nebo display: none to zabrání. Aria-hidden=”true” taky pomůže screenreaderu.
“Přístupnost není luxus. Je to základní právo na informace a na participaci na internetu. Když váš web není přístupný, vylučujete lidi.”
Závěr: Přístupnost se vyplácí
Klávesnicová přístupnost není jen pro zdravotně postižené. Všichni ji někdy potřebují. Power user preferuje klávesnici. Uživatel s rozbitou myší ji potřebuje. Dítě na tabletu bez myši ji ocení.
Správná implementace Tab pořadí, viditelných focus stavů a ARIA atributů stojí málo času. Přidáme 10-15 % času vývoje. Výsledek? Weby, které fungují pro všechny. To není ideál — to je standard, kterého bychom měli dosáhnout dnes.
