Hoe maak je een uitklapmenu toegankelijk?
Met drie dingen: een echte knop om het te openen, een status die doorgeeft of het open of dicht staat, en bediening met het toetsenbord.
Doe je die drie, dan werkt je menu voor iedereen. Laat je er één weg, dan struikelt een deel van je bezoekers.
Het uitklapmenu is niet toevallig het onderdeel waar ik de meeste problemen tegenkom.
Begin met een echte knop
Het element dat het submenu opent, hoort een knopelement te zijn. Dan is het bereikbaar met de tabtoets en reageert het op Enter en de spatiebalk.
Is het hoofdmenu-item ook een link naar een eigen pagina, dan heb je twee dingen nodig: de link zelf en een aparte knop ernaast om uit te klappen.
De status doorgeven
Die knop hoort een kenmerk te dragen dat aangeeft of het submenu open of dicht staat, en dat moet meebewegen zodra iemand klikt.
Dat is het hele nut: iemand hoort ingeklapt, drukt op Enter, en hoort uitgeklapt. Blijft dat kenmerk op ingeklapt staan, dan weet de bezoeker niet of er iets is gebeurd.
Bediening met het toetsenbord
Met de tabtoets kom je bij de knop, met Enter open je het menu, met de tabtoets loop je door de items, en met Escape sluit je het weer.
Die laatste wordt bijna altijd vergeten. Zonder Escape zit iemand vast in een open menu en moet hij eromheen tabben.
Mijn vuistregels
- Openen met een echte knop, niet met een blok of een link zonder doel.
- Zorg dat Escape het menu sluit en de focus teruglegt op de knop.
- Werk de status bij op hetzelfde moment dat het menu open- of dichtgaat.
- Laat het menu niet alleen op hover werken.
Die laatste is meteen de meest voorkomende fout, en hij raakt ook gewone bezoekers.
Op mobiel
Daar bestaat hover niet. Een menu dat alleen op hover opengaat, is op een telefoon onbereikbaar of gedraagt zich onvoorspelbaar.
Zorg dus dat klikken altijd werkt, ook op een groot scherm. Hover mag een extraatje zijn, geen voorwaarde. Meer daarover lees je bij navigatie.
Testen
Leg je muis weg en bedien je menu volledig met het toetsenbord. Kom je overal, zie je steeds waar je bent, en kun je eruit met Escape?
Doe daarna dezelfde ronde met je scherm uit en een schermlezer aan. Meer daarover lees je bij hoe test je of ARIA op je website klopt.