Button
Community
Biedt de mogelijkheid om een actie uit te voeren.
Definition of Done
Implementaties
Community Utrecht
11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord
Component gebruiken?
Community Amsterdam
10 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord
Component gebruiken?
Levende Backlog
De Button component staat bij NL Design System in de levende backlog, heb je een concrete eisen of wensen voor dit component? Laat het ons dan daar weten!
Acceptatiecriteria
WCAG 2 Succescriterium
-
Afgevinkt.
1.1.1 Niet-tekstuele content
Als het label van een button uit een afbeelding bestaat, dan heeft deze afbeelding een goed tekstalternatief, zodat de button een naam heeft die duidelijk maakt waar de button voor dient.
NL Design System richtlijnen:
-
Afgevinkt.
1.4.3 Contrast (minimum)
Het contrast van de buttontekst met de achtergrondkleur is hoog genoeg. Dit is te controleren met de Contrast checker.
NL Design System richtlijnen:
-
Afgevinkt.
1.4.4 Herschalen van tekst
Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.
-
Afgevinkt.
1.4.5 Afbeeldingen van tekst
Het label van de button bestaat uit gewone tekst, niet uit een afbeelding van tekst. Tenzij om een logo gaat, zoals het DigiD-logo.
NL Design System richtlijnen:
-
Afgevinkt.
1.4.11 Contrast van niet-tekstuele content
Als het label van de button niet uit tekst bestaat maar uit bijvoorbeeld een icoon (zoals bij een zoekknop met een vergrootglas), dan is het contrast tussen het icoon en de achtergrond minimaal 3:1. Dit is te controleren met de Contrast checker.
-
Afgevinkt.
1.4.12 Tekstafstand
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om afstand tussen letters, woorden, regels en alinea's.
-
Afgevinkt.
2.1.1 Toetsenbord
Je kunt de button focussen met de tabtoets en activeren met de spacebar en de entertoets.
NL Design System richtlijnen:
-
Afgevinkt.
2.4.6 Koppen en labels
Het label van de button maakt kort en bondig duidelijk waar de button voor dient.
NL Design System richtlijnen:
-
Afgevinkt.
2.4.7 Focus zichtbaar
Wanneer een button de toetsenbordfocus krijgt is de focus zichtbaar.
NL Design System richtlijnen:
-
Afgevinkt.
2.4.13 Focusweergave
Er is een goed zichtbare focusindicator die ook rekening houdt met het contrast met de verschillende achtergrondkleuren waarop de button gebruikt kan worden.
NL Design System richtlijnen:
-
Afgevinkt.
2.5.2 Aanwijzerannulering
Dit criterium maakt het moeilijker om een button onbedoeld te activeren met een muis, toetsenbord of touchscreen.
-
Afgevinkt.
2.5.3 Label in naam
De zichtbare naam van de button is gelijk aan de toegankelijke naam.
NL Design System richtlijnen:
-
Afgevinkt.
2.5.5 Grootte van het aanwijsgebied (uitgebreid)
De button is groot genoeg om gemakkelijk aan te klikken (44 bij 44 pixels). Kleinere buttons staan niet te dicht op een andere button.
NL Design System richtlijnen:
-
Afgevinkt.
3.1.2 Taal van onderdelen
Als een buttontekst in een andere taal is dan de taal van de pagina, dan heeft het element een
lang-attribuut met de juiste taalcode.Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites.
-
Afgevinkt.
3.2.4 Consistente identificatie
Buttons met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label.
-
Afgevinkt.
4.1.2 Naam, rol, waarde
De button heeft een rol van
buttonen een toegankelijke naam die duidelijk maakt waar de button voor dient. Ook is de toestand (state) duidelijk.NL Design System richtlijnen: