Pristupačan naziv: ispravna upotreba aria-labela

Asistivna tehnologija ne vidi vaš kod, nego stablo pristupačnosti razriješeno iz njega. U tom stablu svaka kontrola ima ulogu (gumb, poveznica, potvrdni okvir) i naziv. Bez naziva čuje se samo uloga: „gumb“. To je pogađanje s posljedicama.

Odakle dolazi naziv

1. aria-labelledby (upućuje na vidljiv tekst) pobjeđuje sve ostalo.
2. aria-label (slobodan tekst) pobjeđuje sadržaj samog elementa.
3. Vidljiv tekstualni sadržaj elementa, odnosno povezana oznaka kod polja obrasca.
4. Zamjenski izvori poput title ili alt, ovisno o elementu.

Bitno u tom redoslijedu: aria-label nadjačava vidljiv tekst. To je pogrešno upravo onda kada dobar tekst već postoji.

Četiri klasične pogreške

<!-- 1. Kein Name: der Screenreader sagt nur "Schaltflaeche" -->
<button class="icon-btn">
  <svg><use href="#icon-close"></use></svg>
</button>

<!-- 2. Sichtbare Beschriftung und Name gehen auseinander:
     "Absenden" steht da, "Formular abschicken 2" wird angesagt.
     Sprachsteuerung ("Klick Absenden") findet den Button nicht mehr -->
<button aria-label="Formular abschicken 2">Absenden</button>

<!-- 3. aria-label ueberschreibt vorhandenen, guten Text -->
<a href="/preise" aria-label="Link">Preise ansehen</a>

<!-- 4. Div als Button: keine Rolle, kein Name, nicht fokussierbar -->
<div class="btn" onclick="save()">Speichern</div>

Kako se radi ispravno

<!-- 1. Icon-Button: Name per aria-label, Grafik ausgeblendet -->
<button class="icon-btn" aria-label="Dialog schliessen">
  <svg aria-hidden="true" focusable="false"><use href="#icon-close"></use></svg>
</button>

<!-- 2. Sichtbarer Text IST der Name: kein aria-label noetig -->
<button>Absenden</button>

<!-- 3. Wenn ein Zusatz noetig ist, sichtbaren Text einschliessen -->
<a href="/preise" aria-label="Preise ansehen, oeffnet die Preisuebersicht">
  Preise ansehen
</a>

<!-- 4. Echtes Element statt div: Rolle, Fokus und Tastatur gratis -->
<button type="button" onclick="save()">Speichern</button>

Pravilo: vidljiv tekst pobjeđuje aria-label. Ako treba dodatni kontekst, dopišite ga i zadržite vidljiv tekst na početku umjesto da ga zamijenite.

Više jednako označenih gumba

<!-- Mehrere gleich beschriftete Buttons unterscheidbar machen:
     aria-labelledby setzt den Namen aus vorhandenem Text zusammen -->
<tr>
  <td id="row-4711">Laufschuh Modell 4711</td>
  <td>
    <button id="del-4711" aria-labelledby="del-4711 row-4711">
      Loeschen
    </button>
  </td>
</tr>
<!-- Angesagt wird: "Loeschen Laufschuh Modell 4711, Schaltflaeche" -->

U tablicama i popisima često stoji deset gumba s istim tekstom. Tko zatraži popis kontrola stranice, čuje „obriši“ deset puta. aria-labelledby slaže naziv iz teksta retka bez promjene vidljivog sučelja.

Provjera

1. Otvorite DevTools, odaberite element i pročitajte ulogu i naziv u odjeljku pristupačnosti.
2. Ako je naziv prazan ili odgovara nazivu datoteke ili ikone, pogrešan je.
3. Usporedite vidljiv tekst s nazivom: vidljiv tekst mora se u njemu pojaviti.