We gebruiken cookies om ervoor te zorgen dat onze website zo soepel mogelijk draait. Als je doorgaat met het gebruiken van de website, gaan we er vanuit dat ermee instemt.OkCookiemelding sluiten
  • Door naar de hoofd inhoud
  • Spring naar de voettekst
Logo DDAI
  • Kennisbank
  • Aanbieders
  • Waarmerk
  • Aanmelden
  • Nieuws
  • Contact
  • Ga naar zoeken
Home » Kennisbank » Techniek » Toetsenbord » Een (on)toegankelijk hamburgermenu (bediening)

Een (on)toegankelijk hamburgermenu (bediening)

Marijn Brilman
Marijn Brilman van Cardan Technobility
Aantal keer bekeken643 11 november 2021 7 minuten lezen

Heb je na het lezen van het eerste artikel in de reeks over het hamburgermenu nog steeds honger? In het restaurant wil je natuurlijk dat de bediening goed is. Maar hoe zorg je er voor dat iedereen het menu kan bedienen en ook alle links kan bereiken? Hoe voorkom je irritatie door slechte bediening?

Ook als je geen muis gebruikt, maar de website bezoekt met het toetsenbord of hulpapparatuur, is het van belang dat dit belangrijke navigatie-onderdeel op je site goed werkt. In dit tweede artikel kijken we naar de bediening van het hamburgermenu.

Bediening met het toetsenbord

Als je met de muis op de hamburgerknop klikt, wordt het menu geopend. In een toegankelijkheidsonderzoek testen we of content ook met het toetsenbord te bedienen is. Dit is van belang voor mensen die geen muis kunnen gebruiken, bijvoorbeeld vanwege een motorische beperking. Ook blinden en slechtzienden kunnen het toetsenbord gebruiken in plaats van de muis.

Er kunnen verschillende toegankelijkheidsproblemen voorkomen rondom bediening met het toetsenbord. Hier bespreek ik een aantal problemen per succescriterium.

Het menu moet bedienbaar zijn met het toetsenbord
Succescriterium 2.1.1

Geen focus en/of bediening mogelijk bij de hamburgerknop

Het kan voorkomen dat de hamburgerknop geen toetsenbordfocus kan ontvangen. Met het toetsenbord kan je via Tab door een pagina navigeren. Interactieve onderdelen op de pagina moeten toetsenbordfocus kunnen ontvangen. Een gebruiker kan een knop of link die focus heeft dan vervolgens bedienen met het toetsenbord.

Als de hamburgerknop geen toetsenbordfocus kan ontvangen, zal deze knop worden overgeslagen als je er naartoe wilt navigeren. De knop zit dan niet in de focusvolgorde op de pagina. Als de toetsenbordfocus niet op de knop kan komen, kan de knop ook niet worden bediend met het toetsenbord.

Het kan ook voorkomen dat de knop wel focus krijgt, maar niet bediend kan worden met Enter of Spatie. Hierdoor kan het menu niet geopend worden.

Stel je voor dat je met de muis niet naar een menuknop kan navigeren. Dat zou een groot probleem zijn. Of dat je wel met de muisaanwijzer op een menuknop kan staan, maar dat er niets gebeurt als je klikt. Dat zou waarschijnlijk wel wat frustraties opleveren bij gebruikers!

Marijn Brilman

Geen focus en/of bediening mogelijk bij links in het menu

Niet alleen het menu moet met het toetsenbord geopend kunnen worden, ook de bediening van de elementen in het menu is belangrijk. Het kan gebeuren dat een toetsenbordgebruiker niet naar de links in het menu kan navigeren om deze te bedienen. Of deze links kunnen wel focus ontvangen, maar vervolgens niet bediend worden met het toetsenbord. Ook hier kan het de oorzaak zijn dat er geen standaard HTML-elementen als links zijn gebruikt.

Het menu kan niet gesloten worden met het toetsenbord

Tot slot kan het nog gebeuren dat het hamburgermenu niet met het toetsenbord gesloten kan worden. De toetsenbordfocus kan dan bijvoorbeeld verder gaan naar andere onderdelen op de pagina, maar het menu valt hier (deels) overheen. Het is goed als er een zichtbare knop aanwezig is om het menu te sluiten. Het is ook goed als het menu kan worden gesloten met Escape of dat het menu sluit als de focus buiten het menu komt.

Er mag geen toetsenbordval optreden
Succescriterium 2.1.2

Bij dit succescriterium zien we niet vaak problemen, maar als het wél voorkomt, is het meteen een groot probleem. Een toetsenbordval wil zeggen dat iemand vastloopt die het toetsenbord gebruikt. Iemand opent bijvoorbeeld het menu met het toetsenbord, maar kan vervolgens niet meer vooruit of terug navigeren met het toetsenbord. Het menu kan ook niet meer gesloten worden en de pagina kan niet meer worden bereikt. Dit heeft consequenties voor het gebruik van de hele pagina en is dus belangrijk om rekening mee te houden.

Meme: "Trapped" met een slapende man bij z'n toetsenbord.

De volgorde van de toetsenbordfocus moet logisch zijn
Succescriterium 2.4.3

Soms kan een hamburgerknop goed bediend worden met het toetsenbord en kunnen ook alle links in het menu bediend worden. Het is hierbij echter wel van belang dat dit in een logische volgorde gebeurt, want anders kan dit verwarrend zijn voor toetsenbordgebruikers. Als een hamburgermenu wordt geopend, is het de bedoeling dat de toetsenbordfocus daarna naar de content in het geopende menu gaat.

We zien wel eens dat de toetsenbordfocus na het openen van een menu naar andere onderdelen buiten dit menu gaat, bijvoorbeeld naar een link op de pagina die niet in het menu staat. Dit is een onlogische volgorde. Dit is tevens een probleem onder succescriterium 2.4.7, omdat dan de focus tijdelijk niet zichtbaar is.

Het geopend menu beslaat de hele pagina en de focus verdwijnt hierachter

Wat we ook regelmatig zien, is dat na inzoomen het geopende hamburgermenu de hele pagina beslaat. De achterliggende pagina is dan niet meer zichtbaar. De toetsenbordfocus gaat vaak wel na het openen van het menu langs alle links in het menu en dit is de bedoeling. Daarna gaat de toetsenbordfocus echter vaak verder over onderdelen die op de achterliggende pagina staan. Omdat het menu nog is geopend, is het dus niet logisch dat de focus dan naar onderdelen gaat die niet in dit menu staan.

Er zijn meerdere oplossingen mogelijk voor dit probleem. Het menu kan bijvoorbeeld automatisch gesloten worden nadat de toetsenbordfocus op het laatste onderdeel van het menu heeft gestaan en er verder wordt genavigeerd. Een andere optie is dat de focus in het geopende menu blijft circuleren totdat deze weer gesloten wordt door de gebruiker.

Zowel voor zienden als blinden van belang

Succescriterium 2.4.3 is zowel van belang voor ziende toetsenbordgebruikers als voor blinden. Iemand die vanwege een motorische beperking het toetsenbord gebruikt, kan op de pagina zien waar de toetsenbordfocus zich bevindt. Dit is meestal zichtbaar door een kader dat om het item staat dat de focus heeft. Als de focus opeens naar onderdelen gaat die niet in het menu staan, ziet de gebruiker de focus in een onlogische volgorde over de pagina springen tijdens het navigeren.

Een blinde gebruiker ziet de toetsenbordfocus niet, maar hoort door voorleessoftware waar de focus zich bevindt. De link waar de focus op staat, zal worden voorgelezen. Als er opeens links worden voorgelezen die de focus hebben, maar die niets met het menu te maken hebben, kan dit erg verwarrend zijn.

De toetsenbordfocus moet zichtbaar zijn
Succescriterium 2.4.7

Zoals net is beschreven, kunnen ziende toetsenbordgebruikers door de focusindicator zien waar de toetsenbordfocus zich bevindt. Je ziet dan bijvoorbeeld dat de focus op de hamburgerknop staat en je kan er dan voor kiezen om deze knop te bedienen. Het komt soms voor dat de toetsenbordfocus niet zichtbaar is op de hamburgerknop , maar de knop kan wel bediend worden. Dit is erg onhandig voor ziende toetsenbordgebruikers. Als je de muis gebruikt, zou het ook erg lastig zijn als je niet ziet waar de muisaanwijzer op staat.

Dit kan voorkomen bij de hamburgerknop, maar ook bij de links in het geopende menu. Als de focus op een onderdeel staat, moet het zichtbaar zijn waar dat is. Dit kan bijvoorbeeld door de standaard focusindicator van de browser te gebruiken. Er kan ook een aangepaste focusindicator worden gebruikt, maar deze moet dan wel voldoende contrast hebben. Als de focusindicator namelijk een te laag contrast heeft, kan het voor slechtzienden nog niet zichtbaar zijn waar de focus zich bevindt.

In onderstaande animatie zie je hoe de focus overal duidelijk zichtbaar is en hoe het menu weer sluit als je aan het eind bent gekomen.

De focus komt op onzichtbare onderdelen

Ook komt het soms voor dat de focus terechtkomt op onzichtbare onderdelen, bijvoorbeeld op het normale hoofdmenu dat is verborgen. Dit komt doordat deze links wel nog in de code van de pagina staan, ook al zijn ze visueel verborgen. Als er dan over de pagina wordt genavigeerd met de tabtoets, gaat de focus langs al deze links, terwijl ze niet zichtbaar zijn. Het is dan dus niet duidelijk waar de focus op staat, omdat deze langs onzichtbare onderdelen gaat.

Een vergelijkbare situatie ontstaat bij het in- en uitklappen van het hamburgermenu. Als het menu gesloten is, zijn de links uit het menu visueel niet zichtbaar. Soms komt het voor dat de toetsenbordfocus dan wel langs deze links op de pagina gaat, ook al is het menu ingeklapt.

Dit succescriterium geldt dus ook andersom: de focus mag niet op onzichtbare onderdelen komen. Het is dan immers niet zichtbaar waar de focus op staat.

Probeer het zelf uit

Dit waren een aantal problemen die voor kunnen komen bij de bediening van het hamburgermenu met het toetsenbord. Als je zelf een hamburgermenu op je website hebt, kun je zelf eens proberen of je deze zonder muis kan bedienen. Let hierbij dus ook op of je niet vastloopt, of je kan zien waar de focus zich bevindt en of de focusvolgorde logisch is.

In het volgende artikel vertellen we graag meer over de aandachtspunten voor de techniek van het hamburgermenu.

Footnotes

  1. Problemen met toetsenbordbediening treden vaak op als er geen standaard HTML-element is gebruikt in de code voor de hamburgerknop. Een standaard HTML button-element (een element voor een knop) kan met het toetsenbord bediend worden. Als er echter bijvoorbeeld een div-element wordt gebruikt dat met JavaScript interactief is gemaakt, dan kunnen er problemen zijn met de toetsenbordbediening. Dit element ontvangt namelijk niet standaard toetsenbordfocus en kan niet standaard met het toetsenbord bediend worden (dit element heeft deze eigenschappen niet automatisch in zich). Kies dus voor standaard HTML-elementen of zorg dat niet-standaard elementen toetsenbordfocus kunnen ontvangen en bedienbaar zijn met het toetsenbord. Een manier om niet-standaard HTML-elementen toetsenbordfocus te laten ontvangen, is bijvoorbeeld door het attribuut en de waarde tabindex="0" in het element te plaatsen. Let op: hierdoor kan het element wel focus ontvangen, maar hierdoor is het element nog niet automatisch te bedienen met het toetsenbord. Het heeft altijd de voorkeur om standaard HTML-elementen te gebruiken. ↩

Over de auteur

Marijn Brilman
  • Volg Marijn Brilman op LinkedIn
Marijn Brilman van Cardan Technobility

Marijn werkt sinds een paar jaar bij Cardan Technobility en houdt zich bezig met onderzoeken, hertests en quickscans volgens de WCAG-richtlijnen. Ze merkt dat er in de afgelopen jaren steeds meer aandacht is gekomen voor digitale toegankelijkheid en schrijft hier graag over!

Footer

Actueel

  • Nieuws
  • Agenda
  • Opleiding & training
  • DDAI - Dutch Digital Accessibility Index op LinkedIn
  • DDAI - Dutch Digital Accessibility Index op Facebook
  • DDAI - Dutch Digital Accessibility Index op Twitter

DDAI

  • Startpunt toegankelijkheid
  • Aanbieders
  • Over DDAI

Mijn DDAI

  • Aanmelden
  • Aanmeldprocedure en kosten
  • Mijn account

Kennisbank

De kennisbank van DDAI is jouw wegwijzer op het gebied van digitale toegankelijkheid.

Ga naar de kennisbank

  • Privacyverklaring
  • Algemene voorwaarden
  • Sitemap
  • Over deze website
  • Toegankelijkheidsverklaring
  • Logo Waarmerk drempelvrij.nl 2 sterren Ga naar het certificaat van toegankelijkheid

Website door Cardan en PEP