Hamburgermenu toegankelijk maken: zo werkt het op mobiel voor iedereen

Drie horizontale streepjes rechtsboven: bijna iedereen weet inmiddels dat daar het menu achter zit. Daarom gaan veel bouwers ervan uit dat het icoon voor zich spreekt. Voor een ziende bezoeker meestal wel. Maar een screenreader leest geen streepjes voor. Die zegt “knop”, of in het slechtste geval helemaal niets, omdat het icoon in een element zit dat niet eens als knop herkend wordt. Een hamburgermenu toegankelijk maken is gelukkig geen groot project. Het gaat om vijf dingen die u op uw telefoon in een paar minuten kunt nalopen.

1. De knop moet een knop zijn

Het icoon zit vaak in een <div> of <span> met een klikfunctie via JavaScript. Met de muis of een vinger werkt dat. Met een toetsenbord, een schakelaar of spraakbediening niet, omdat zo’n element geen focus krijgt en niet reageert op Enter. Gebruik een echte <button>. Die is standaard bereikbaar met Tab en reageert op Enter en spatie, zonder extra code.

2. Geef de knop een naam die iets zegt

Een knop met alleen een icoon heeft een tekstnaam nodig. De duidelijkste oplossing is het woord “Menu” zichtbaar naast of onder de streepjes. Dat helpt ook oudere bezoekers en mensen die het icoon niet kennen. Kiest u voor alleen het icoon, geef de knop dan een verborgen label:

<button type="button" class="menu-knop"
        aria-expanded="false" aria-controls="mobiel-menu">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="sr-only">Menu</span>
</button>

<nav id="mobiel-menu" aria-label="Hoofdmenu" hidden>
  ...
</nav>

Houd de naam kort en gelijk: “Menu” is beter dan “Klik hier om de navigatie te openen”. De status open of dicht geeft u door met aria-expanded, dus u hoeft de naam niet te veranderen naar “Menu sluiten”. Spraakbediening werkt ook beter met een naam die overeenkomt met wat er te zien is. Zegt iemand “klik Menu”, dan moet de knop zo heten. Dezelfde regel geldt voor andere knoppen met alleen een icoon, zoals een zoekvergrootglas of een winkelmandje.

3. De focus gaat mee het menu in

Na het openen hoort de volgende Tab bij het eerste menu-item te komen. Dat gaat vanzelf goed als het menu in de code direct na de knop staat. Staat het menu ergens anders in de HTML, bijvoorbeeld onderaan de pagina, dan springt de focus eerst door de hele pagina voordat hij in het menu komt. Dat valt onder WCAG 2.4.3 (focusvolgorde).

Bedekt het menu het hele scherm, dan is het in feite een modaal venster. Zorg dan dat de focus binnen het menu blijft zolang het open staat. Anders tabt iemand naar links op de pagina eronder die hij niet kan zien. Hoe dat werkt, staat uitgebreider in de uitleg over pop-ups en modale vensters.

4. Het menu moet ook weer dicht kunnen

Het lijkt vanzelfsprekend, maar het gaat vaak mis. Controleer:

• Escape sluit het menu en zet de focus terug op de menuknop.
• De sluitknop is bereikbaar. Bij menu’s die het scherm vullen, verschijnt soms een kruisje bovenaan dat helemaal achteraan in de tabvolgorde staat. Zet het vooraan, of laat dezelfde knop het menu openen en sluiten.
• Het kruisje heeft ook een naam, net als de streepjes.
• Na het kiezen van een link op dezelfde pagina, bijvoorbeeld een anker naar “Contact” verderop, sluit het menu zich.

5. Plaats en grootte van de knop

De meeste sites zetten de knop rechtsboven. Dat is voor rechtshandige duimen op een grote telefoon net buiten bereik, maar het is wel waar mensen hem zoeken. Wijk daar niet zomaar van af. Belangrijker is dat de knop groot genoeg is. WCAG 2.2 vraagt een doelgebied van minimaal 24 bij 24 CSS-pixels, of genoeg ruimte eromheen. Dun getekende streepjes van 18 pixels breed met een klikgebied van precies die streepjes vallen daar snel onder. Maak de knop zelf groter met padding, ook als het icoon klein blijft. Zie ook de 24-pixelregel voor knoppen.

Let ook op de plek op desktop met inzoomen. Wie op een laptop inzoomt tot 400%, krijgt vaak de mobiele weergave te zien. Het hamburgermenu moet dan dus ook met een muis en toetsenbord werken, niet alleen met aanraken.

Is een hamburgermenu toegankelijk genoeg, of kiest u iets anders?

Een hamburgermenu verstopt de navigatie. Voor een site met vier of vijf pagina’s kunt u overwegen om de items op mobiel gewoon zichtbaar te laten, bijvoorbeeld in een tweede regel onder het logo. Dan hoeft niemand eerst te raden waar de rest zit. Bij een webshop met tientallen categorieën is een uitklapmenu wel logisch, eventueel aangevuld met een zichtbare zoekbalk en een paar belangrijke links zoals “Contact” en “Winkelwagen” naast de menuknop.

Submenu’s binnen het mobiele menu volgen dezelfde regels als op desktop: een aparte knop per submenu met aria-expanded. Hoe dat in elkaar zit, leest u in het artikel over een menu dat met toetsenbord en screenreader werkt.

Zelf testen op uw telefoon

1. Zet VoiceOver (iPhone) of TalkBack (Android) aan via de toegankelijkheidsinstellingen. Oefen eerst even hoe u ermee veegt en tikt.
2. Veeg naar de menuknop. Wat wordt er voorgelezen? U wilt iets horen als “Menu, knop, samengevouwen”.
3. Tik twee keer om te openen. Hoort u “uitgevouwen”? Veeg verder: komt u direct bij de menu-items?
4. Sluit het menu weer. Lukt dat zonder te zoeken?
5. Herhaal op een laptop: maak het venster smal, leg de muis weg en doe hetzelfde met Tab, Enter en Escape.

Hoort u iets vreemds, zoals “knop” zonder naam of een reeks onbekende woorden, dan weet u waar het probleem zit. Meer hulp bij het testen met voorleessoftware vindt u bij uw website testen met een screenreader. Voor de toetsenbordkant is er de pagina over toetsenbordnavigatie.

Waar zit de oplossing in WordPress?

Het mobiele menu komt bijna altijd uit het thema of de paginabouwer. Een ontbrekend label of een <div> in plaats van een knop is meestal met een kleine aanpassing in een childthema op te lossen. Bij paginabouwers zit de instelling soms verstopt in het menu-element zelf, onder een optie als “aria-label” of “toegankelijkheid”. Controleer na elke thema-update even of uw aanpassing er nog staat. Hoe het menu past in een bredere aanpak, leest u in onze gids voor een toegankelijke website.