Button

Community

Biedt de mogelijkheid om een actie uit te voeren.

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

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 onderzoek
Niet afgevinkt.

Documentatie getest

Candidate projectbord op GitHub

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

Hall of Fame projectbord op GitHub

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?

Community RVO

8 van 11 stappen gedocumenteerd op het Community RVO 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 dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).

Het label van de button bestaat uit gewone tekst, niet uit een afbeelding van tekst

WCAG: 1.4.5 Afbeeldingen van tekst

Het label bestaat uit gewone tekst, niet uit een afbeelding van tekst. Tenzij het om een logo gaat, zoals een DigiD-logo.

NL Design System richtlijnen:

Afbeeldingen als buttons

Het label van de button maakt kort en bondig duidelijk waar de button voor dient

WCAG: 2.4.6 Koppen en labels

Het label van de button maakt kort en bondig duidelijk waar de button voor dient. Een label kan bestaan uit tekst of uit een icoon. Als je een icoon gebruikt, heeft het de voorkeur om ook een beschrijvende tekst in de button op te nemen.

NL Design System richtlijnen:

De zichtbare naam van de button is gelijk aan de toegankelijke naam

WCAG: 2.5.3 Label in naam

De zichtbare naam van de button is gelijk aan de toegankelijke naam.

Dit is het eenvoudigst te realiseren door een button-element te gebruiken met daarin tekst:

<button>Ga naar stap 2</button>

Pas op met het gebruik van aria-label om een naam te geven aan een button. Een aria-label overschrijft de tekstinhoud van een button. Zodoende kan een button een toegankelijke naam krijgen die anders is dan de zichtbare naam, waardoor mensen die hulpsoftware gebruiken moeilijkheden kunnen krijgen met het bedienen van de button. Als je echt een aria-label nodig hebt, zorg dan dat de waarde van het aria-label begint met de exacte tekst die zichtbaar is in de button.

NL Design System richtlijnen:

De zichtbare naam moet overeenkomen met de toegankelijke naam

De button heeft een minimale grootte van 44 bij 44 pixels

WCAG: 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

Zorg ervoor dat het element een minimale grootte heeft van 44 bij 44 pixels. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem. Anders kan het element niet goed meegroeien wanneer de gebruiker inzoomt.

Let op: Links in zinnen en paragrafen van tekst zijn uitgezonderd. De grootte van het aanwijsgebied is hier afhankelijk van de grootte van de linktekst zelf.

NL Design System richtlijnen:

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

WCAG: 3.1.2 Taal van onderdelen

Als een tekst 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. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

De contrastverhouding van de tekstkleur in de button met de achtergrondkleur is hoog genoeg.

WCAG: 1.4.3 Contrast (minimum)

De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

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

Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

NL Design System richtlijnen:

Als het zichtbare label van de button een afbeelding of icoon is, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1.

WCAG: 1.4.11 Contrast van niet-tekstuele content

Als het label van het element 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.

NL Design System richtlijnen:

Zorg voor voldoende kleurcontrast voor niet-tekstuele content

Wanneer een button de toetsenbordfocus krijgt is de focus zichtbaar

WCAG: 2.4.7 Focus zichtbaar

Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid. Maak de focusrand ten minste 2 pixels dik, met een contrast van minimaal 3:1, zie WCAG-succescriterium 2.4.13 Focusweergave.

NL Design System richtlijnen:

De button heeft een goed zichtbare focusindicator

WCAG: 2.4.13 Focusweergave

Er is een goed zichtbare focusindicator. Dit doe je met een minimale dikte van 2 pixels en een minimaal contrast van 3:1 ten opzichte van aangrenzende kleuren. Hou ook rekening met het contrast met de verschillende achtergrondkleuren waarop een element gebruikt kan worden. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen.

NL Design System richtlijnen:

Buttons met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label

WCAG: 3.2.4 Consistente identificatie

Elementen met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label.

NL Design System richtlijnen:

Respecteer conventies

Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar

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

Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

NL Design System richtlijnen:

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar

WCAG: 1.4.12 Tekstafstand

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden.

Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

Je moet de afstand kunnen vergroten naar deze waardes:

Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
Afstand tussen alinea's naar ten minste 2 keer de lettergrootte;
Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

Dit is te testen met een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:

<style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>

NL Design System richtlijnen:

Je kunt de button focussen met de tabtoets en activeren met de spacebar en de entertoets

WCAG: 2.1.1 Toetsenbord

Je kunt het element focussen met de tabtoets en activeren met de spacebar en de entertoets.

NL Design System richtlijnen:

De functionaliteit van de button veroorzaakt geen toetsenbordval

WCAG: 2.1.2 Geen 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.

Als de gebruiker een button indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken

WCAG: 2.5.2 Aanwijzerannulering

Als de gebruiker een interactief element indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid is om actie te voorkomen of ongedaan te maken.

Dat kan op meerdere manieren:

De actie gebeurt pas bij het up-event, en de gebruiker kan nog de aanwijzer verplaatsen naar buiten het element om het up-event te voorkomen.
De actie gebeurt bij het down-event, maar bij het up-event wordt het effect weer ongedaan gemaakt.
Je kunt het effect achteraf weer ongedaan maken.

Als de Button de toetsenbordfocus krijgt, is het element niet volledig bedekt door andere inhoud

WCAG: 2.4.11 Focus niet bedekt (minimum)

Zorg ervoor dat een element dat de toetsenbordfocus heeft zichtbaar is en niet volledig bedekt is door andere inhoud.

Als het label van een button uit een icoon bestaat, dan heeft deze een goed tekstalternatief

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

Het beste is om altijd visueel een tekst te tonen naast of onder het icoon. Iconen zijn immers niet altijd voor iedereen duidelijk. Een tekstalternatief voor het icoon is niet nodig als er tekst in beeld is. Een img kan dan een leeg alt-attribuut krijgen (alt="").

Is het toch gewenst om alleen een icoon te tonen, hou dan rekening met het volgende.

Een img met een alt-attribuut is een robuuste manier om een alternatieve tekst toe te voegen. De waarde van het alt-attribuut vormt de naam van de button:

<button>
  <img src="trashcan.svg" alt="Delete" />
</button>

Een andere manier is een svg in de button op te nemen, samen met een visueel verborgen tekst die de naam van de button vormt :

<button>
  <svg class="nl-icon nl-icon--text" focusable="false" aria-hidden="true">
    <use xlink:href="assets/svg/icons-core-set.svg#-icon-trashcan"></use>
  </svg>
  <span class="visually-hidden">Delete</span>
</button>

NL Design System richtlijnen:

De button heeft een rol van button en een toegankelijke naam die duidelijk maakt waar de button voor dient

WCAG: 4.1.2 Naam, rol, waarde

De button heeft een rol van button en een toegankelijke naam die duidelijk maakt waar de button voor dient. Ook is de toestand (state) duidelijk en door de gebruiker te veranderen met hulpsoftware.

HTML-elementen hebben een impliciete rol. Maak daar gebruik van. Kies daarom een button-element als je een button nodig hebt:

<button>Menu</button>

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.

ARIA is wel goed te gebruiken als je de state moet aangeven. Hiervoor bestaat geen HTML-attribuut. Bijvoorbeeld bij een uitgeklapte menuknop:

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

We vinden het belangrijk dat de component Button 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 Button 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.

Button

Definition of Done

Help Wanted - 11 van 11

Community - 15 van 15

Candidate - 0 van 24

Hall of Fame - 0 van 20

Implementaties

Community Amsterdam

Component gebruiken?

Community Utrecht

Component gebruiken?

Community RVO

Component gebruiken?

Acceptatiecriteria

Toegankelijkheid algemeen

Toegankelijkheid visueel ontwerp

Toegankelijkheid zoom en herschalen

Toegankelijkheid toetsenbord

Toegankelijkheid screenreader

Help component verbeteren