Utvidet meny er ikke kodet riktig

Når menyen er utvidet er det fortsatt mulig å navigere i innholdet bak. Det skaper problemer for seende brukere som er avhengig av tastatur for å navigere da det er vanskelig å oppdage hvor man befinner seg. Dette påvirker fokusrekkefølge og det påvirker visuell fokus da det blir skjult bak den utvidede menyen. Det skaper også forvirring for brukere som ikke ser.

Når det gjelder megamenyer generelt kan det forårsake problemer for svaksynte brukere som bruker skjermforstørrelser for å forstørre små deler av skjermen. Med en skjermforstørrelse kan det hende at bare en liten del av megamenyen er synlig av gangen og dermed anta at det synlige innholdet er alt innholdet som er tilgjengelig. At dere visuelt skiller innholdet i menyen kan hjelpe på dette men det kan fortsatt bli en problematikk.

• Når menyen er utvidet må bakgrunnen bli låst for navigering med tastatur. Det bør også være skjult for skjermleser med for eksempel attributtet aria-hidden. Når meny er utvidet skal alt innhold bak være satt med aria-hidden=“true” når menyknappen har aria-expanded=“true” og motsatt.

• På div elementet som er nestet rundt hele menyen, bruk aria attributtet aria-modal=“true” sammen med role=“dialog” og aria-label=“Meny” som gir modalvinduet en tekstbeskrivelse, se kodeeksempel nedenfor.

  <div class="bd-header__megamenu" aria-modal="true" aria-label="Meny" role="dialog"
  

• For inspirasjon, se WAI-ARIA 1.2 Authoring practices pattern for dialogs.