Rozbalovací navigace

Proč je to přístupné

„Hamburgerové“ menu bývá pro klávesnici a odečítač obrazovky neviditelné: ikona bez názvu, nabídka bez stavu, zaměření, které po zavření zmizí. Tady je tlačítko obyčejný button s textem „Menu“ a atributem aria-expanded, takže odečítač obrazovky řekne „Menu, tlačítko, sbaleno“ a po otevření „rozbaleno“. Tlačítko stojí v pořadí Tab přímo před seznamem, který ovládá.

Sbalení nastává jen pod přibližně 768 px a jen tehdy, když se skript skutečně načetl. Na široké obrazovce je navigace vždy viditelná a tlačítko neexistuje. Odkazy pro přeskočení na začátku stránky vedou na hlavní obsah, na hledání s nastavením a na zápatí; navigace je hned za logem, takže na ni přeskakovat netřeba.

Vyzkoušejte si sami

Klávesnice

Zužte okno pod 768 px. Tab na tlačítko Menu, Enter ho otevře.
Tab prochází položky; Escape menu zavře a vrátí zaměření na tlačítko.
Kliknutí mimo menu ho také zavře.

Odečítač obrazovky

Tlačítko oznámí název „Menu“ a stav sbaleno / rozbaleno. Navigace je oblast „Hlavní navigace“, takže se na ni lze dostat i přes seznam oblastí.

Zvětšení a přizpůsobení obsahu

Při 400% zvětšení se stránka chová jako na telefonu: navigace se sbalí a odkazy mají výšku alespoň 44 px.

Bez JavaScriptu

Seznam odkazů je zobrazen při každé šířce obrazovky. Tlačítko Menu vytváří až skript, takže bez něj nic nechybí ani nic nepřekáží.

Kód

<ad-disclosure-nav data-open-label="Menu">
  <nav id="site-navigation" aria-label="Hlavní navigace">
    <ul role="list">
      <li><a href="/cs/o-nas/">O nás</a></li>
      <li><a href="/cs/sluzby/">Služby</a></li>
    </ul>
  </nav>
</ad-disclosure-nav>
<link rel="stylesheet" href="/assets/js/components/ad-disclosure-nav/ad-disclosure-nav.css">
<script type="module" src="/assets/js/components/ad-disclosure-nav/ad-disclosure-nav.js"></script>

Ukázka