Accordion

Je kunt een accordion gebruiken lange pagina's korter te maken zodat de gebruiker niet lang moet scrollen om de relevante informatie te vinden.

De inhoud verbergen heeft als nadeel dat "zoeken in pagina" geen resultaten oplevert de inhoud die verborgen is. Als je weet op welke zoekterm de gebruiker heeft gezocht om op de pagina met accordion te komen, dan kun je de sections die de zoekterm bevatten automatisch expanded maken.

Tekst

Het is belangrijk duidelijke koppen te hebben, omdat de gebruiker niet de verborgen inhoud kan "scannen" om relevante informatie te vinden.

HTML

Gebruik een <button> element waarmee je de inhoud van de section kunt weergeven en verbergen. Gebruik altijd het aria-expanded attribuut zodat duidelijk wat het effect is van de button activeren. Gebruik aria-expanded="true" wanneer de inhoud beschikbaar is, gebruik aria-expanded="false" wanneer de inhoud verborgen is.

Plaats de button in de heading, zodat gebruikers die via een overzicht van headings door de pagina navigeren de informatie makkelijk kunnen vinden.

Plaats de inhoud van de expandable region in een <section> element, zodat gebruikers die via een overzicht van landmarks door de pagina navigeren de informatie makkelijk kunnen vinden (het section element maakt een region landmark). Gebruik aria-labelledby om de section te koppelen aan de heading, omdat het is belangrijk dat de landmark een duidelijk label heeft. Zonder label is de landmark navigation onduidelijk omdat er meerdere regions zijn zonder naam, waarvan niet duidelijk is wat de inhoud is.

Zelfs de inhoud van een verborgen expandable region moet in de HTML-code staan, wanneer je server-side rendering gebruikt zodat zoekmachines dan toch toegang hebben tot de volledige inhoud. De inhoud van een verborgen expandable region kan met CSS onzichtbaar gemaakt worden.

Wanneer je accordion heel veel onderdelen heeft, dan kunnen gebruikers van landmark navigation moeilijker andere landmarks in de pagina vinden. Om bij de contentinfo landmark te komen (de page footer), moet de gebruiker eerst alle accordion onderdelen overslaan. Gebruik voor een accordion met heel veel onderdelen een <div> of <section role="presentation"> element in plaats van het <section> element zodat het geen landmark wordt. Gebruikers kunnen de informatie dan nog wel vinden via heading navigation.

Zo moet het niet

Verwijder het aria-expanded attribuut niet, want aria-expanded="false" is niet hetzelfde als geen aria-expanded attribuut hebben. "Boolean attributes" van ARIA werken niet hetzelfde als boolean attributes van HTML. (Boolean attributes in HTML and ARIA: what's the difference? — Hidde de Vries).

Plaats niet de heading in de button in plaats van andersom, omdat de heading dan niet toegankelijk is voor hulpmiddelen die een overzicht maken van alle headings op een pagina.

Wacht niet met het plaatsen van de inhoud van de expandable region tot de gebruiker de button activeert, want zoekmachines gebruiken alleen de initiële inhoud van de pagina zonder op buttons te gebruiken.

Visueel ontwerp

De icoon plaatsen vóór de heading is meest duidelijk. Als het icoon voor expanded of not expanded uitgelijnd is aan het eind van de regel, dan is het minder duidelijk dat de heading een button is die voor inklappen en uitklappen zorgt. Sommige gebruikers met een beperkt gezichtsveld kunnen het icoon bijvoorbeeld niet zien wanneer ze naar naar de heading kijken, als er grote afstand zit tussen de heading en het icoon.

Relevante WCAG eisen

De WCAG eisen voor de button component en de heading component gelden ook voor de accordion header.

Let extra op voor deze onderdelen:

• WCAG eis 1.3.1: de heading level van de accordion sections is afhankelijk van waar in de pagina de accordion is geplaatst, dit kan per pagina verschillen.
• WCAG eis 1.3.6: gebruik aria-controls voor de button, en gebruik een region landmark voor de expandable region (gebruik daarvoor het HTML-element <section>)
• WCAG eis 1.4.3: contrast tussen tekst en achtergrond en tussen icoon en achtergrond is voldoende in alle varianten, alle interactieve statussen en alle mogelijke combinaties.
• WCAG eis 3.2.1: maak de accordion niet automatisch expanded als de button focus krijgt.
• WCAG eis 2.1.3: ondersteun ook de optionele toetsen: Down Arrow, Up Arrow, Home en End. Space moet de button activeren, niet de pagina scrollen (gebruik keypressEvt.preventDefault()).
• WCAG eis 2.4.6: de tekst die zowel wordt gebruikt als heading en als label voor de button moet duidelijk zijn, omdat de inhoud niet altijd zichtbaar is.
• WCAG eis 2.4.10: accordions die onderdeel vormen van de lopende tekst moeten section headings gebruiken.

Relevante info

• Accordion (Sections With Show/Hide Functionality) - W3C ARIA Authoring Practices Guide