Uitklapmenu's

Een hoofdnavigatie met uitklapbare niveau’s is compact, geeft gebruikers een overzicht van alle pagina’s en laat toe om snel naar een specifieke pagina te gaan.

Zulke uitklapmenu’s zijn toegankelijk als iedereen ze kan gebruiken: met een muis of andere aanwijzer, zelfs als men minder controle heeft over zijn bewegingen, met een toetsenbord, met een screenreader, met een stemherkenningssoftware, etc.

Een toegankelijk uitklapmenu is liefst ook een menu dat niet storend is: de gebruiker moet niet verplicht zijn het uitklapmenu te laten verschijnen, of het helemaal te doorlopen met het toetsenbord, als hij daar geen behoefte aan heeft.

Algemene aanbevelingen

• Verwar een uitklaplijst (select, combobox) niet met een uitklapmenu. In een navigatiemenu bestaan de submenu's uit lijsten van links.
• Gebruik de menubar, menu en menuitem rollen niet voor navigatiemenu's: deze rollen zijn bedoeld voor menu's in toepassingen van het type toolbar, Ze overschrijven de aanwezige semantiek in de HTML-code (lijsten, links) en maken de interactie moeilijk voor screenreadergebruikers.
• Structureer het menu correct in HTML:
  • Plaats het geheel in een nav-element
  • Structureer het menu als een lijst met een of meerdere nesting niveau's en automatisch zullen de submenu's in de broncode direct volgen na de knop die ze laat verschijnen
  • Gebruik links om naar een pagina te navigeren en knoppen om een submenu te laten verschijnen
  • Vermijd alle overbodige ARIA-attributen die voor ruis en verwarring zorgen: aria-haspopup, aria-owns of aria-controls zijn niet nodig
• Zorg ervoor dat de focus zichtbaar is tijdens het tabben op de elementen van het menu, en dat een element zichtbaar is als het zich in de tabvolgorde bevindt. Als de submenu's verborgen zijn, moeten ze niet toegankelijk zijn met TAB
• Voorzie voldoende contrast voor de links van het menu, in elke mogelijke status (standaard, focus, hover)
• Voorzie een versie die is aangepast aan een mobiel scherm (of voor gebruik met zoom).

Verschillende soorten uitklapmenu's

De twee gebruikte methodes om de uitklapmenu's te laten verschijnen met een aanwijzer zijn

• klikken op het ouderlijk element
• bewegen over het ouderlijk element (hover)

In beide gevallen moet je een gelijkaardig gedrag met het toetsenbord voorzien:

• als het submenu verschijnt door te klikken op de ouderlijke elementen, moet het ook werken met ENTER,
• als het submenu verschijnt bij hover over het ouderlijk element, moet het ook verschijnen als het ouderlijk element met TAB de focus krijgt.

We hebben een voorkeur voor de eerste methode (klik en ENTER) omdat ze meer controle geeft aan de gebruiker. maar we geven aanbevelingen om de twee soorten menu's toegankelijk te maken.

Menu's die verschijnen met klik en met ENTER

Dit soort menu is in principe het gemakkelijkst, en het meest toegankelijk. De submenu's verschijnen enkel na een bewuste actie van de gebruiker: een klik of het gebruik van ENTER op het ouderlijk element.

Voorbeeld: Disclosure navigation menu.

Het grote voordeel van deze oplossing is dat de gebruiker die het menu met het toetsenbord doorloopt, niet verplicht is alle niveau's van de lijst te doorlopen.

Elk element van het menu moet gewoon zijn geïmplementeerd als een knop die een menu toont of verbergt.

• Het submenu verschijnt als men klikt op het ouderlijk element. Een tweede klik laat het submenu verdwijnen.
• De zichtbare elementen van het menu zijn toegankelijk met TAB. Dat zal automatisch het geval zijn als het button elementen zijn.
• De status van elk element van het menu (in- of uitgeklapt) is aangegeven met een aria-expanded attribuut met een waarde true of false.
• Als de focus op een ouderlijk element staat, laat ENTER het submenu verschijnen of verdwijnen.
• De inhoud van het submenu kan worden doorlopen met TAB.
• De submenu's zijn verborgen met display:none. Zo zijn ze onzichtbaar met een screenreader en kunnen geen focus krijgen zolang ze verborgen zijn.

Dat werkt goed als de hoofd-elementen van het menu geen links zijn naar landingpagina's. In dat geval is er een probleem, want eenzelfde interactief element kan geen twee verschillende acties veroorzaken: navigeren naar een pagina en een submenu laten verschijnen. Er zijn dus twee elementen nodig in plaats van één: een link om naar een pagina van de site te gaan, en een aparte knop om het submenu te laten verschijnen.

Voorbeeld van hybride menu waar elk element van het menu is ontdubbeld: een link, en een knop die een submenu laat verschijnen.

In dit geval moeten de knoppen ook geïmplementeerd zijn volgens het design pattern van disclosures. Er is een bijkomend aandachtspunt: je moet een betekenisvolle naam geven aan de knop om zijn functie duidelijk te maken.

Menu's die verschijnen bij hover en met TAB

Voorbeeld: responsive uitklapmenu gebaseerd op een voorbeeld van Simply Accessible.

De nadelen van deze oplossing zijn:

• Een toetsenbordgebruiker moet alle submenu's doorlopen, ook als dat niet nodig is. Dat maakt navigeren met het toetsenbord tijdrovend. Een skip link toevoegen aan het begin van de pagina (naar inhoud) kan een gedeeltelijke oplossing zijn.
• Voor gebruikers van een aanwijzer (muis of andere) kunnen de submenu's ongewild verschijnen. Het is des te storender naarmate het scherm klein is of de zoom-factor hoog. Het probleem is minder groot als je het submenu met ESC kan verbergen.
• De hover acties zijn moeilijker uit te voeren dan een klik met stemherkenningssoftware.

Het verwachte gedrag van het menu is:

• Het submenu verschijnt als je over het ouderlijk element beweegt. Door op het ouderlijk element te klikken, navigeer je naar de overeenkomstige pagina, als er één is.
• Met het toetsenbord, het submenu verschijnt zodra de focus landt op het ouderlijk element (met TAB). ENTER op het ouderlijk element navigeert naar de achterliggende pagina als er één is.
• De inhoud van het submenu kan worden doorlopen met TAB
• We verbergen de submenu's niet met display:none maar met 'screenreader only' zodat ze altijd zichtbaar zijn voor screenreadergebruikers, zelfs als ze verborgen zijn.
• Gebruik geen aria-expanded omdat de submenu's altijd zichtbaar blijven voor een screenreadergebruiker.
• Voorzie een manier om het submenu te verbergen zonder de aanwijzer of de focus van het toetsenbord te verplaatsen, bijvoorbeeld de ESC toets.

Noot: in principe willen we de submenu's verbergen met display:none, maar dat kan een probleem zijn tijdens de navigatie met sommige screenreaders. Het menu verschijnt visueel met een onFocus() event. Het onFocus event treedt in werking als we naar de link tabben. Maar met een screenreader doorloopt men de inhoud van een webpagina met pijl omlaag. Met JAWS, en met de standaardinstellingen van NVDA activeert dit niet het onFocus event. Het menu zal dus niet verschijnen voor een gebruiker van JAWS of NVDA die het menu doorloopt. Om dit probleem te omzeilen, gebruiken we eerder een 'screenreader only' techniek (offscreen of clipping) om de submenu's te verbergen. Dat betekent dat, zelfs als ze visueel enkel verschijnen met hover en focus, de submenu's altijd zichtbaar zijn voor screenreadergebruikers.