Ga naar hoofdinhoud

Button

Community

Biedt de mogelijkheid om een actie uit te voeren.

Definition of Done

Community implementaties

Amsterdam

11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-button in CSS
ams-button in React

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-button in CSS
utrecht-button in HTML
utrecht-button in Web Component
utrecht-button in React
utrecht-button in Vue
utrecht-button in Angular

RVO

9 van 11 stappen gedocumenteerd op het Community RVO projectbord

Snel aan de slag

rvo-button in CSS
rvo-button in React

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Filter acceptatiecriteria voor:

15 van de 15 items zijn nu zichtbaar.

  • Als het label van een button uit alléén een icoon bestaat, dan heeft deze een goed tekstalternatief.

    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:

    designercontentmakerWCAG 1.1.1Niveau A
  • Het is duidelijk of een button in- of uitgeklapt is en/of een relatie heeft met andere componenten.

    Als de button in relatie staat tot andere componenten, zoals een menu of een dialog, is deze informatie ook beschikbaar voor bezoekers die gebruik maken van hulpsoftware.

    Dit doe je door het aria-haspopup attribuut te gebruiken en in te stellen als "menu", "listbox", "tree", "grid", "dialog" of "true". Geef daarnaast de relatie aan met aria-controls. Als waarde stel je daar één of meerdere id's in van de specifieke onderdelen die worden aangestuurd door de button.

    developerWCAG 1.3.1Niveau A
  • De contrastverhouding van de tekstkleur in de button met de achtergrondkleur is hoog genoeg.

    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:

    designercontentmakerWCAG 1.4.3Niveau AA
  • Het label van de button bestaat uit gewone tekst, niet uit een afbeelding 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:

    designercontentmakerWCAG 1.4.5Niveau AA
  • 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.

    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:

    designercontentmakerWCAG 1.4.11Niveau AA
  • De functionaliteit van de button veroorzaakt geen toetsenbordval.

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

    developerWCAG 2.1.2Niveau A
  • Het label van de button maakt kort en bondig duidelijk waar de button voor dient.

    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:

    designercontentmakerWCAG 2.4.6Niveau AA
  • Als de button de toetsenbordfocus krijgt, is het element niet volledig bedekt door andere inhoud.

    Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

    designerdeveloperWCAG 2.4.11Niveau AA
  • De button heeft een goed zichtbare focusindicator.

    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:

    designerdeveloperWCAG 2.4.13Niveau AAA
  • De zichtbare naam van de button is gelijk aan de toegankelijke 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:

    developerWCAG 2.5.3Niveau A
  • De button heeft een minimale grootte van 44 bij 44 pixels.

    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:

    designerdeveloperWCAG 2.5.5Niveau AAA
  • 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.

    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.

    NL Design System richtlijnen:

    developercontentmakerWCAG 3.1.2Niveau AA
  • De button activeert niet al bij toetsenbordfocus.

    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.

    developerWCAG 3.2.1Niveau A
  • Buttons met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label.

    Elementen met gelijke functies hebben hetzelfde uiterlijk en hetzelfde label.

    NL Design System richtlijnen:

    designerdeveloperWCAG 3.2.4Niveau AA
  • De button heeft een toegankelijke naam die duidelijk maakt waar de button voor dient en de staat van de button is beschikbaar.

    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.

    Zorg er daarnaast voor dat het type-attribuut kloppend is bij de rol van de knop, zoals "submit" voor een verzendknop en "reset" voor een resetknop.

    NL Design System richtlijnen:

    designercontentmakerWCAG 4.1.2Niveau A

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Filter acceptatiecriteria voor:

7 van de 7 items zijn nu zichtbaar.

  • Het is mogelijk om relaties met andere componenten aan te geven.

    Als de button in relatie staat tot andere componenten, zoals een menu of een dialog, is het mogelijk deze informatie beschikbaar te maken voor bezoekers die gebruik maken van hulpsoftware.

    Je kunt het aria-haspopup-attribuut gebruiken en instellen als "menu", "listbox", "tree", "grid", "dialog" of "true". Je kunt daarnaast de relatie aangeven met aria-controls. Als waarde stel je daar één of meerdere id's in van de specifieke onderdelen die worden aangestuurd door de button.

    developerWCAG 1.3.1Niveau A
  • Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar.

    Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

    Zorg ervoor dat het component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

    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. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    NL Design System richtlijnen:

    developerWCAG 1.4.4Niveau AA
  • Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar.

    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. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

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

    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. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    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 extensie zoals Stylus of User CSS, 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:

    developerWCAG 1.4.12Niveau AA
  • Je kunt de button focussen met de tabtoets en activeren met de spatiebalk en de entertoets.

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

    NL Design System richtlijnen:

    developerWCAG 2.1.1Niveau A
  • Wanneer een button de toetsenbordfocus krijgt is de 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.

    NL Design System richtlijnen:

    developerWCAG 2.4.7Niveau AA
  • Als de gebruiker een button indrukt met een aanwijzer zoals een muis of vinger, is er de mogelijkheid om de actie te voorkomen of ongedaan te maken.

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

    Gebruik hiervoor het click-event. Dit is een apparaatonafhankelijke methode. Zo activeert de actie niet als de bezoeker de aanwijzer indrukt, maar pas als de bezoeker de aanwijzer weer loslaat. De bezoeker kan de aanwijzer nog verplaatsen naar buiten het element om de actie weer ongedaan te maken.

    developerWCAG 2.5.2Niveau A
  • De button heeft een rol van button en het type is instelbaar.

    De component en de afzonderlijke interactieve elementen in de component hebben de juiste rol en de juiste attributen voor het aangeven van de staat en de waarde.

    developerWCAG 4.1.2Niveau A

Help component verbeteren

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