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 richtlijn:
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.