Toegankelijke naam voor dialoogvensters

Hoe geef je een dialoogvenster een toegankelijke naam?

Gebruik aria-labelledby om te verwijzen naar een zichtbare koptekst in het dialoogvenster, of gebruik aria-label voor een dialoogvenster zonder zichtbare titel:

<!-- Met aria-labelledby en een zichtbare koptekst -->
<div role="dialog" aria-labelledby="dialog-titel">
  <h2 id="dialog-titel">Verwijdering bevestigen</h2>
  <p>Weet u zeker dat u dit item wilt verwijderen?</p>
</div>

<!-- Met aria-label als er geen zichtbare koptekst is -->
<div role="dialog" aria-label="Verwijdering bevestigen">
  <p>Weet u zeker dat u dit item wilt verwijderen?</p>
</div>

Gebruik bij voorkeur aria-labelledby als er een zichtbare titel aanwezig is, zodat de tekst programmatisch aan het dialoogvenster wordt gekoppeld.

Waarom is dit belangrijk?

Wanneer een dialoogvenster opent, kondigen schermlezers de naam aan om context te geven over het doel. Zonder naam weten gebruikers niet waar het dialoogvenster over gaat voordat ze de inhoud verkennen. Dit is vooral verwarrend bij waarschuwingsdialoogvensters die directe actie vereisen.