Responzívne navigačné menu

Na menších obrazovkách je hlavná navigácia dostupná prostredníctvom tlačidla Menu. Navigáciu možno plne ovládať pomocou klávesnice a jej aktuálny stav je programovo dostupný aj pre asistenčné technológie.

Komponent
<ad-disclosure-nav>
Vzor APG
Disclosure (Show/Hide)
Vybrané kritériá WCAG

Komponent musí spĺňať všetky kritériá WCAG; uvádzame tie, ktoré sa pri ňom porušujú najčastejšie.

Ukážka

Zúžte okno prehliadača pod približne 768 px alebo si stránku otvorte na telefóne: navigácia sa zbalí za tlačidlo Menu.

Prečo je toto riešenie prístupné

Pri auditoch prístupnosti sa často stretávame s tým, že tlačidlo na otvorenie menu je vytvorené iba ako prvok div, a preto nemá sémantiku tlačidla ani podporu pre ovládanie pomocou klávesnice. V iných prípadoch obsahuje iba ikonu bez prístupného názvu a chýbajú mu ARIA atribúty, ktoré informujú o aktuálnom stave navigácie.

V našom riešení je na otvorenie navigácie použitá natívna HTML značka button s textom "Menu", atribútom aria-expanded a aria-controls. Atribút aria-expanded informuje používateľov asistenčných technológií o tom, či je navigácia otvorená alebo zatvorená, zatiaľ čo aria-controls programovo prepája tlačidlo s navigáciou, ktorú ovláda.

Poradie zamerania zodpovedá logickému usporiadaniu navigácie. Po otvorení menu zostáva zameranie na tlačidle "Menu" a ďalším zamerateľným prvkom je prvá položka navigácie. Používateľ ovládajúci stránku pomocou klávesnice tak prirodzene pokračuje priamo do otvoreného menu bez potreby prechádzať cez ďalšie prvky stránky.

Vyskúšajte si komponent

Klávesnica

  • Zúžte okno prehliadača pod približne 768 px a pomocou klávesu Tab prejdite na tlačidlo "Menu". Zamerané tlačidlo môžete otvoriť a zatvoriť klávesom Enter alebo Space. Otvorenú navigáciu je možné zatvoriť aj klávesom Escape.
  • Pomocou klávesu Tab môžete následne prechádzať jednotlivými položkami navigácie.

Čítač obrazovky

  • Pri zameraní na tlačidlo "Menu" čítač obrazovky oznámi jeho názov, sémantiku a aktuálny stav navigácie, napríklad v zatvorenom stave "Menu tlačidlo zatvorené" a po otvorení "Menu tlačidlo otvorené".

Použitie bez JavaScriptu

Ak JavaScript nie je dostupný alebo sa nenačíta, navigácia sa zobrazí ako bežné desktopové menu a všetky jej položky zostávajú používateľovi dostupné.

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>