The accessible name: using aria-label correctly

Assistive technology does not see your markup, it sees the accessibility tree resolved from it. In that tree every control has a role (button, link, checkbox) and a name. With no name you hear only the role: „button“. That is guesswork with consequences.

Where the name comes from

1. aria-labelledby (pointing at visible text) wins over everything else.
2. aria-label (free text) wins over the element's own content.
3. The visible text content of the element, or the associated label for form fields.
4. Fallbacks such as title or alt, depending on the element.

The important part of that order: aria-label overrides visible text. Which is exactly wrong when good text is already there.

The four classic mistakes

<!-- 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>

How to do it right

<!-- 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>

Rule of thumb: visible text beats aria-label. If you need extra context, add it and keep the visible text at the start rather than replacing it.

Several identically labelled buttons

<!-- 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" -->

Tables and lists often carry ten buttons with the same text. Anyone listing the controls of the page then hears „delete“ ten times. aria-labelledby composes the name from the row text without changing the visible interface.

Testing

1. Open DevTools, select the element, read role and name in the accessibility pane.
2. If the name is empty or matches the file or icon name, it is wrong.
3. Compare the visible text with the name: the visible text has to appear in it.