Ga naar hoofdinhoud

Componenten

Button

Community

Biedt de mogelijkheid om een actie uit te voeren.

Definition of Done

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

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.

    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:

  • Afgevinkt.

    1.4.3 Contrast (minimum)

    De contrastverhouding van de tekstkleur in de button 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:

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

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

    NL Design System richtlijnen:

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

    NL Design System richtlijnen:

  • Afgevinkt.

    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 de button 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:

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

  • Afgevinkt.

    2.4.7 Focus zichtbaar

    Wanneer een button 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:

  • Afgevinkt.

    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 de button gebruikt kan worden. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen.

    NL Design System richtlijnen:

  • Afgevinkt.

    2.5.2 Aanwijzerannulering

    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.

    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.
  • Afgevinkt.

    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:

  • Afgevinkt.

    2.5.5 Grootte van het aanwijsgebied (uitgebreid)

    Zorg ervoor dat de button 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 de button niet goed meegroeien wanneer de gebruiker inzoomt.

    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.

    NL Design System richtlijnen:

  • Afgevinkt.

    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:

Help component verbeteren

We vinden het belangrijk dat Button goed te gebruiken is door iedereen. Help je mee?