Accordion

Community

Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.

Definition of Done

Afgevinkt.

Naam
Naam bepaald op basis van NL Design System naamgeving.
Afgevinkt.

Beschrijving
Doel van component is in één zin beschreven.
Afgevinkt.

Afbeelding
Afbeelding gemaakt om de component visueel duidelijk te maken.
Afgevinkt.

Discussion URL
Afgevinkt.

Backlog
Staat in de publieke backlog van NL Design System.
Afgevinkt.

Bruikbaar
Bewijs verzameld dat de component algemeen bruikbaar is.
Afgevinkt.

Link
Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
Afgevinkt.

Varianten
Naam en doel van benodigde varianten beschreven.
Afgevinkt.

Onderzoek
Nut van component is onderbouwd door gebruikersonderzoek.
Afgevinkt.

Kernteam
Kernteam verwacht dat dit component tot Hall of Fame kan komen.
Afgevinkt.

nldesignsystem.nl
Vindbaar op de NL Design System website.

Help Wanted projectbord op GitHub

Afgevinkt.

Welk bord
Afgevinkt.

GitHub (CSS)
Afgevinkt.

Storybook (CSS)
Afgevinkt.

Implementatie voldoet
Afgevinkt.

Minimale design tokens
Afgevinkt.

Prefix
Afgevinkt.

Naamgeving design tokens
Afgevinkt.

Licentie component
Afgevinkt.

Licentie documentatie
Afgevinkt.

Storybook thema's
Afgevinkt.

Visuele regressietest
Afgevinkt.

Figma URL
Afgevinkt.

nldesignsystem.nl
Afgevinkt.

Component assessment
Afgevinkt.

Promotie

Community projectbord op GitHub

Niet afgevinkt.

🔍 Huisstijl input
Niet afgevinkt.

🔍 Productie input
Niet afgevinkt.

🔍 WCAG input
Niet afgevinkt.

📝 Issues bekend
Niet afgevinkt.

📝 Varianten bepaald
Niet afgevinkt.

📝 Acceptatiecriteria a11y
Niet afgevinkt.

📝 Keywords en Aliassen bepaald
Niet afgevinkt.

📝 Anatomie bepaald
Niet afgevinkt.

📝 HTML bepaald
Niet afgevinkt.

📝 API bepaald
Niet afgevinkt.

📝 Design tokens bepaald
Niet afgevinkt.

📝 Stories en specs vastgelegd
Niet afgevinkt.

📝 Testcases voor gebruik
Niet afgevinkt.

🛠️ React component
Niet afgevinkt.

🛠️ CSS component
Niet afgevinkt.

🛠️ Figma component
Niet afgevinkt.

🛠️ Voorbeeld thema
Niet afgevinkt.

🛠️ Documentatie
Niet afgevinkt.

🧪 Design Tokens getest
Niet afgevinkt.

🧪 A11y getest
Niet afgevinkt.

🧪 Test coverage getest
Niet afgevinkt.

🧪 Testcases getest
Niet afgevinkt.

🧪 Documentatie getest
Niet afgevinkt.

🚀 NPM
Niet afgevinkt.

🚀 Figma - Start Bibliotheek
Niet afgevinkt.

🚀 Figma - Voorbeeld Bibliotheek
Niet afgevinkt.

🚀 Themes repository
Niet afgevinkt.

🚀 nldesignsystem.nl

Candidate projectbord op GitHub

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-accordion in CSS

ams-accordion in React

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-accordion in CSS

utrecht-accordion in React

Den Haag

10 van 11 stappen gedocumenteerd op het Community Den Haag projectbord

Snel aan de slag

denhaag-accordion in Figma

denhaag-accordion in CSS

Rijkshuisstijl Community

10 van 11 stappen gedocumenteerd op het Community Rijkshuisstijl Community projectbord

Snel aan de slag

rhc-accordion in Figma

rhc-accordion in CSS

rhc-accordion in Web Component

rhc-accordion in React

RVO

8 van 11 stappen gedocumenteerd op het Community RVO projectbord

Snel aan de slag

rvo-accordion in CSS

rvo-accordion in React

Gerelateerde componenten: Details, Tabs.

Acceptatiecriteria

Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.

Als je implementatie voldoet aan de acceptatiecriteria voor deze component, kun je er vanuit gaan dat je gebruik van deze component voldoet aan WCAG, niveau A en AA.

De informatie in de accordeon bestaat uit tekst, niet uit tekst in een afbeelding

WCAG: 1.4.5 Afbeeldingen van tekst

De tekst in de gebruikersinterface om de accordion te openen (bijvoorbeeld de button of een details summary combinatie) bestaat uit tekst, niet uit tekst in een afbeelding.

NL Design System richtlijn:

Het is duidelijk welke content in de accordion aanwezig is

WCAG: 2.4.6 Koppen en labels

De tekst in de gebruikersinterface om de accordion te openen beschrijft duidelijk de inhoud van de content in de accordion.

NL Design System richtlijnen:

De bezoeker kan het openen van de accordion of een interactief element in de accordion annuleren

WCAG: 2.5.2 Aanwijzerannulering

Zorg ervoor dat, als de gebruiker de accordion aanraakt met een enkele aanwijzer, zoals een muis of vinger, er de mogelijkheid is om actie te voorkomen of ongedaan te maken.

Dit voorkomt het per ongeluk aanraken en openen van content, wanneer het niet de bedoeling was.

Met zowel een button element als met een details en summary combinatie gaat dit automatisch goed. Met een div-element waarop role= "button" is geplaatst, moet zowel de toetsenbordinteractie als de interactie voor muis en touch nog worden toegevoegd. Gebruik voor dit laatste bij voorkeur het click-event, omdat dit apparaatonafhankelijk is.

De visuele naam van de accordion komt voor in de toegankelijke naam van de accordion

WCAG: 2.5.3 Label in naam

De tekst in de gebruikersinterface om de accordion te activeren komt voor in:

De toegankelijke naam van de button, of;
In de summary van de details en summary combinatie.

NL Design System richtlijnen:

De zichtbare naam moet overeenkomen met de toegankelijke naam

Het aanwijsgebied van de accordion is groot genoeg

WCAG: 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

Maak het aanwijsgebied van de accordion groot genoeg, zodat het makkelijker is om deze te selecteren. Houd hiervoor een grootte aan van tenminste 44 bij 44 pixels.

Gebruik bijvoorbeeld een relatieve waarde als em of rem. Dit maakt de grootte van het element schaalbaar relatief aan de grootte van de letters op de pagina.

Om er voor te zorgen dat het aanwijsgebied van de accordion in álle gevallen minimaal 44 bij 44 pixels is, kunnen de CSS-eigenschappen min-inline-size en min-block-size behulpzaam zijn.

Dit zorgt ervoor dat de website makkelijker te navigeren en te bedienen is. Dit geldt speciaal voor mensen die werken op kleine aanraakschermen en muisgebruikers met trillende handen door bijvoorbeeld Parkinson.

NL Design System richtlijnen:

Als de accordion tekst bevat in een taal anders dan de aangegeven taal van de pagina, is er een taalwissel aanwezig

WCAG: 3.1.2 Taal van onderdelen

Geef wisseling van de taal aan waarin de tekst van elke passage of zin is geschreven. Als er in de tekst woorden of zinnen voorkomen in een andere taal dan die van de webpagina, brengt markering van die taal hulpmiddelen op de hoogte. Dit kan door in het HTML-element waarbinnen deze tekst staat het attribuut lang mee te geven.

Dan wordt tekst in die andere taal correct uitgesproken en daardoor beter te begrijpen voor gebruikers die de website laten voorlezen, bijvoorbeeld door screenreaders.

Er is een uitzondering voor eigennamen, technische termen, woorden in een onbekende taal, en woorden of zinsdelen die deel uitmaken van het jargon van de omliggende tekst.

Met het lang-attribuut breng je over welke taal (een deel van) je tekst heeft. Dan kunnen hulptechnologieën als screenreaders of vertaalsoftware daarop handelen. In het geval van screenreaders bijvoorbeeld door de tekst met de juiste stem voor te lezen.

Of de juiste stem ook echt wordt gebruikt is afhankelijk van de instellingen van de gebruikte screenreader.

Het gedrag van de accordion is voorspelbaar

WCAG: 3.2.1 Bij focus

Verras een gebruiker niet als die een interactief element focus geeft. Maak functionaliteit voorspelbaar en daardoor goed te begrijpen.

Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

Bij een contextwijziging verandert onverwacht de indeling, informatie, toetsenbordfocus of functionaliteit. Bijvoorbeeld door het direct versturen van een formulier na het kiezen van een select-optie, waarna de gebruiker naar een andere pagina wordt doorgestuurd.

Het openen of sluiten van de accordion verplaatst de focus niet

WCAG: 3.2.2 Bij input

Als de gebruiker de accordion opent of sluit, blijft de focus op het element waarmee de accordion geopend of gesloten wordt.

Informatie in of over de accordion is niet alleen te begrijpen door middel van kleur

WCAG: 1.4.1 Gebruik van kleur

Kleur is niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

Bijvoorbeeld: Als niet met een icoon, maar door een kleurverandering in de tekst wordt aangegeven of een accordion geopend of gesloten is, is dit niet voor iedereen duidelijk.

NL Design System richtlijnen:

De contrastratio tussen de tekst en de achtergrondkleur in de accordion is hoog genoeg

WCAG: 1.4.3 Contrast (minimum)

Het contrast van de tekstkleur ten opzichte van de achtergrondkleur moet hoog genoeg zijn, zodat de tekst in het algemeen goed leesbaar wordt gevonden. De criteria voor kleurcontrast zijn:

4,5:1 contrast voor normale tekst.
3:1 contrast voor grotere letters (vanaf 24 pixels).
3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

NL Design System richtlijnen:

Niet-tekstuele content in de accordion heeft een contrastratio van minimaal 3:1 met de achtergrond

WCAG: 1.4.11 Contrast van niet-tekstuele content

Zorg voor voldoende kleurcontrast tussen de achtergrondkleur en de kleur van componenten die visueel betekenis hebben. Bijvoorbeeld:

Een icoon dat betekenis heeft, zoals het icoon dat aangeeft dat een accordion in- of uitgeklapt kan worden.
De omranding van accordion, om aan te geven waar de gebruiker kan klikken met de muis of touch.

Het gemeten kleurcontrast tussen het element en de achtergrond moet minstens 3:1 zijn.

Interactieve elementen in de accordion hebben een zichtbare focusstyling

WCAG: 2.4.7 Focus zichtbaar

Zorg dat het goed zichtbaar is welk element de toetsenbordfocus heeft, wanneer je door de website navigeert met een toetsenbord of vergelijkbare bediening. Dit kan bijvoorbeeld door het gebruik van een focusring (outline).

Accordions met dezelfde functie of informatie zien er op iedere pagina waar de accordion voorkomt hetzelfde uit

WCAG: 3.2.4 Consistente identificatie

Onderdelen die hetzelfde doen moeten ook hetzelfde te herkennen zijn.

Tekst in de accordion kan 200% vergroot worden zonder verlies van functionaliteit of informatie

WCAG: 1.4.4 Herschalen van tekst

De gebruiker moet tekst twee keer (200%) kunnen vergroten. Het gaat hierbij alleen om het vergroten van tekst en niet om bijvoorbeeld afbeeldingen of de layout. Alle functies moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn. Er mag geen inhoud buiten beeld vallen, verborgen zijn of maar gedeeltelijk zichtbaar zijn.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

NL Design System richtlijnen:

De bezoeker kan de accordeon tot 400% vergroten zonder verlies van functionaliteit of informatie

WCAG: 1.4.10 Reflow

De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

Alle functies, zoals het menu, moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn.

Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video's en landkaarten.

Definieer in de CSS een wijze om lange woorden af te breken en door te laten lopen op de volgende regel. Voorkom zo een horizontale scrollbar en onleesbare tekst.

De tekstopmaak in de accordion kan aangepast worden zonder verlies van functionaliteit of informatie

WCAG: 1.4.12 Tekstafstand

Tekst is door bezoekers aan te passen.

Bezoekers kunnen eigen instelling en voorkeuren hebben voor hoe teksten eruit zien. Deze instellingen moeten ondersteund worden. Er mag geen inhoud of functionaliteit wegvallen. De volgende instellingen moeten ondersteund worden:

Een regelhoogte van ten minste 1,5 keer de lettergrootte;
Een afstand tussen alinea's van ten minste 2 keer de lettergrootte;
Een letterafstand van ten minste 0,12 keer de lettergrootte;
Een afstand tussen woorden van ten minste 0,16 keer de lettergrootte.

Sommige mensen hebben teksten nodig met een ander uiterlijk. Bijvoorbeeld voor mensen met een visuele beperking en mensen met dyslexie.

De accordion opent niet bij hover of focus.

WCAG: 1.4.13 Content bij hover of focus

Het plaatsen van toetsenbordfocus of hover op de accordion, zorgt er niet voor dat de accordion opent.

De accordion is bedienbaar met het toetsenbord

WCAG: 2.1.1 Toetsenbord

De accordion is bereikbaar met de Tab-toets, en opent en sluit met de entertoets en met de spatietoets.

Met een button element en met een details en summary combinatie gaat dit automatisch goed. Voor een div element waar role = "button" en aria-expanded aan worden toegevoegd, moet de toetsenbordinteractie nog worden toegevoegd.

NL Design System richtlijnen:

Toetsenbordbediening van een button

De accordion zorgt niet voor een toetsenbordval

WCAG: 2.1.2 Geen toetsenbordval

Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.

De focusvolgorde rondom en in de accordion is logisch

WCAG: 2.4.3 Focus volgorde

Wanneer de accordion ingeklapt is, krijgen interactieve elementen in de ingeklapte content geen toetsenbordfocus.

Interactieve elementen in de accordion hebben een zichtbare focusstyling

WCAG: 2.4.6 Koppen en labels

De tekst in de gebruikersinterface om de accordion te openen beschrijft duidelijk de inhoud van de content in de accordion.

NL Design System richtlijnen:

De accordion wordt niet bedekt door andere content

WCAG: 2.4.11 Focus niet bedekt (minimum)

Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

De staat van de accordion is beschikbaar voor hulpsoftware

WCAG: 1.3.1 Info en relaties

De staat van de accordion – ingeklapt of uitgeklapt – is beschikbaar voor hulpsoftware. Bijvoorbeeld met het aria-expanded attribuut op het button element dat uitklapt, of door een details en summary combinatie.

Wanneer de tekst in de button of de summary van de details en summary combinatie een kop is voor de content ín de accordion, is de tekst opgemaakt met een h element. Welk niveau de kop heeft, is afhankelijk van de structuur van de pagina.

NL Design System richtlijnen:

Koppen

Het is duidelijk welke content in de accordion aanwezig is

WCAG: 2.4.6 Koppen en labels

De tekst in de gebruikersinterface om de accordion te openen beschrijft duidelijk de inhoud van de content in de accordion.

NL Design System richtlijnen:

Als de accordion tekst bevat in een taal anders dan de aangegeven taal van de pagina, is er een taalwissel aanwezig

WCAG: 3.1.2 Taal van onderdelen

Dan wordt tekst in die andere taal correct uitgesproken en daardoor beter te begrijpen voor gebruikers die de website laten voorlezen, bijvoorbeeld door screenreaders.

Er is een uitzondering voor eigennamen, technische termen, woorden in een onbekende taal, en woorden of zinsdelen die deel uitmaken van het jargon van de omliggende tekst.

Of de juiste stem ook echt wordt gebruikt is afhankelijk van de instellingen van de gebruikte screenreader.

De accordion heeft een toegankelijke naam, rol en status

WCAG: 4.1.2 Naam, rol, waarde

Het onderdeel van de gebruikersinterface waarmee een bezoeker de accordion opent, heeft de rol button.

Opties:

Wanneer een details en summary combinatie gebruikt wordt, heeft het summary element voor hulpsoftware automatisch de juiste rol.
Een HTML button heeft ook automatisch de juiste rol. Het is mogelijk om met ARIA een role=button toe te voegen aan een ander element dan een button, maar dit is niet aan te raden. Heb je het absoluut nodig, zorg er dan voor dat het gekozen element ook voldoet aan de verwachte toetsenbordinteractie, focusstijl, etc.

De staat van de accordion (open of dicht) moet ook beschikbaar zijn voor hulpsoftware.

Opties:

Wanneer een details en summary combinatie gebruikt wordt, gaat dit automatisch goed.
Bij een knop moet de staat worden aangegeven met het aria-expanded attribuut.

<button aria-expanded="true">Menu</button>

Let erop dat je hiervoor JavaScript nodig hebt en zorg ervoor dat aria-expanded de waarde false krijgt wanneer het menu weer is ingeklapt.

NL Design System richtlijnen:

De toegankelijke naam van een button

Help om deze component te verbeteren

We vinden het belangrijk dat de component Accordion goed te gebruiken is door iedereen. Help je mee?

Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
Draag bij aan de voortgang van Accordion door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.

Accordion

Definition of Done

Help Wanted - 11 van 11

Naam

Beschrijving

Afbeelding

Discussion URL

Backlog

Bruikbaar

Link

Varianten

Onderzoek

Kernteam

nldesignsystem.nl

Community - 15 van 15

Welk bord

GitHub (CSS)

Storybook (CSS)

Implementatie voldoet

Minimale design tokens

Prefix

Naamgeving design tokens

Licentie component

Licentie documentatie

Storybook thema's

Visuele regressietest

Figma URL

nldesignsystem.nl

Component assessment

Promotie

Candidate - 0 van 15

🔍 Huisstijl input

🔍 Productie input

🔍 WCAG input

📝 Issues bekend

📝 Varianten bepaald

📝 Acceptatiecriteria a11y

📝 Keywords en Aliassen bepaald

📝 Anatomie bepaald

📝 HTML bepaald

📝 API bepaald

📝 Design tokens bepaald

📝 Stories en specs vastgelegd

📝 Testcases voor gebruik

🛠️ React component

🛠️ CSS component

🛠️ Figma component

🛠️ Voorbeeld thema

🛠️ Documentatie

🧪 Design Tokens getest

🧪 A11y getest

🧪 Test coverage getest

🧪 Testcases getest

🧪 Documentatie getest

🚀 NPM

🚀 Figma - Start Bibliotheek

🚀 Figma - Voorbeeld Bibliotheek

🚀 Themes repository

🚀 nldesignsystem.nl

Community implementaties

Amsterdam

Snel aan de slag

ams-accordion in CSS

ams-accordion in React

Utrecht

Snel aan de slag

utrecht-accordion in CSS

utrecht-accordion in React

Den Haag

Snel aan de slag

denhaag-accordion in CSS

Rijkshuisstijl Community

Snel aan de slag

rhc-accordion in CSS

rhc-accordion in Web Component

rhc-accordion in React

RVO

Snel aan de slag

rvo-accordion in CSS

rvo-accordion in React