Accordion

title:

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

sc:

1.4.5

status:

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:

• Afbeeldingen als buttons
• Tekst in een afbeelding

title:

Het is duidelijk welke content in de accordion aanwezig is

sc:

2.4.6

status:

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

NL Design System richtlijnen:

• Duidelijke buttontekst die beschrijft wat de button doet
• De toegankelijke naam van een button

title:

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

sc:

2.5.2

status:

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.

title:

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

sc:

2.5.3

status:

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

title:

Het aanwijsgebied van de accordion is groot genoeg

sc:

2.5.5

status:

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:

• Maak aanklikbare formuliervelden groot genoeg
• Reserveer ruimte tussen interactieve elementen

title:

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

sc:

3.1.2

status:

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.

title:

Het gedrag van de accordion is voorspelbaar

sc:

3.2.1

status:

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.

title:

Het openen of sluiten van de accordion verplaatst de focus niet

sc:

3.2.2

status:

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

title:

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

sc:

1.4.1

status:

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:

• Gebruik kleur met een doel
• Gebruik van kleur in tekst

title:

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

sc:

1.4.3

status:

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:

• Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond
• Geef tekst voldoende kleurcontrast
• Gebruik van kleur in tekst

title:

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

sc:

1.4.11

status:

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.

title:

Interactieve elementen in de accordion hebben een zichtbare focusstyling

sc:

2.4.7

status:

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).

title:

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

sc:

3.2.4

status:

Onderdelen die hetzelfde doen moeten ook hetzelfde te herkennen zijn.

title:

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

sc:

1.4.4

status:

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:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

title:

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

sc:

1.4.10

status:

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.

title:

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

sc:

1.4.12

status:

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.

title:

De accordion opent niet bij hover of focus.

sc:

1.4.13

status:

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

title:

De accordion is bedienbaar met het toetsenbord

sc:

2.1.1

status:

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

title:

De accordion zorgt niet voor een toetsenbordval

sc:

2.1.2

status:

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

title:

De focusvolgorde rondom en in de accordion is logisch

sc:

2.4.3

status:

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

title:

Interactieve elementen in de accordion hebben een zichtbare focusstyling

sc:

2.4.6

status:

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

NL Design System richtlijnen:

• Duidelijke buttontekst die beschrijft wat de button doet
• De toegankelijke naam van een button

title:

De accordion wordt niet bedekt door andere content

sc:

2.4.11

status:

Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

title:

De staat van de accordion is beschikbaar voor hulpsoftware

sc:

1.3.1

status:

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

title:

Het is duidelijk welke content in de accordion aanwezig is

sc:

2.4.6

status:

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

NL Design System richtlijnen:

• Duidelijke buttontekst die beschrijft wat de button doet
• De toegankelijke naam van een button

title:

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

sc:

3.1.2

status:

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.

title:

De accordion heeft een toegankelijke naam, rol en status

sc:

4.1.2

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 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