Wann ist aria-label falsch?

Immer dann, wenn das Element bereits sichtbaren Text hat, der die Funktion beschreibt. aria-label überschreibt diesen Text und erzeugt einen Widerspruch zwischen dem, was man sieht, und dem, was angesagt wird.

Reicht ein title-Attribut als Name?

Nein, verlass dich nicht darauf. title erscheint nur bei Maus-Hover, wird auf Touch-Geräten gar nicht angezeigt und von assistiver Technik uneinheitlich behandelt. Nutze sichtbaren Text oder aria-label.

Warum aria-hidden am Icon?

Damit die Grafik nicht zusätzlich angekündigt wird. Der Name des Buttons steht im aria-label; das Icon selbst trägt keine eigene Information. focusable="false" verhindert außerdem, dass SVGs im Internet Explorer und in älteren Engines fokussierbar werden.

Tutorial

Der zugängliche Name: aria-label richtig einsetzen

1 Min. Lesezeit

Kurz gesagt

Der zugängliche Name ist das, was ein Screenreader zu einem Bedienelement ansagt. Sichtbarer Text im Element ist bereits der Name, aria-label ersetzt ihn. Setze aria-label deshalb nur, wo es keinen sichtbaren Text gibt (Icon-Buttons), und lass die sichtbare Beschriftung immer im Namen enthalten, sonst versagt die Sprachsteuerung (2.5.3).

In Kürze

Elemente ohne Text finden
Suche nach Buttons und Links, die nur ein Icon oder eine Grafik enthalten.
Namen setzen
Gib ihnen ein aria-label, das die Funktion beschreibt, und blende die Grafik mit aria-hidden aus.
Sichtbare Beschriftung respektieren
Wo Text sichtbar ist, muss dieser Text im Namen vorkommen. Kein widersprechendes aria-label.
Mit dem Accessibility-Tree prüfen
In den DevTools den Accessibility-Tree öffnen und den aufgelösten Namen kontrollieren.

Assistive Technik sieht nicht dein Markup, sondern den daraus aufgelösten Accessibility-Tree. Darin hat jedes Bedienelement eine Rolle (Schaltfläche, Link, Kontrollkästchen) und einen Namen. Fehlt der Name, hört man nur die Rolle: „Schaltfläche“. Das ist Raten mit Konsequenzen.

Woher der Name kommt

aria-labelledby (verweist auf sichtbaren Text) gewinnt vor allem anderen.
aria-label (freier Text) gewinnt vor dem Inhalt des Elements.
Der sichtbare Textinhalt des Elements, bei Formularfeldern das verknüpfte label.
Ersatzquellen wie title oder alt, je nach Element.

Wichtig an dieser Reihenfolge: aria-label überschreibt sichtbaren Text. Das ist genau dann falsch, wenn schon guter Text da steht.

Die vier klassischen Fehler

Vorher: so kommt nichts oder das Falsche anHTML

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

So machst du es richtig

Nachher: Name vorhanden und passendHTML

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

Faustregel: sichtbarer Text schlägt aria-label. Brauchst du zusätzlichen Kontext, dann ergänze ihn und lass den sichtbaren Text am Anfang stehen, statt ihn zu ersetzen.

Mehrere gleich beschriftete Buttons

aria-labelledby aus vorhandenem TextHTML

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

In Tabellen und Listen stehen oft zehn Buttons mit demselben Text. Wer sich die Bedienelemente einer Seite auflisten lässt, hört dann zehnmal „Löschen“. aria-labelledby setzt den Namen aus dem Zeilentext zusammen, ohne die sichtbare Oberfläche zu ändern.

Prüfen

DevTools öffnen, Element auswählen, im Accessibility-Bereich Rolle und Name ablesen.
Ist der Name leer oder heißt er wie die Datei bzw. das Icon, ist er falsch.
Sichtbaren Text mit dem Namen vergleichen: der sichtbare Text muss darin vorkommen.

Häufige Fragen

Wann ist aria-label falsch?: Immer dann, wenn das Element bereits sichtbaren Text hat, der die Funktion beschreibt. aria-label überschreibt diesen Text und erzeugt einen Widerspruch zwischen dem, was man sieht, und dem, was angesagt wird.
Reicht ein title-Attribut als Name?: Nein, verlass dich nicht darauf. title erscheint nur bei Maus-Hover, wird auf Touch-Geräten gar nicht angezeigt und von assistiver Technik uneinheitlich behandelt. Nutze sichtbaren Text oder aria-label.
Warum aria-hidden am Icon?: Damit die Grafik nicht zusätzlich angekündigt wird. Der Name des Buttons steht im aria-label; das Icon selbst trägt keine eigene Information. focusable="false" verhindert außerdem, dass SVGs im Internet Explorer und in älteren Engines fokussierbar werden.

Kostenlosen Scan anfragen

Sagen Sie uns Ihre Domain - wir führen einen kostenlosen Erst-Scan durch und zeigen Ihnen die wichtigsten Barrieren.

Kostenlosen Scan starten

← Zurück zu den Tutorials