Wat is het verschil tussen een los uitklapmenu en een accordeon?
Voordat we in de code duiken, is het belangrijk om twee termen uit elkaar te halen die vaak door elkaar worden gebruikt.
- Het losse uitklapmenu: Dit is een onafhankelijk uitklapbaar element. De status van dit element heeft geen invloed op andere elementen op de pagina.
- De accordeon: Een verticale lijst van panelen waarbij (vaak) slechts één paneel tegelijk open kan zijn. Dit zorgt voor meer overzicht.
De standaard HTML-manier: details en summary
Sinds de komst van HTML5 bieden browsers een ingebouwde oplossing: het <details> element met een <summary> als titel. Dit werkt zonder JavaScript.
De basis: het losse uitklapmenu
De puurste vorm in HTML. De browser regelt de interactie volledig zelf.
Meer informatie
Dit is de verborgen tekst die tevoorschijn komt na interactie.
<details>
<summary>Meer informatie</summary>
<p>Dit is de verborgen tekst die tevoorschijn komt na interactie.</p>
</details>De opgemaakte versie: met CSS
Met een klein beetje CSS maak je van het standaard element een modern UI-component.
Waarom CSS gebruiken?
Met CSS geef je visuele aanwijzingen aan de gebruiker, zoals een veranderende kleur bij het openen.
<style>
.mooie-details { border: 1px solid #ddd; padding: 10px; }
.mooie-details summary { font-weight: bold; cursor: pointer; }
.mooie-details[open] summary { color: #0056b3; }
</style>
<details class="mooie-details">
<summary>Waarom CSS gebruiken?</summary>
<p>Inhoud van het paneel...</p>
</details>De échte accordeon
Door meerdere <details>-elementen dezelfde name-waarde te geven, vertel je aan de browser dat deze panelen bij elkaar horen als één groep. In dit voorbeeld is faq-groep simpelweg een zelfgekozen groepsnaam. Je had hier dus ook accordion-1 of product-info kunnen gebruiken. Het gaat er niet om wat de naam is, maar dat alle panelen in dezelfde accordeon exact dezelfde naam krijgen.
Daardoor werkt het als een echte accordeon: open je één paneel, dan sluit een ander paneel uit diezelfde groep automatisch. Het attribuut open op het eerste element bepaalt alleen welk paneel standaard geopend is bij het laden van de pagina.
Sectie 1: Introductie
Dit paneel sluit zodra je Sectie 2 opent.
Sectie 2: Specificaties
Dit werkt doordat beide details-elementen dezelfde groepsnaam hebben: faq-groep.
<details name="faq-groep" open>
<summary>Sectie 1: Introductie</summary>
<p>Inhoud sectie 1...</p>
</details>
<details name="faq-groep">
<summary>Sectie 2: Specificaties</summary>
<p>Inhoud sectie 2...</p>
</details>Voordelen en nadelen
Bij Audit House wegen we altijd de techniek af tegen de gebruikerservaring en WCAG-eisen.
- Voordeel: Werkt zonder JavaScript, is toetsenbord-toegankelijk en wordt door de browser automatisch gevonden bij een Ctrl+F zoekopdracht.
- Nadeel: Geen ondersteuning voor extra knoppen in de titel en soms wisselende aankondigingen in Apple VoiceOver.
Standaard HTML vergeleken met maatwerk (ARIA)
| Kenmerk | Standaard (<details>) | Maatwerk (ARIA) |
|---|---|---|
| Complexiteit | Laag | Hoog |
| Koppenstructuur | Soms lastig | Perfect instelbaar |
| Zoekfunctie (Ctrl+F) | Werkt automatisch | Werkt niet voor verborgen tekst |
Welke methode moet je kiezen?
Ons advies: Gebruik in 90% van de gevallen de standaard HTML-oplossing (<details>). Het is veiliger, robuuster en makkelijker te onderhouden. Maatwerk met ARIA is alleen aan te raden voor zeer complexe webapplicaties waar specifieke focus-handling vereist is.