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.
-
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
-
Niet afgevinkt.
≥2 Thema's
-
Niet afgevinkt.
Versimpeld of gesplitst
-
Niet afgevinkt.
API gemeenschappelijk
-
Niet afgevinkt.
API conventie
-
Niet afgevinkt.
Design tokens conventie
-
Niet afgevinkt.
Common tokens
-
Niet afgevinkt.
Design tokens nuttig
-
Niet afgevinkt.
Storybook NLDS
-
Niet afgevinkt.
Figma in lijn
-
Niet afgevinkt.
Figma NLDS
-
Niet afgevinkt.
Coverage features
-
Niet afgevinkt.
Semantiek goedgekeurd
-
Niet afgevinkt.
A11y getest
-
Niet afgevinkt.
i18n getest
-
Niet afgevinkt.
Content flexibel
-
Niet afgevinkt.
Linting en formatting
-
Niet afgevinkt.
NPM (candidate)
-
Niet afgevinkt.
Changelog
-
Niet afgevinkt.
Documentatie aliassen
-
Niet afgevinkt.
Documentatie anatomie
-
Niet afgevinkt.
Documentatie op website
-
Niet afgevinkt.
Documentatie a11y
-
Niet afgevinkt.
Documentatie getest
-
Niet afgevinkt.
Do and don't voorbeelden
-
Niet afgevinkt.
HTML/CSS
-
Niet afgevinkt.
Gebruikersonderzoek
-
Niet afgevinkt.
Webcomponent
-
Niet afgevinkt.
React
-
Niet afgevinkt.
API unit tests
-
Niet afgevinkt.
A11y audit
-
Niet afgevinkt.
NPM
-
Niet afgevinkt.
Semver
-
Niet afgevinkt.
Figma geversioneerd
-
Niet afgevinkt.
Figma changelog
-
Niet afgevinkt.
Code changelog
-
Niet afgevinkt.
Richtlijnen design tokens
-
Niet afgevinkt.
Richtlijnen redacteuren
-
Niet afgevinkt.
Beveiliging
-
Niet afgevinkt.
Privacy
-
Niet afgevinkt.
Getest met designers
-
Niet afgevinkt.
Getest met developers
-
Niet afgevinkt.
Getest met redacteuren
-
Niet afgevinkt.
≥2 organisaties geswitcht
Implementaties
Community Amsterdam
11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord
Component gebruiken?
Community Utrecht
11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord
Component gebruiken?
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
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
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
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
summaryvan dedetailsensummarycombinatie.
NL Design System richtlijn:
Het aanwijsgebied van de accordion is groot genoeg
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
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 of voorleessoftware.
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
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.
De contrastratio tussen de tekst en de achtergrondkleur in de accordion is hoog genoeg
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).
Niet-tekstuele content in de accordion heeft een contrastratio van minimaal 3:1 met de achtergrond
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
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
Zorg ervoor dat componenten die dezelfde functie hebben binnen een website, er hetzelfde uitzien en ook hetzelfde werken.
Denk hierbij aan links, accordeons, iconen en linkteksten of labels en buttons in formulieren. Wees consistent, dan begrijpt de gebruiker beter wat de betekenis is.
Bijvoorbeeld:
- Gebruik dezelfde tekst voor een verzendbutton bij de formulieren in een website. Niet in het ene formulier 'Verzenden' en in een ander formulier 'Versturen'.
- Gebruik hetzelfde icoon voor een button om invoer te verwijderen. Niet eerst een prullenbak icoon, terwijl een andere button een kruis als icoon heeft.
- Noem de link naar de voorpagina altijd hetzelfde binnen de website. Niet eerst 'Home', dan 'Voorpagina' en dan 'Start'.
Tekst in de accordion kan 200% vergroot worden zonder verlies van functionaliteit of informatie
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 word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar.
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 CSS).
Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals bijvoorbeeld: tabellen, grafieken, video's en landkaarten.
Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Zodat er geen horizontale scrollbar ontstaat of tekst onleesbaar wordt.
De tekstopmaak in de accordion kan aangepast worden zonder verlies van functionaliteit of informatie
- WCAG
- 1.4.12 Tekstafstand
Tekst kan op een aantal manieren aangepast worden, door mensen voor wie dat prettig is.
Alle tekst moet leesbaar blijven. Er mag geen inhoud buiten beeld vallen, onbereikbaar of 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. Zodat er geen horizontale scrollbar ontstaat of tekst onleesbaar wordt.
Het gaat om:
- De ruimte tussen tekstregels kan relatief groot ingesteld worden, zodat de ruimte tussen tekstregels anderhalf keer groter is dan de hoogte van een tekstregel zelf.
- De ruimte tussen alinea's kan ingesteld worden op minimaal de twee keer de hoogte van een tekstregel.
- De ruimte tussen letters kan 12% groter worden ingesteld dan normaal.
- De ruimte tussen woorden kan 16% groter worden ingesteld dan normaal.
Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.
De accordion opent niet 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 richtlijn:
De accordion zorgt niet voor een toetsenbordval
Wanneer een gebruiker met het toetsenbord de focus verplaatst naar een deel van de pagina, dan moet deze ook weer weg kunnen gaan met het toetsenbord. De gebruiker kan daarvoor bijvoorbeeld de Tab-toets, Escape-toets of de pijltjestoetsen gebruiken. Zo niet, beschrijf dan met welke toets het wel kan.
Als een toetsenbordgebruiker niet verder kan in de pagina, zonder goede uitleg, dan zit deze in de val. Dit is een blokkade bij het navigeren van een website met het toetsenbord alleen.
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
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
Zorg ervoor dat een element dat de toetsenbordfocus heeft zichtbaar is en niet volledig bedekt is door andere inhoud.
De staat van de accordion is beschikbaar voor hulpsoftware
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.
Het is duidelijk welke content in de accordion aanwezig is
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
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 of voorleessoftware.
De accordion heeft een toegankelijke naam, rol en status
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
buttonheeft ook automatisch de juiste rol. Het is mogelijk om met ARIA eenrole=buttontoe te voegen aan een ander element dan eenbutton, 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:
Help component 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 voortang 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.