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.

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

De focusvolgorde op de pagina en na het activeren van een Button moet logisch zijn. Zorg dat het voorspelbaar is waar de toetsenbordfocus heen gaat na het activeren van een knop.

Over het algemeen geldt: wanneer een button nieuwe content opent, zoals een dialoogvenster of een menu, verplaats je de toetsenbordfocus naar een logische plek in de nieuwe content. Bijvoorbeeld: Na het openen van een ‘Menu’ button verplaatst de toetsenbordfocus naar het eerste menu-item. Nadat de bezoeker de nieuwe content weer heeft gesloten verplaatst de toetsenbordfocus zich weer terug naar de ‘Menu’ button.

Plaats interactieve elementen op een logische plek in de DOM en vermijd het gebruik van tabindex="1" en hoger. Hiermee pas je de natuurlijke focusvolgorde op de pagina aan, waardoor fouten in de focusvolgorde kunnen ontstaan.

NL Design System richtlijnen:

• Toetsenbordbediening van een button
• Disabled submitbuttons

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

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.

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.

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

Zorg ervoor dat de 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:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

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:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn
• Zorg voor een comfortabele regelafstand

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

NL Design System richtlijnen:

• Toetsenbordbediening van een button
• Disabled submitbuttons

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:

• Maak toetsenbordfocus goed zichtbaar
• Let op voorkeursinstellingen voor kleur
• Zorg voor voldoende kleurcontrast voor niet-tekstuele content

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.

Voor knoppen waarbij het essentieel is dat ze activeren bij het indrukken (keydown) geldt een uitzondering. Dit geldt bijvoorbeeld voor knoppen in een schermtoetsenbord en pianotoetsen.

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.