Een uitklapmenu dat niet met toetsenbord werkt

De toegankelijkheidstutorials van W3C leggen uit dat de gegeven technieken webcontent bruikbaarder maken voor mensen met een beperking en dat dit de ervaring voor iedereen kan verbeteren. Een menu is een onderdeel waar dit praktisch toe doet: het is de weg naar al je andere pagina's. De W3C-bron beschrijft dit niet specifiek voor menu's; het is een redactionele toepassing.

Deze test is een snelle handmatige controle met het toetsenbord. Ze toont zichtbare problemen, maar:

• ze bewijst geen volledige toegankelijkheid of naleving van een norm;
• ze vervangt geen test met een screenreader of een professionele audit;
• ze zegt niets over juridische verplichtingen; daarvoor raadpleeg je een gespecialiseerde adviseur.

Wat je er wel mee bereikt: een concrete, reproduceerbare lijst van wat niet werkt, die je kunt doorgeven.

Een betrouwbare test vraagt een vaste opstelling, anders vergelijk je appels met peren.

1. Kies één browser en noteer naam en versie.
2. Open de startpagina in een nieuw venster, op desktopbreedte.
3. Leg de muis weg. Gebruik vanaf nu alleen het toetsenbord.
4. Noteer de testdatum en het type apparaat.
5. Herhaal later op smalle schermbreedte, want menu's gedragen zich daar vaak anders.

Zet ook een schermopname (video) klaar als je dat kunt, zodat je webbouwer het gedrag letterlijk ziet. Dit is vooral nuttig omdat het zichtbaar maakt waar de focus staat, iets wat in tekstbeschrijvingen snel vaag blijft.

Doorloop deze vijf controles en noteer per controle 'werkt', 'werkt deels' of 'werkt niet', met een korte beschrijving van wat je zag.

1. Bereikbaar met Tab: kun je het menu-item bereiken door te tabben, en zie je duidelijk welk element de focus heeft?
2. Openen: opent het submenu met Enter of spatie op het hoofditem?
3. Navigeren binnen het menu: kun je de submenu-items bereiken en kiezen zonder muis?
4. Sluiten met Escape: sluit de Escape-toets het geopende menu?
5. Focus na sluiten: waar staat de focus nadat het menu dicht is? Een gangbare verwachting is dat de focus terug op het item staat dat het menu opende; noteer in elk geval of de focus zichtbaar en logisch blijft.

Let ook op een valkuil: menu's die enkel openen bij muis-hover zijn met het toetsenbord niet te openen. Noteer dat expliciet als je ziet dat Enter niets doet maar hover wel werkt.

Dit zijn richtingen, geen vaste diagnoses. De exacte oorzaak hangt af van hoe jouw site gebouwd is, en dat kun je van buitenaf niet altijd zien.

Een goede melding bespaart je een heen-en-weer van mails. Gebruik dit sjabloon en vul het in met je eigen bevindingen. Het onderstaande is een fictief voorbeeld van invoer, zonder resultaat of tijdsbelofte.

Pagina: startpagina. Browser en versie: zoals genoteerd. Schermbreedte: desktop. Stappen: tab naar het item 'Diensten', druk op Enter. Verwacht: submenu opent en focus gaat naar het eerste subitem. Gezien: er gebeurt niets bij Enter, het menu opent enkel bij muis-hover. Escape-toets: niet getest omdat het menu niet opent.

Vermeld per melding steeds: pagina, browser, stappen, verwacht gedrag en gezien gedrag. Voeg een opname toe als je die hebt. Vraag je webbouwer ook welke oplossing hij of zij voorstelt en hoe jullie de herstelling samen controleren, bijvoorbeeld door dezelfde vijf controles opnieuw te doorlopen.

Herhaal na elke aanpassing exact dezelfde vijf controles in dezelfde browser, en test ook een tweede browser en een smal scherm. Zo voorkom je dat een fix op desktop een ander probleem op mobiel veroorzaakt.

Een uitklapmenu kan ook een prestatiekant hebben. De MDN-pagina over webprestaties beschrijft prestaties als zowel objectieve metingen als de ervaren gebruikersbeleving, en vermeldt onder meer hoe snel de pagina reageert en hoe vloeiend inhoud zich gedraagt bij interactie. Als eigen controle kun je nagaan of het menu zonder merkbare vertraging reageert en of de bediening niet haperig aanvoelt; dat is een redactionele suggestie, geen uitspraak van de bron. Wie hier dieper in wil, vindt in de cursus Learn Performance van web.dev een inleiding op onderwerpen zoals het laden van JavaScript.

Wil je daarnaast weten welke zichtbare signalen je website publiek toont, bekijk je site dan via Marketing Scan. Die scan beoordeelt publieke signalen en voert niet alle bovenstaande toetsenbordcontroles uit.