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
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
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.
De volgorde van de toetsenbordfocus moet logisch zijn
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
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.