Naam voor ARIA-invoervelden

Hoe geef je een ARIA-invoerveld een naam?

ARIA-invoerrollen zijn onder andere textbox, spinbutton, searchbox, combobox en listbox. Gebruik een van de volgende methoden om ze een naam te geven:

<!-- Gebruik aria-label -->
<div role="textbox" aria-label="Zoekopdracht" contenteditable="true"></div>

<!-- Gebruik aria-labelledby om te verwijzen naar zichtbare tekst -->
<label id="qty-label">Aantal</label>
<div role="spinbutton"
     aria-labelledby="qty-label"
     aria-valuenow="1"
     aria-valuemin="1"
     aria-valuemax="10"
     tabindex="0">
  1
</div>

<!-- Gebruik aria-label op een combobox -->
<div role="combobox" aria-label="Land" aria-expanded="false" aria-haspopup="listbox">
  ...
</div>

Het volgende element faalt omdat het geen naam heeft:

<div role="textbox" contenteditable="true"></div>

Waarom is dit belangrijk?

Screen readers kondigen de naam van een veld aan voordat gebruikers ermee communiceren. Zonder naam weten gebruikers niet welke informatie ze moeten invullen.

Deze regel geldt voor aangepaste invoerelementen die zijn gebouwd met ARIA-rollen. Gebruik bij voorkeur native <input>-elementen met <label>-elementen, omdat die standaard toegankelijk zijn.