Hoe beter de techniek van de chefkok, hoe lekkerder de hamburger. Dat geldt ook voor ons hamburgermenu. Eerder keken we al naar aandachtspunten bij het ontwerp en de bediening van het hamburgermenu. In dit laatste deel uit de reeks over het hamburgermenu kijken we naar de techniek.
Software kan de naam, rol en status bepalen
Dit succescriterium is onder andere van belang voor mensen met een visuele beperking. Als software de naam, rol en status van een hamburgerknop kan bepalen, dan kan voorleessoftware dit voorlezen. Er wordt dan bijvoorbeeld voorgelezen: “Menu, knop, samengevouwen”. Gebruikers van hulpsoftware weten dan wat de naam is (“Menu”), wat voor rol dit item heeft (“knop”) en wat de status is van deze knop (“samengevouwen”, ofwel ingeklapt).
Naam
Als een icoon wordt gebruikt op de hamburgerknop, moet er een alternatieve tekst worden gegeven voor dit icoon (zoals “menu”). Dit valt onder succescriterium 1.1.1. Een icoon is geen tekst, er is dus een alternatieve tekst nodig die aangeeft wat voor icoon dit is. De alternatieve tekst moet in dit geval niet beschrijven hoe het icoon eruit ziet (zoals bijvoorbeeld “hamburger” of “drie horizontale strepen”). Omdat dit een knop is, moet het doel van het icoon beschreven worden in de alternatieve tekst (“menu”). Dit is dan de (toegankelijkheids)naam van de knop.
Er zijn meerdere manieren mogelijk om een alternatieve tekst te geven aan een icoon.
- Als een img-element is gebruikt voor het icoon, kan de alternatieve tekst in het alt-attribuut van het img-element geplaatst worden.
- Als het icoon een SVG-element is, kan gebruik worden gemaakt van het title-element binnen het SVG-element.
- Als het icoon met CSS is geplaatst, kan een visueel verborgen tekst worden geplaatst.
Let op: verberg deze tekst niet metdisplay:"none"ofvisibility="hidden", want dan is deze tekst ook verborgen voor hulpsoftware. - Als een button-element wordt gebruikt, kan ook een title-attribuut op dit element worden gebruikt om de knop een naam te geven.
- Ook kan een aria-label worden gebruikt op een knop om deze een naam te geven.
Let op: een aria-label overschrijft andere tekst die mogelijk in een element staat.
Rol
Wanneer een standaard button-element wordt gebruikt voor de menuknop, kan software de rol bepalen van dit element (een knop). Als een niet-standaard element wordt gebruikt voor een knop, zoals een div-element, dan kan WAI-ARIA gebruikt worden om dit element de rol ‘knop’ te geven: role="button".
Let op: dit betekent niet automatisch dat de knop met het toetsenbord bediend kan worden! Standaard HTML-elementen hebben altijd de voorkeur boven WAI-ARIA rollen.
Status
De status (in- of uitgeklapt) kan op meerdere manieren worden aangegeven. Dit kan bijvoorbeeld door de naam aan te passen, afhankelijk van de functie van de knop: “Open menu” of “Sluit menu”. Het is dan indirect duidelijk dat het menu is ingeklapt of uitgeklapt. Er kan ook een aria-expanded attribuut gebruikt worden met de waarde die wordt aangepast afhankelijk van de status: aria-expanded="false" (ingeklapt) en aria-expanded="true" (uitgeklapt).
Soms is de status helemaal niet aangegeven en het komt ook voor dat de status verkeerd is aangegeven. De knop heet dan bijvoorbeeld “Open menu”, terwijl het menu al geopend is.
De eerste regel van WAI-ARIA? Gebruik geen ARIA, tenzij je echt niet anders kan.
Marijn Brilman
Voorleessoftware zegt: “Leeg”
Het komt wel eens voor dat er een hamburgerknop is met het bekende icoon van de drie horizontale strepen. In de code is dan een div-element gebruikt voor deze knop. Een div-element kan voor van alles gebruikt worden; het kan dienen als container voor andere elementen in de code. Een div-element heeft niet de rol “knop” in zich. Het icoon van de hamburger heeft soms geen alternatieve tekst en er is ook geen status aangegeven. Als voorleessoftware op dit element staat, kan er dus niets worden voorgelezen.
De naam, rol en status kunnen niet worden bepaald. Het is dan voor een blinde niet duidelijk dat dit een knop is, wat deze knop doet en of het menu is ingeklapt of uitgeklapt. Dit is niet alleen van belang voor blinden, maar ook voor slechtzienden die de pagina ingezoomd bekijken en daarbij voorleessoftware gebruiken als ondersteuning. Zorg er dus voor dat software deze informatie kan bepalen, zodat hulpsoftware de informatie kan voorlezen. Want anders krijg je iets als: “Computer says no(thing)”.
Code hamburgerknop Technobility.nl
In de animatie hieronder is de HTML code van de hamburgerknop van technobility.nl te zien in de browser Google Chrome. In de code is een HTML button-element gebruikt. Hierdoor kan software bepalen dat de rol een knop (role="button") is. Er is een visueel verborgen tekst gebruikt om de knop een naam te geven: “Menu openen”. Om de status aan te geven is er een aria-expanded attribuut gebruikt. De waarde daarvan is nu “false”, want het menu is namelijk ingeklapt. In het tabblad “Accessibility” in het paneel met de code is te zien dat software de naam, rol en status kan bepalen van deze knop. Als het menu wordt geopend zie je ook dat de waarde veranderd in “true” en dat het tekstalternatief veranderd in “Menu sluiten”.
Nog een toetje?
In deze reeks keken we naar een aantal veelvoorkomende problemen bij hamburgermenu’s. Er kunnen natuurlijk nog andere problemen voorkomen die hier niet genoemd zijn, maar hopelijk heb je hierdoor een goed beeld van zaken waarmee rekening gehouden moet worden.
Zit je na het lezen van dit hele artikel vol? Of heb je nog trek in een nagerecht? Je kan na het lezen van dit artikel eens naar het hamburgermenu op je eigen website kijken (of op een website die je veel gebruikt). Hoe toegankelijk is het hamburgermenu? Of kijk dit filmpje waarin je onder andere een ontoegankelijk en een toegankelijk hamburgermenu kan zien en kan horen wat voorleessoftware dan voorleest.
Het hamburgermenu is een belangrijk onderdeel op de website. Het zorgt ervoor dat je kan kiezen naar welke pagina je wilt. Wij willen graag dat iedereen hamburgermenu’s kan gebruiken. Hulp nodig? In ons aanbieders-overzicht staan diverse specialisten die je kunnen helpen.