aria-label im HTML
Ein Name, der zum sichtbaren Text passt
Symbolknopf, Eingabefeld, Beschriftung, Container: vier Stellen, an denen Namen entstehen.
Accessible-Name-Labor
aria-label ist die Reserve, nicht der Standard
Erst sichtbaren Text verbinden. Nur ohne sichtbare Quelle schreiben Sie einen Namen ins Attribut.
Sichtbare Oberfläche
SpeichernNamensquelle
Text im buttonAusgabe der Software
- Rolle
- Schaltfläche
- Name
- Speichern
Kein sichtbares Wort
Reserve
aria-label="Eintrag löschen"Ausgabe der Software
- Rolle
- Schaltfläche
- Name
- Eintrag löschen
Formularfeld
E-Mail-AdresseNative Verbindung
label[for] → input[id]Ausgabe der Software
- Rolle
- Eingabefeld
- Name
- E-Mail-Adresse
Die Überschreibungsfalle
Ein Attribut kann das sichtbare Wort aus dem Namen werfen
aria-label="Formular abschicken"Sprachsteuerung sucht nach dem zugänglichen Namen. Beginnt er nicht mit dem sichtbaren Text, kann der gesprochene Befehl scheitern.
Quellenwahl
Wählen Sie den kürzesten belastbaren Weg
<button>Speichern</button><label for="email">…aria-labelledby="titel-id"aria-label="Dialog schließen"<div aria-label="…"> ×Zum Kopieren
Vier vollständige Muster
Der sichtbare Text und der berechnete Name bleiben gleich. Das Symbol ist dekorativ und wird nicht zusätzlich vorgelesen.
<!-- 1. Textinhalt benennt die Schaltfläche. -->
<button type="button">Speichern</button>
<!-- 2. label benennt das Formularfeld. -->
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email">
<!-- 3. Ein sichtbarer Text benennt den Bereich. -->
<h2 id="filter-titel">Ergebnisse filtern</h2>
<section aria-labelledby="filter-titel">
…
</section>
<!-- 4. Nur der Symbolknopf braucht aria-label. -->
<button type="button" aria-label="Dialog schließen">
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
<path d="M5 5 19 19 M19 5 5 19" fill="none"
stroke="currentColor" stroke-width="2"></path>
</svg>
</button>Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Der Symbolknopf trägt kein Wort Regel button-name
Ein Papierkorb ohne Text bleibt namenlos. aria-label="Eintrag löschen" nennt die Aktion, ohne das Layout zu ändern.
Kritisch Der Text steht neben dem Feld, nicht daran Regel label
Ein span sieht aus wie eine Beschriftung, ist aber keine. label mit for verbindet ihn mit dem Eingabefeld.
Kritisch aria-label sagt etwas anderes als der Knopf Regel label-content-name-mismatch
Wer per Sprachsteuerung „Absenden“ sagt, trifft einen Knopf mit abweichendem Namen nicht. Der sichtbare Text gehört in den Namen.
Kritisch Ein div mit aria-label ohne Rolle Regel aria-prohibited-attr
Ein Container ohne Rolle darf keinen Namen tragen; er wird verworfen. Erst eine passende Rolle macht den Namen zulässig.
Zum Mitnehmen
Die Namen, korrigiert
Erst sichtbarer Text, dann label, dann aria-label.
Korrektur in 3 Schritten ansehen
Dem Symbolknopf einen Namen geben
Das Symbol bleibt sichtbar und für Vorleseprogramme verborgen. aria-label liefert das Wort, das vorgelesen wird.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button"> <svg aria-hidden="true"><use href="#papierkorb"></use></svg> </button>Nachher
<button type="button" aria-label="Eintrag löschen"> <svg aria-hidden="true"><use href="#papierkorb"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf das Symbol. Ein Vorleseprogramm sagt „Eintrag löschen, Schaltfläche“.
Sichtbaren Text zur Beschriftung machen
Ein label mit for wird zum Namen des Feldes. Ein aria-label wäre hier überflüssig und verdeckte den sichtbaren Text.
KorrekturvergleichSchritt 2 · HTML Vorher
<span>Kundennummer</span> <input id="kdnr" name="kdnr" type="text">Nachher
<label for="kdnr">Kundennummer</label> <input id="kdnr" name="kdnr" type="text">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Kundennummer“. Springt der Cursor ins Feld, ist der Name verbunden.
Namen und sichtbaren Text angleichen
Der zugängliche Name beginnt mit dem sichtbaren Text. Sonst findet Sprachsteuerung den Knopf nicht, obwohl das Wort darauf steht.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="submit" aria-label="Formular abschicken"> Absenden </button>Nachher
<button type="submit" aria-label="Absenden und weiter"> Absenden </button>Markierte Zeilen wurden geändert
So prüfen Sie es Sagen Sie den sichtbaren Text in eine Sprachsteuerung. Der Knopf reagiert darauf.