Accessible name voor buttons

Hoe een button met een naam te definiëren?

De volgende <button> elementen hebben een valide naam die gebruikt kan worden door screen readers:

<button aria-label="Button naam"></button>

<!-- of -->
<button aria-labelledby="name-for-button"></button>
<p id="name-for-button">Naam voor button</p>

<!-- of -->
<button title="Button naam"></button>

<!-- of -->
<button>Button naam</button>

Waarom is dit belangrijk?

Screen readers kondigen een button aan met de naam van de button. Op deze manier kunnen mensen die een screen reader gebruiken het doel van de button horen.

Deze regel faalt vaak omdat iconen als button gebruikt worden. Er is voor een screen reader geen manier om een goede beschrijving van een button met een icoon te genereren.