Toegankelijke naam voor tab-elementen

Hoe een tab element met een naam te definiëren?

De volgende elementen met role="tab" hebben een valide naam die gebruikt kan worden door screen readers:

<div role="tab">Tab naam</div>

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

<!-- of -->
<div role="tab" aria-label="Tab naam"></div>

Waarom is dit belangrijk?

Screen readers kondigen tab elementen aan met de naam van de tab. Op deze manier kunnen mensen die bijvoorbeeld een screen reader gebruiken het doel van elke tab in een tab-interface begrijpen.

Deze regel faalt vaak omdat tabs alleen iconen bevatten zonder tekstalternatief, waardoor gebruikers van screen readers het doel van de tab niet kunnen bepalen.