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:
codevoorbeeld
<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 :
codevoorbeeld
<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:
codevoorbeeld
<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:
codevoorbeeld
<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: