Een toegankelijke accordeon: uitklapblokken en FAQ’s die iedereen opent

Een bezoeker zoekt op uw veelgestelde-vragenpagina naar “retour”. Hij drukt op Ctrl+F, typt het woord en krijgt: geen resultaten. Toch staat het antwoord er gewoon, alleen verstopt in een dichtgeklapt blok. Dit is een van de minder bekende nadelen van uitklapblokken. Er zijn er meer: blokken die niet met het toetsenbord opengaan, of een screenreader die niet zegt dat er iets uit te klappen valt. Een toegankelijke accordeon lost dat op zonder dat het ontwerp hoeft te veranderen.

Wat een toegankelijke accordeon moet doen

Elke accordeon bestaat uit een reeks koppen die elk een stuk inhoud tonen of verbergen. Voor iedere bezoeker moet het volgende kloppen:

• De kop is bereikbaar met Tab en opent met Enter of spatie.
• Een screenreader hoort dat het om een uitklapbaar element gaat, en of het open of dicht is.
• Het is zichtbaar dat de kop klikbaar is, bijvoorbeeld met een pijltje of plusje, en de focus is goed te zien.
• De inhoud die opengaat, staat in de code direct na de kop, zodat de volgende Tab erin terechtkomt.

Daarnaast geldt een eis die vaak vergeten wordt: open of dicht mag nooit vanzelf veranderen. Een blok dat dichtklapt zodra de focus naar een ander blok gaat, of dat na een paar seconden weer sluit, haalt de tekst weg terwijl iemand hem nog leest. Laat de bezoeker bepalen wat er open staat.

Er zijn twee nette manieren om dat te bereiken.

Optie 1: details en summary

HTML heeft een ingebouwd uitklapelement. Het werkt zonder JavaScript, met het toetsenbord en met screenreaders:

<details>
  <summary>Hoe stuur ik een product terug?</summary>
  <p>U meldt de retour binnen 14 dagen via uw account...</p>
</details>

Het grote voordeel is dat moderne browsers gesloten <details>-blokken meenemen in de zoekfunctie van de pagina. Chrome en Edge klappen het blok automatisch open als de gezochte tekst erin staat. Zo werkt Ctrl+F weer zoals bezoekers verwachten. Controleer wel even in de browsers die uw bezoekers gebruiken, want niet elke browser deed dit vanaf het begin.

Een paar aandachtspunten. Het standaardpijltje kunt u vervangen door een eigen icoon, maar laat het element zelf intact. Zet geen knoppen of links in de <summary>, dat geeft verwarring. En wilt u dat er maar één blok tegelijk open staat, dan kunt u de blokken een gedeeld name-attribuut geven. Bedenk wel of dat echt nodig is: bezoekers die twee antwoorden willen vergelijken, hebben er last van.

Optie 2: een knop met aria-expanded

Veel thema’s en paginabouwers bouwen hun eigen accordeon met JavaScript. Dat kan ook toegankelijk, als de kop een echte knop is binnen een echte kop:

<h3>
  <button type="button" aria-expanded="false"
          aria-controls="antwoord-retour" id="vraag-retour">
    Hoe stuur ik een product terug?
  </button>
</h3>
<div id="antwoord-retour" role="region"
     aria-labelledby="vraag-retour" hidden>
  <p>U meldt de retour binnen 14 dagen via uw account...</p>
</div>

Het script zet bij elke klik aria-expanded op true of false en haalt hidden weg of zet het terug. De omhullende <h3> zorgt dat screenreadergebruikers met de koppensneltoets door de vragen kunnen springen. Kies het kopniveau dat past in de rest van de pagina; meer daarover in een logische kopstructuur. Gebruik role="region" spaarzaam: bij een lange lijst van twintig vragen levert het veel extra herkenningspunten op die eerder hinderen dan helpen.

Met hidden="until-found" in plaats van hidden kunt u ook bij deze variant de zoekfunctie van de browser laten werken, in browsers die dat ondersteunen. Het script moet dan wel luisteren naar het beforematch-event om aria-expanded bij te werken.

Wat vaak misgaat in de praktijk

In WordPress zit een accordeon vaak in de paginabouwer of in een FAQ-plugin. De blokeditor heeft inmiddels een eigen Details-blok dat op <details> is gebaseerd. Voor wie in de blokeditor werkt, is dat een eenvoudige en solide keuze. Op de pagina over WordPress toegankelijk maken leest u hoe u thema’s en plugins in het algemeen beoordeelt.

Moet het wel in een uitklapblok?

Een toegankelijke accordeon blijft een manier om inhoud te verstoppen. Dat is handig bij een lange lijst losse vragen waarvan elke bezoeker er één of twee nodig heeft. Het is minder handig bij:

• Informatie die iedereen moet lezen, zoals voorwaarden die vlak voor een bestelling gelden.
• Een paar korte antwoorden. Vijf vragen met elk twee zinnen kunt u gewoon onder elkaar zetten.
• Stappen die op elkaar volgen. Een stappenplan in losse blokken dwingt de lezer steeds te openen en te sluiten.

Ook voor zoekmachines en printers is gewone tekst onder koppen eenvoudiger. Twijfelt u tussen een accordeon en tabbladen, lees dan ook het artikel over toegankelijke tabbladen: daar komt dezelfde vraag terug.

Uw FAQ-pagina zelf controleren

1. Druk op Tab tot u bij de eerste vraag bent. Ziet u een focusrand?
2. Druk op Enter. Gaat het antwoord open? Druk nog eens: gaat het weer dicht?
3. Tab verder door een gesloten blok. Komt u op onzichtbare links terecht? Dan is de inhoud niet goed verborgen.
4. Zoek met Ctrl+F naar een woord dat alleen in een gesloten antwoord staat.
5. Luister met een screenreader of u “uitgevouwen” en “samengevouwen” hoort.

Vallen er punten af, dan is dat meestal op te lossen in het thema of door de accordeon van de paginabouwer te vervangen door het Details-blok. Voor de andere onderdelen van uw site is onze pagina over een toegankelijke website het beginpunt.