Je zit in een restaurant en je twijfelt of je voor de cheeseburger zal gaan of misschien dit keer wel voor een bietenburger. Wat heb je dan nodig? Het hamburgermenu! Je zit al aan de cola als de ober langskomt bij je tafel met de menu’s. Je hebt veel honger en je pakt enthousiast het menu erbij. Alleen is het onleesbaar welke hamburgers er zijn, je kan met moeite wat rode tekst op een blauwe achtergrond onderscheiden. Je bent namelijk slechtziend en je hebt moeite met het lezen van tekst met een te laag contrast.
Gelukkig kunnen je tafelgenoten de tekst voorlezen, maar je had eigenlijk liever zelf het menu willen bekijken. Uiteindelijk zit je tevreden je burger op te eten, maar ontoegankelijke hamburgermenu’s blijven toch door je hoofd spoken.

In ons werk komen we weinig cheeseburgers tegen, maar wel vaak een (on)toegankelijk hamburgermenu. Wat is dit dan en wat voor problemen zien we vaak? En wanneer is een hamburgermenu dan wél toegankelijk? Dit gaan we behandelen in de driedelige reeks “Een (on)toegankelijk hamburgermenu”. In dit eerste artikel kijken we naar een de visuele kenmerken van het hamburgermenu. De komende weken vertel ik ook meer over de bediening en de techniek. Eet smakelijk en veel leesplezier!
Wat is een hamburgermenu?
Je hebt het vast al vaker op een site gezien: een menuknop met drie liggende horizontale streepjes. Door de vorm heet dit ook wel een ‘hamburgermenu’. In de animatie hieronder zie je het hamburgermenu in actie op onze website.
Op sommige sites is er altijd zo’n knop aanwezig waarmee het menu kan worden geopend. Op de meeste websites verschijnt het hamburgermenu alleen als je inzoomt of als je de website bekijkt op je mobiel. Het menu is dan niet meer standaard zichtbaar op de pagina en je moet dan op de hamburgerknop klikken om het menu te openen.
Eén hamburgermenu, meerdere succescriteria
Als op een webpagina een hamburgermenu aanwezig is, zijn er een aantal zaken waar we op letten. In deze reeks zullen we een aantal toegankelijkheidsproblemen toelichten die we vaak tegenkomen bij een hamburgermenu. Dit betreft niet één bepaald type probleem, maar dit zijn verschillende problemen die onder verschillende principes en succescriteria vallen.
Geen verlies van content of functionaliteit
Bij een toegankelijkheidsonderzoek kijken we ook naar webpagina’s als deze zijn ingezoomd. Het kan voor slechtzienden van belang zijn om de pagina in de ingezoomde versie te bekijken; de content op de pagina wordt dan vergroot en is beter te lezen. Wij testen dit bij een resolutie van 1024 x 768 pixels en door in de browser in te zoomen naar 200%. Vaak verschijnt dan ook het hamburgermenu.
Voor succescriterium 1.4.4 is het van belang dat er geen verlies van content of functionaliteit optreedt na het inzoomen. Als in het standaardmenu bijvoorbeeld een “Contact”-link aanwezig is, moet deze ook aanwezig zijn na het inzoomen. Als deze link eerst in het standaardmenu stond, moet deze link na inzoomen dus ook op de pagina te vinden zijn, bijvoorbeeld in het hamburgermenu. Als deze link ontbreekt op de ingezoomde pagina, is dit een verlies van content en functionaliteit. Een slechtziende die inzoomt, zal de link “Contact” niet kunnen vinden en kan hierdoor niet naar de contactpagina navigeren.
In de volgende animatie zie je hoe de hoofdnavigatie verandert in een hamburgermenu bij inzoomen.
Het komt ook wel eens voor dat de informatie na inzoomen wel aanwezig is, maar bijvoorbeeld over elkaar heen valt of deels uit beeld valt. Wat we ook wel eens zien, is dat een hamburgermenu geopend kan worden, maar dat er niet gescrold kan worden om de onderste links van het menu in beeld te brengen. Een slechtziende die inzoomt, kan dan een deel van het menu zien, maar mist nog informatie. Het is dus de bedoeling dat na inzoomen de links in het menu leesbaar en bereikbaar zijn.
Bij succescriterium 1.4.10 testen we bij een breedte van 320 pixels (of bij een breedte van 1280 pixels en 400% ingezoomd). Dit is hoe je de website ook op je telefoon bekijkt. In deze herschaalde versie is het hamburgermenu meestal aanwezig. Ook dan mag er geen verlies van content of functionaliteit zijn. Bij dit succescriterium komt er nog bij dat niet horizontaal gescrold mag worden om de tekst te lezen. Bij de menuknop zal dit waarschijnlijk niet snel problemen opleveren, maar bij tekst in het menu is het wel belangrijk om hierop te letten.
Voldoende contrast
Soms staat er alleen een icoon van drie horizontale strepen op de knop om het menu te openen, maar soms staat er ook tekst als “Menu”. Voor slechtzienden is het van belang dat tekst en niet-tekstuele content (zoals informatieve iconen) voldoende contrast hebben.

Bij tekst is het afhankelijk van de grootte van de tekst wat de contrast-eis is. Voor kleinere tekst is de contrasteis minimaal 4,5:1 en voor grote tekst is dat 3,0:1. Dit is dus van belang als er tekst op de knop staat en voor de tekst van de links in het menu zelf.
Als op de hamburgerknop alleen een icoon van drie horizontale strepen te zien is, dan moet dit icoon voldoende contrast hebben. Een slechtziende moet dit icoon namelijk kunnen onderscheiden van de achtergrond om de betekenis van de knop te begrijpen. Het gaat nu dus om het contrast van niet-tekstuele content. Daarvoor geldt een minimaal contrast van 3,0:1.
Een duidelijk label
Vaak staat er alleen het icoon met de drie horizontale strepen op de hamburgerknop. Veel mensen weten wel wat de functie van deze knop is, maar voor sommige gebruikers kan het onduidelijk zijn dat dit een knop is om het menu te openen. Het plaatsen van de tekst “Menu” kan het duidelijker maken waar deze knop voor is bedoeld. Als er alleen een icoon te zien is, voldoet dit wel. Tekst kan het doel van de knop echter wel verduidelijken.

Niet voor iedereen zijn de drie streepjes namelijk logisch of herkenbaar als menu. Dit heeft te maken met het begrip van beelden, net zoals er ook “tekstbegrip” is. Het gebruik van het hamburger-icoon is voor de meeste mensen duidelijk, maar ga hier niet zomaar vanuit.
Bediening van het hamburgermenu
In dit artikel zijn een aantal belangrijke aandachtspunten benoemd voor het ontwerp van het hamburgermenu. In het volgende artikel vertel ik meer over de aandachtspunten voor de bediening van het hamburgermenu. Hier kun je achterhalen waar je allemaal rekening mee moet houden en hoe je zorgt dat iemand met hulpsoftware ook bij deze belangrijke navigatie komt.