ARIA-Labels sind Attribute, die einem Bedienelement einen Namen geben, wenn sichtbarer Text dafür fehlt. Der häufigste Fall ist die Schaltfläche, die nur ein Symbol zeigt: Ohne Namen wird sie als „Schaltfläche“ angesagt und sonst nichts.
- ARIA-Labels
Attribute, die einem Bedienelement einen Namen geben, wenn sichtbarer Text dafür fehlt.
Beispiel: „Die Lupe im Header trägt das ARIA-Label ‚Website durchsuchen‘.“Auch: aria-label für einen selbst geschriebenen Namen, aria-labelledby für den Verweis auf vorhandenen Text. Beide erzeugen denselben Namen, nur aus verschiedenen Quellen.
Abgrenzung zum title-Attribut: Der title erscheint als Kurzhinweis bei der Maus, wird auf Touchgeräten gar nicht angezeigt und von Screenreadern uneinheitlich behandelt. Als Name taugt er nicht.
Abgrenzung zum Alternativtext: Der Alternativtext beschreibt ein Bild. Das ARIA-Label benennt ein Bedienelement, also das Ziel einer Handlung.
Wann ein Label nötig ist
Bei Symbolen ohne Beschriftung, bei mehrdeutigen Linktexten und bei mehreren gleichnamigen Bereichen. Drei Navigationen auf einer Seite heißen für den Screenreader alle „Navigation“, bis jede ihren eigenen Namen bekommt.
<!-- Symbol ohne Text: Name ueber aria-label -->
<button aria-label="Website durchsuchen">
<svg aria-hidden="true" focusable="false"> ... </svg>
</button>
<!-- besser, wo Platz ist: sichtbar versteckter Text statt aria-label -->
<button>
<svg aria-hidden="true" focusable="false"> ... </svg>
<span class="nur-fuer-screenreader">Website durchsuchen</span>
</button>Warum sichtbarer Text meist besser ist
Wer die Seite per Sprache bedient, sagt, was er sieht. Trägt die Schaltfläche sichtbar „Suchen“ und per Label „Website durchsuchen“, geht der Befehl ins Leere. Das Erfolgskriterium zur Beschriftung verlangt deshalb, dass der sichtbare Text im Namen enthalten ist.
Welche Quelle den Namen liefert und in welcher Reihenfolge, beschreibt die ARIA-Praxis zu Namen und Beschreibungen. Kurz: sichtbarer Text vor aria-labelledby vor aria-label.
Woran Labels scheitern
Daran, dass sie überschreiben. Ein aria-label ersetzt den sichtbaren Text vollständig, auch wenn dieser brauchbar wäre. Wer ein Label setzt, um etwas zu ergänzen, nimmt dem Element stattdessen seinen Namen.
Der zweite Fall ist das Label auf einem Element, das keinen Namen aufnimmt. An einem div ohne Rolle verpufft aria-label wirkungslos; erst Rolle und Name zusammen ergeben eine Ansage.