Een accordeon-menu is een rij gestapelde koppen waarbij je op één klikt om de inhoud uit te klappen, terwijl de andere meestal dichtgaan, zodat er telkens maar één paneel openstaat. De naam komt van het muziekinstrument dat in- en uitvouwt.
Het klassieke voorbeeld is een blok met veelgestelde vragen. Je ziet een net lijstje vragen, je tikt op de vraag die jou bezighoudt, en het antwoord schuift eronder open terwijl de rest opgevouwen blijft. Zo wordt een pagina met twintig vragen geen eindeloze muur van tekst. Een kleine micro-interactie, zoals een pijltje dat draait als het paneel opent, laat mensen zien dat het onderdeel uitklapt en welke nu actief is.
Accordeons zijn naaste familie van het dropdownmenu, maar een dropdown zweeft over de pagina terwijl een accordeon de inhoud eronder naar beneden duwt. Er zit een addertje onder het gras: alles wat in een accordeon verborgen zit, wordt minder snel gelezen, dus het is de verkeerde keuze voor informatie die elke bezoeker echt nodig heeft. Ook moeten ze met het toetsenbord te bedienen zijn om toegankelijk te blijven.
Goed om te weten: inhoud die in een dicht paneel zit, staat nog steeds in de HTML van de pagina, dus zoekmachines kunnen het lezen en de bezoeker vindt het met de zoekfunctie in de browser. Maar links en koppen die in een ingeklapt deel verstopt zitten, dragen minder visueel gewicht, en dat is een reden te meer om je belangrijkste boodschap daar niet weg te stoppen. Houd de antwoorden kort, en laat de koptekst alleen al vertellen wat iemand krijgt als hij opent.
Bij TopDevs gebruiken we accordeons om lange FAQ- en specificatiepagina’s te temmen, en we zorgen dat elk paneel met het toetsenbord opent zodat het patroon voor iedereen bruikbaar blijft.
