Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Přístupné navigační menu

Aktualizováno 14. října 2026 · Čtení na 6 min

Hlavní navigaci použije každý návštěvník jako první a v e-shopu se často rozroste v mega menu s kategoriemi, značkami a akcemi. Nejčastější chybou přístupnosti tu není chybějící ARIA, ale špatná ARIA: role="menubar" zkopírovaná z knihovny komponent. Tato stránka vysvětluje, co APG doporučuje místo toho. Je součástí série přístupné vzory UI.

APG má vzor Menu and Menubar pro aplikační menu — „seznam voleb, například akcí nebo funkcí“, který se chová jako menu v desktopových programech. Jeho příklad navigačního menubaru nese výslovné varování:

„Vzor menubar vyžaduje složité funkce, které pro běžnou navigaci webu nejsou potřeba“ … „Pro běžnou navigaci webu s rozbalovacími skupinami odkazů se lépe hodí vzor Disclosure.“

APG dodává, že vzor disclosure „se lépe hodí pro většinu webů, protože jen málo webů potřebuje dodatečné funkce klávesnice“. Jeho příklad navigace s rozbalovacími tlačítky roli menu nepoužívá, protože „neposkytuje složité funkce, které asistivní technologie očekávají“. role="menu" je slib chování menu jako v desktopových programech; pokud ho web nesplní, je menu hůř použitelné než obyčejné odkazy.

Doporučení: orientační bod nav, vnořené seznamy odkazů a rozbalovací tlačítka pro skupiny.

Související kritéria WCAG

Příklad kódu

<nav aria-label="Hlavní">
  <ul>
    <li>
      <button type="button" aria-expanded="false" aria-controls="nav-women">Ženy</button>
      <ul id="nav-women" hidden>
        <li><a href="/cs/zeny/saty">Šaty</a></li>
        <li><a href="/cs/zeny/boty" aria-current="page">Boty</a></li>
      </ul>
    </li>
    <li><a href="/cs/vyprodej">Výprodej</a></li>
  </ul>
</nav>

<script>
  document.querySelectorAll('nav button[aria-expanded]').forEach((button) => {
    const list = document.getElementById(button.getAttribute('aria-controls'));
    button.addEventListener('click', () => {
      const open = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', String(!open));
      list.hidden = open;
    });
  });
</script>

Poznámky:

  • Pokud horní položka musí být zároveň odkazem na stránku kategorie, má APG variantu „Disclosure Navigation Menu with Top-Level Links“: odkaz a samostatné přepínací tlačítko stojí vedle sebe. Nedělejte z jednoho prvku zároveň odkaz i přepínač.
  • Doplňte Escape: zavře otevřenou skupinu a vrátí fokus na její tlačítko, jak to dělá příklad v APG.
  • Na mobilu je tlačítko „hamburger“ tentýž rozbalovací prvek: aria-expanded, název například „Menu“ a panel následuje hned za ním v DOM.

Ovládání klávesnicí

Podle příkladu navigace s rozbalovacími tlačítky v APG:

Klávesa Funkce
Tab / Shift + Tab Prochází tlačítky a odkazy nejvyšší úrovně, a když je skupina otevřená, i jejími odkazy
Enter nebo mezerník na tlačítku Otevře nebo zavře skupinu
Enter na odkazu Přejde na odkaz
Escape Zavře otevřenou skupinu a vrátí fokus na její tlačítko
Šipky, Home, End Volitelně: přesun mezi tlačítky a odkazy; klávesu Tab doplňují, nenahrazují

Skutečný menubar by naopak vyžadoval šipky pro přesun mezi položkami, Tab pro opuštění celého menubaru a vyhledávání podle prvního písmene — to jsou ty „složité funkce“, o kterých APG mluví.

Časté chyby v e-shopech

  • Mega menu, která se otevírají jen najetím myší; uživatelé klávesnice projdou tabulátorem horní odkazy a k podkategoriím se nikdy nedostanou.
  • role="menubar" a role="menuitem" na obyčejných odkazech, často ze šablony nebo pluginu, bez chování šipek.
  • Skrytá podmenu, která mohou dál získat fokus: Tab zmizí do neviditelných odkazů (fokus se ztratí za opacity: 0).
  • Název kategorie je zároveň odkaz i přepínač, takže uživatelé dotykových obrazovek a klávesnice podmenu neotevřou.
  • Chybí aria-expanded, nebo se nikdy nezmění z false.
  • Několik orientačních bodů nav bez popisku (hlavní, patička, účet), takže je uživatelé čteček obrazovky nerozliší.
  • Tlačítka hamburger bez názvu a mobilní menu postavená jako překryv přes celou obrazovku, která fokus neudrží uvnitř ani ho nevrátí.

Co najde automatizovaná kontrola a co ruční testování

Automaticky (pravidlo axe-core) Co najde
link-name, button-name Odkazy v menu a přepínací tlačítka nebo hamburgery bez názvu
aria-required-children, aria-required-parent menu/menubar bez podřízených menuitem, menuitem mimo menu
aria-allowed-role Role, které se k prvku nehodí (doporučení)
aria-hidden-focus Odkazy uvnitř podmenu s aria-hidden, které mohou dál získat fokus
list, listitem Porušená struktura seznamů v navigaci
landmark-unique Několik navigačních orientačních bodů se stejným názvem nebo bez názvu (doporučení)
bypass, skip-link Žádný způsob, jak menu přeskočit; skip odkaz s nefunkčním cílem
target-size Příliš malé cíle v menu

Všechna jsou kartami v naší knihovně pravidel. Sken vidí stránku tak, jak se načte, se zavřenými podmenu. Ruční testování: otevřete každou skupinu klávesou Enter nebo mezerníkem, ověřte, že se změní aria-expanded, stiskněte Escape, projděte tabulátorem otevřenou skupinu, ověřte, že zavřené skupiny nemohou získat fokus, a zopakujte to s mobilním menu při šířce 320 CSS pixelů. Rozšíření prohlížeče umí zkontrolovat stránku s otevřenou skupinou.

Spusťte bezplatnou kontrolu jedné stránky na své domovské stránce. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Má navigace webu používat role="menu" nebo role="menubar"?

Obvykle ne. APG upozorňuje, že vzor menubar vyžaduje složité funkce, které běžná navigace webu nepotřebuje, a pro navigaci s rozbalovacími skupinami odkazů doporučuje vzor disclosure (rozbalovací tlačítka).

Co je navigace s rozbalovacími tlačítky (disclosure)?

Prvek nav se seznamem odkazů, ve kterém má každá skupina s pododkazy tlačítko s aria-expanded, které podseznam zobrazí nebo skryje. Uživatelé jím procházejí klávesami Tab, Enter a mezerníkem, stejně jako zbytkem stránky.

Jak v menu označit aktuální stránku?

Dejte aria-current="page" na odkaz na stránku, na které uživatel je, a označte ji i vizuálně, ne jen barvou.

Musí menu podporovat šipky?

Ve vzoru disclosure ne. Příklad v APG podporuje šipky, Home a End jako volitelný doplněk ke klávese Tab. Skutečný menubar naopak musí implementovat celý model ovládání šipkami.

Dokáže automatizovaná kontrola otestovat navigační menu?

Najde odkazy a tlačítka bez názvu, role menu bez položek menu, duplicitní nepojmenované navigační orientační body a skryté odkazy, které mohou získat fokus. Neotestuje, zda se podmenu otevírají klávesnicí a zda se aktualizuje aria-expanded.

Zdroje

  • W3C WAI, APG Navigation Menubar example (varování k navigaci webu): https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
  • W3C WAI, APG Menu and Menubar pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  • W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  • W3C WAI, APG Disclosure Navigation Menu example: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
  • W3C WAI, APG Menu Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/