4.1.2 Tlačidlo mobilnej ponuky nemá programovo určený stav rozbalenia

Porušenie sa týka celého webového sídla.

Popis problému:

V úzkom zobrazení (pod 1024 CSS pixelov) sa hlavná navigácia otvára tlačidlom s ikonou ponuky v hlavičke. Tlačidlo má skrytý text <span class="sr-only">Otvoriť menu</span>, nemá však atribút aria-expanded ani aria-controls. Po otvorení ponuky zostáva jeho prístupný názov „Otvoriť menu“ a stav sa nijako neoznámi. Ponuku nie je možné zatvoriť klávesou Escape. Overené klávesnicou pri šírke 390 CSS pixelov.

Dopad:

Používatelia čítačov obrazovky na mobilných zariadeniach a pri zväčšení obrazovky (kde sa zobrazuje mobilné rozloženie) po aktivovaní tlačidla nedostanú informáciu, či sa ponuka otvorila alebo zatvorila, a tlačidlo im naďalej ponúka „Otvoriť menu“ aj vtedy, keď je ponuka otvorená. Používatelia klávesnice musia na zatvorenie ponuky hľadať tlačidlo späť.

Závažnosť: stredná — navigácia je použiteľná, stav ovládacieho prvku však nie je programovo dostupný.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné tlačidlu doplniť atribút aria-expanded, ktorého hodnotu Alpine.js mení podľa stavu, a aria-controls s id ponuky. Text „Otvoriť menu“ je vhodné zmeniť na neutrálne „Menu“, aby nebol v rozpore so stavom:

<button type="button" @click="mobileMenuOpen = !mobileMenuOpen"
        :aria-expanded="mobileMenuOpen.toString()" aria-controls="mobile-menu"
        @keydown.escape.window="mobileMenuOpen = false">
  <span class="sr-only">Menu</span> …
</button>
<div id="mobile-menu" x-show="mobileMenuOpen">…</div>