Naam voor ARIA-commando-elementen

Hoe geef je een ARIA command element een naam?

Gebruik een van de volgende methoden:

<!-- Gebruik aria-label -->
<div role="button" aria-label="Dialoogvenster sluiten">
  <svg>...</svg>
</div>

<!-- Gebruik aria-labelledby om te verwijzen naar zichtbare tekst -->
<span id="save-label">Document opslaan</span>
<div role="button" aria-labelledby="save-label">
  <svg>...</svg>
</div>

<!-- Voeg zichtbare tekst toe als inhoud -->
<div role="button">Item verwijderen</div>

<!-- Gebruik title als terugvaloptie -->
<div role="link" title="Naar de homepage">
  <img src="logo.png" alt="" />
</div>

Het volgende element faalt omdat het geen naam heeft:

<div role="button">
  <svg aria-hidden="true">...</svg>
</div>

Waarom is dit belangrijk?

Screen readers kondigen interactieve elementen aan met hun naam. Wanneer een element de rol button, link of menuitem heeft maar geen naam, kan de screen reader de gebruiker niet vertellen wat het element doet.

Dit probleem treedt vaak op wanneer knoppen met alleen een icoon worden gebouwd met <div>- of <span>-elementen in plaats van de native <button>- of <a>-elementen.