Rozbaľovacia navigácia

Prečo je to prístupné

„Hamburgerové“ menu býva pre klávesnicu a čítač obrazovky neviditeľné: ikona bez názvu, ponuka bez stavu, zameranie, ktoré po zatvorení zmizne. Tu je tlačidlo obyčajný button s textom „Menu“ a atribútom aria-expanded, takže čítač obrazovky povie „Menu, tlačidlo, zbalené“ a po otvorení „rozbalené“. Tlačidlo stojí v poradí Tab priamo pred zoznamom, ktorý ovláda.

Zbalenie sa deje iba pod približne 768 px a iba vtedy, keď sa skript naozaj načítal. Na širokej obrazovke je navigácia vždy viditeľná a tlačidlo neexistuje. Odkazy na preskočenie na začiatku stránky vedú na hlavný obsah, na vyhľadávanie s nastaveniami a na pätičku; navigácia je hneď za logom, takže preskakovať na ňu netreba.

Vyskúšajte si sami

Klávesnica

Zúžte okno pod 768 px. Tab na tlačidlo Menu, Enter ho otvorí.
Tab prechádza položky; Escape menu zavrie a vráti zameranie na tlačidlo.
Kliknutie mimo menu ho tiež zavrie.

Čítač obrazovky

Tlačidlo oznámi názov „Menu“ a stav zbalené / rozbalené. Navigácia je oblasť „Hlavná navigácia“, takže sa na ňu dá skočiť aj cez zoznam oblastí.

Priblíženie a reflow

Pri 400 % priblížení sa stránka správa ako na telefóne: navigácia sa zbalí a odkazy majú výšku aspoň 44 px.

Bez JavaScriptu

Zoznam odkazov je zobrazený pri každej šírke obrazovky. Tlačidlo Menu vytvára až skript, takže bez neho nič nechýba ani nič nezavadzia.

Kód

<ad-disclosure-nav data-open-label="Menu">
  <nav id="site-navigation" aria-label="Hlavná navigácia">
    <ul role="list">
      <li><a href="/o-nas/">O nás</a></li>
      <li><a href="/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ážka