Aria-label en aria-labelledby

Lees eerst Wat is ARIA?

Elke component in de accessibility tree heeft een naam nodig. Als een HTML-element is gebruikt, is er een techniek die de naam impliciet invult. Je kan de naam van een component in de accessibility tree ook toevoegen of wijzigen Met aria-label en aria-labelledby.

Impliciet via HTML

HTML-elementen hebben standaard een manier om de component een naam te geven. Voorbeelden zijn:

• De tekst tussen de open- en sluittag van een a- en button-element:

  <a href="/contact">Neem contact op</a>

• Het alt-attribuut van het img-element:

  <img src="logo.png" alt="AnySurfer" />

• Het label bij input- en select-elementen:

  <label for="fname">Uw voornaam</label>
  <input type="text" id="fname" />

Met ARIA

Je kan de naam van een component in de accessibility tree toevoegen of wijzigen met de ARIA-attributen aria-label en aria-labelledby.

• De waarde van een aria-label-attribuut is een gewone tekst.

  Voorbeeld: dit invoerveld heeft geen zichtbare naam die we als label kunnen gebruiken. Met aria-label kunnen we in de accessibility tree een naam toevoegen aan het invoerveld:

  <form name="search_website">
  <input type="text" name="search" aria-label="Zoekterm">
  <input type="submit" value="Zoeken">
  </form>

• De waarde van een aria-labelledby-attribuut is dezelfde als de waarde van het id van de component die de naam bevat.

  Voorbeeld: elk tabpaneel krijgt dezelfde naam als de tab die ernaar verwijst:

  <a role="tab" id="tab1">Weekdagen</a>
  <a role="tab" id="tab2">Zaterdag</a>
  <a role="tab" id="tab3">Zon- en feestdagen</a>
  
  <div id="panel1" role="tabpanel" aria-labelledby="tab1">
  Open van 9u tot 18u</div>
  <div id="panel2" role="tabpanel" aria-labelledby="tab2">
  Open van 10u tot 17u</div>
  <div id="panel3" role="tabpanel" aria-labelledby="tab3">
  Gesloten</div>

Aandachtspunten

• Gebruik een aria-label(ledby)-attribuut enkel bij een component die een rol heeft. Gebruik het niet op een span of div.
• aria-label(ledby) is vooral bedoeld om een naam te geven aan een component die geen impliciete naam heeft. Als de component al een naam heeft, zal aria-label(ledby) deze vervangen. In een aantal situaties is dit gewenst, maar het is ook de oorzaak van heel wat ARIA-fouten (zie voorrangsregels).
• Hou er rekening mee dat ARIA-labels enkel bestaan in de accessibility tree.
• Let op de dubbele "l" in labelledby.
• Vergeet de inhoud van ARIA-labels niet te vertalen in de taal van de pagina.

• Herhaal de rol van de component niet in zijn naam. Doe niet:

  <button aria-label="Zoekknop">
  <a class="fb" href="facebook.com" aria-label="Link naar Facebook"></a>
  <nav aria-label="hoofdnavigatie">
  

  Doe wel:

  <button aria-label="Zoeken">
  <a class="fb" href="facebook.com" aria-label="Facebook"></a>
  <nav aria-label="hoofd"> <!-- of zonder aria-label -->

Voorrangsregels

Een algoritme legt vast hoe een component een naam krijgt en wat de voorrangsregels zijn. De waarde van een aria-label(ledby)-attribuut heeft altijd voorrang en vervangt impliciete namen.

Goede voorbeelden:

<button type="button" aria-label="Sluiten">X</button>

De letter X is als kruisje visueel herkenbaar als een sluitknop, maar de impliciete naam van deze knop (X) is niet betekenisvol voor screenreadergebruikers. Het aria-label (sluiten) overschrijft de impliciete naam en verduidelijkt de functie van de knop.

<h2>Producten</h2>
<a href="/producten" aria-label="Lees meer over onze producten">
Lees meer
</a>

De zichtbare linktekst is "lees meer". De inhoud van het aria-label vervangt de naam in de accessibility tree door "Lees meer over onze producten".

Dit is een correcte toepassing, maar hou rekening met WCAG succescriterium 2.5.3 Label in naam: de naam van de component in de accessibility tree mag de zichtbare tekst uitbreiden, maar niet vervangen.

Slecht voorbeeld:

<a href="/en" aria-label="English version">
EN
</a>

Dit is een link naar de Engelse versie van een website. Iemand bedacht dat de linktekst "EN" misschien niet zo betekenisvol is en verving het door "English version" via aria-label. Het essentiële aspect is dat ARIA-labels enkel bestaan in de accessibility tree en dit leidt tot verwarring:

• Screenreaders lezen nu "English version" als linktekst, maar op het scherm staat nog steeds EN. Screenreadergebruikers weten niet dat ze een andere linktekst horen dan wat er op het scherm staat. Dat kan verwarrend zijn voor iemand die naar het scherm kijkt.
• Gebruikers van dicteersoftware spreken het commando "klik EN" uit, want dat is wat ze op het scherm zien. Dit commando werkt niet, want de dicteersoftware gebruikt de accessibility tree en daar is de linktekst "English version". Als gebruiker van dicteersoftware kan je niet weten dat de zichtbare tekst werd veranderd.

Nog een slecht voorbeeld van een overschrijvend aria-label:

<a class="external" aria-label="Externe link" 
href="https://www.anysurfer.be">
AnySurfer
</a> 

Deze link bevat een icoontje dat aangeeft dat de link naar een andere website verwijst. Dit icoon heeft een tekstalternatief nodig, maar het is niet correct om dit toe te voegen via een aria-label op de link. De naam van de link in de accessibility tree is niet langer "AnySurfer". Het aria-label overschrijft de linktekst en verandert de naam in "externe link".

Als we de code inspecteren en de computed properties bekijken in de accessibility tree, dan is de hiërarchie duidelijk: hoogst in rang is aria-labelledby wat leeg is in dit geval. Daarna komt aria-label: Externe link. Pas daarna komt de impliciete linktekst die hier wegvalt omdat ze is overschreven.

Meer lezen

• Hoe wordt de accessible name berekend?
• Niet alle HTML-elementen mogen een naam krijgen: als er bij een HTML-element “naming prohibited” staat, dan mag het geen aria-label hebben (behalve als het een andere rol heeft gekregen).
• Providing accessible names (ARIA practice guide).