Toegankelijke uitklapmenu's

Bart Simons op 29/04/2015 - reageer als eerste

Cet article en français: Menus déroulants accessibles

Links in een uitklapmenu verschijnen als je er met de muis over gaat. Hetzelfde is vaak moelijk of onmogelijk met het toetsenbord en screenreaders. We vatten de essentiële punten samen waarop u moet letten en geven voorbeelden van goede uitklapmenu's die voor alle gebruikers vlot toegankelijk zijn.

voorbeeld van een uitklapmenu met 4 niveaus

Algemene aanbevelingen

  • Structureer de links van het menu met een HTML-lijst met een of meerdere nesting niveau's.
  • Zorg ervoor dat alle niveau's van het uitklapmenu bereikbaar en activeerbaar zijn, ongeacht hoe men ermee interageert: met de muis, het toetsenbord, een screenreader en andere hulpmiddelen.

U kunt bijkomende informatie geven:

  • Markeer de geneste lijst als een navigatiemenu met <nav role="navigation">
  • Kondig aan dat de links van het eerste niveau van het menu dienen om een submenu te openen: aria-haspopup="true"
  • Kondig aan wat de status is van de elementen van het menu: open of gesloten, met aria-expanded="true" en aria-expanded="false"

Goede oplossingen

De goede oplossing hangt af van de context. Het is de bedoeling dat iedereen zich gemakkelijk kan oriënteren in de site en er gemakkelijk in kan navigeren.

We verdelen uitklapmenu's in twee catégorieën, met als belangrijkste verschillen:

  • wat men moet doen om het submenu te laten verschijnen: verschijnt het als de muis erover beweegt (hover) of moet men klikken? Verschijnt het met het toetsenbord met TAB of ENTER?
  • de manier waarop de submenu's zijn verborgen: offscreen (of clipping) of display:none.

Er bestaan heel wat combinaties. We hebben ervoor gekozen twee oplossingen voor te stellen die goed werken.

TAB en offscreen positioneren

Voorbeelden: responsive uitklapmenu gebaseerd op een voorbeeld van Simply Accessible en demo van een toegankelijk uitklapmenu voorgesteld door Accede Web. De eerste is responsive, de tweede niet, maar los daarvan is hun gedrag gelijkaardig.

uitklapmenu AnySurfer

uitklapmenu AnySurfer op mobile: verschijnt als geneste lijst

Het gedrag van het menu is als volgt:

  • Met de muis:
    • Het submenu verschijnt als de muis over het parent element beweegt.
    • Klikken op het parent element opent de bijhorende pagina.
  • Met het toetsenbord:
    • Het submenu verschijnt met TAB, als de focus op het parent element komt.
    • Met ENTER navigeert men naar de bijhorende pagina.
    • De inhoud van de geneste lijst kan van boven naar onder doorlopen worden met TAB, in de volgorde van de broncode.
  • Met een screenreader:
    • Het volledige menu is voortdurend zichtbaar als een eenvoudige geneste lijst want de submenu's zijn verborgen maar blijven zichtbaar voor een screenreader (offscreen of clipping). Het is dus niet nodig om aria-haspopup of aria-expanded te gebruiken.
    • Alle links van het menu zijn altijd zichtbaar in de linkslijst van de screenreader.
    • Het menu kan eenvoudig doorlopen worden met pijl omlaag, in de volgorde van de broncode.

Deze oplossing is aanbevolen als de links van het eerste niveau links zijn naar pagina's van de site.

Deze oplossing is niet praktisch als het uitklapmenu erg lang is want de gebruiker moet naar elke link tabben om het te doorlopen . In dit geval kan een skip link (ga naar inhoud) nuttig zijn.

ENTER en display:none

Voorbeeld: Adobe accessible mega menu.

uitklapmenu van Adobe

Het gedrag van het menu is als volgt:

  • Met het toetsenbord:
    • TAB doorloopt enkel de links van het eerste niveau, die zichtbaar zijn.
    • Het submenu verschijnt met ENTER.
    • TAB doorloopt het submenu als het verschenen is.
  • Met een screenreader:
    • Enkel het eerste niveau van het menu is voortdurend zichtbaar.
    • De submenu's zijn verborgen met display:none.
    • De screenreader kondigt aan dat het parent element dient om een uitklapmenu te laten verschijnen (dankzij aria-haspopup) en geeft aan of het menu momenteel uitgeklapt is of niet (dankzij aria-expanded).

Het grote voordeel van deze oplossing is dat een toetsenbbordgebruiker niet verplicht is alle niveau's van het menu met de tabtoets te doorlopen.

Voor ditzelfde gedrag met het toetsenbord zijn er drie varianten, afhankelijk wat de elementen van het eerste niveau van het menu doen:

  1. Enkel het submenu in- en uitklappen
  2. Het submenu uitklappen en een pagina van de site openen
  3. Enkel een pagina van de site openen (er is dan een aparte knop om het submenu in- en uit te klappen)

Eerste variant

De links van het menu dienen enkel om de submenu's in- en uit te klappen. Bij de links van het eerste niveau van het menu hoort geen pagina van de site.

  • Met de muis: het submenu verschijnt als men op het parent element klikt. Een tweede klik klapt het submenu weer in.
  • Met het toetsenbord: de eerste ENTER laat het submenu vrschijnen, de tweede ENTER klapt het weer in.

Het is een goede oplossing als er geen "landingspagina's" zijnop het eerste niveau van het menu.

Tweede variant

Voorbeeld op de pagina van het FWO

De links van het menu hebben een dubbele functie:

  • Met de muis: het submenu verschijnt als de muis over het parent element beweegt. Klikken op het parent element opent de bijhorende pagina
  • Met het toetsenbord: de eerste ENTER doet het submenu verschijnen. De tweede ENTER op dezelfde link opent de bijhorende pagina.

Dit type menu kan verwarring veroorzaken want dezelfde link heeft twee functies. Sommigen zullen niet begrijpen dat de link ook dient om een pagina te openen, en zullen die inhoud misschien niet ontdekken.

Derde variant

Voorbeeld op Screenfeed.

De links van het menu dienen om een pagina te openen en er is een aparte knop om het menu uit te klappen.

uitklapmenu 'poney' met een knop om het menu uit te klappen

Het is een goede oplossing als de elementen van het menu een dubbele functie hebben. Geef de knop een duidelijk opschrift.

Alternatief voor het uitklapmenu: submenu's op de pagina's

Voorbeeld: uitklapmenu op de site van de stad Leuven: het uitklapmenu onder "Ville de la bière" verschijnt niet met het toetsenbord en het is onzichtbaar met een screenreader. Maar als we op de link "Ville de la bière" klikken, vinden we een submenu dat dezelfde links bevat als het uitklapmenu:

uitklapmenu 'Ville de la bière' submenu in de linkerkolom dat dezelfde links bevat

  • Het submenu verschijnt als de muis erover beweegt.
  • Met het toetsenbord is het onmogelijk het submenu te laten verschijnen (niet met TAB en ook niet met ENTER).
  • Enkel het eerste niveau van het menu is voortdurend zichtbaar. De submenu's zijn verborgen met display:none.
  • Op alle pagina's die vanuit het menu bereikbaar zijn, is een submenu beschikbaar dat identiek is aan het uitklapmenu.

Dit kan een oplossing zijn als het uitklapmenu te lang is. Let er wel op dat het submenu op alle onderliggende pagina's gemakkelijk vindbaar is en dat het duidelijk is waarvan dit de subnavigatie is.

Vaak voorkomende fouten

We zien regelmatig uitklapmenu's die niet toegankelijk zijn. Dat kan verschillende oorzaken hebben. Vermijd alvast deze fouten:

  • Het uitklapmenu is enkel te doorlopen met de pijltjes, niet met TAB: dit gedrag verwacht men in een applicatie maar niet in een webpagina.
  • De ARIA-role-attributen menu, menubar of menuitem zijn gebruikt: deze rollen zijn bedoeld voor toepassingsmenu's en niet voor navigatiemenu's, en ze verbergen de semantiek die in de HTML-code aanezig was (zoals lijsten en links). Gebruik deze rollen dus niet voor navigatiemenu's.
  • TAB doorloopt de links van de submenu's maar ze worden niet zichtbaar. U moet ervoor zorgen dat de uitklappende gedeelten zichtbaar worden als ze focus krijgen.
  • De links van het uitklapmenu zijn toegankelijk maar verwijzen niet naar de aangekondigde pagina (voorbeeld: bug op een module van Superfish voor Drupal).
  • De links van het menu zijn geen links. Gebruik niet enkel onClick
  • Het menu is niet gestructureerd als een geneste lijst, de volgorde van de links is niet correct.

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>