aria-label vs aria-labelledby
Wählen Sie zwischen einem direkt angegebenen und einem referenzierten Namen.
aria-label vs aria-labelledby ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Zwei Möglichkeiten zum Benennen
Wenn die native Beschriftung nicht ausreicht, stehen Ihnen zwei ARIA-Werkzeuge zur Verfügung: aria-label für eine direkt angegebene Zeichenfolge und aria-labelledby, um auf vorhandenen Text zu verweisen.
aria-label enthält eine Zeichenfolge
Verwenden Sie aria-label, wenn kein sichtbarer Text vorhanden ist, den Sie übernehmen können. Geben Sie den gesprochenen Namen direkt am Element selbst an.
<button aria-label="Search">🔍</button>aria-labelledby enthält eine ID
Verwenden Sie aria-labelledby, wenn sichtbarer Text auf der Seite als Name dienen kann. Sein Wert ist die id dieses Elements, keine Zeichenfolge.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>Sichtbaren Text bevorzugen
Verwenden Sie zuerst aria-labelledby. Durch die Wiederverwendung von Text auf dem Bildschirm bleiben gesprochener und sichtbarer Name automatisch synchron.
labelledby kann IDs kombinieren
Geben Sie für aria-labelledby mehrere durch Leerzeichen getrennte IDs an. Der Browser fügt ihren Text in dieser Reihenfolge zu einem Namen zusammen.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby hat Vorrang vor label
Wenn beide vorhanden sind, hat aria-labelledby Vorrang. Der Browser ignoriert aria-label vollständig. Erwarten Sie daher niemals, dass beide zusammengeführt werden.
Ein Element kann sich selbst benennen
Mit aria-labelledby kann ein Element auf seine eigene ID verweisen. Das ist hilfreich, um einen Bereich anhand des Textes seiner sichtbaren Überschrift zu benennen.
label ist unsichtbar
Ein aria-label erscheint niemals auf dem Bildschirm. Es ändert nur, was assistive Technologien ausgeben, daher sehen sehende Nutzer keinen Unterschied.
Achten Sie auf die Übersetzungsfalle
Ein aria-label ist einfacher Text, den Seitenübersetzer häufig überspringen, während labelledby sichtbare Inhalte wiederverwendet, die tatsächlich übersetzt werden.
IDs müssen exakt übereinstimmen
Eine ID in aria-labelledby muss mit der ID eines tatsächlich vorhandenen Elements übereinstimmen. Ein Tippfehler führt stillschweigend dazu, dass das Element überhaupt keinen berechneten Namen besitzt.
Nach der Quelle der Wahrheit wählen
Fragen Sie sich, wo der Name vorhanden ist. Steht er bereits auf dem Bildschirm, verwenden Sie aria-labelledby. Existiert er nur für assistive Technologien, verwenden Sie aria-label.
Schnelltest
Ein Abschnitt zeigt bereits eine h2-Überschrift. Wie sollten Sie den Abschnitt benennen?
Zusammenfassung: label oder labelledby
Sie haben gelernt, aria-labelledby für vorhandenen sichtbaren Text und aria-label für unsichtbare, direkt angegebene Namen zu verwenden, ohne zu erwarten, dass beide kombiniert werden. 🎯
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „aria-label vs aria-labelledby“ kostenlos?
Ja — der vollständige Text von „aria-label vs aria-labelledby“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „aria-label vs aria-labelledby“?
Wählen Sie zwischen einem direkt angegebenen und einem referenzierten Namen. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „aria-label vs aria-labelledby“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Berechnung des zugänglichen Namens verständlich erklärt
- aria-label vs aria-labelledby
- aria-describedby für zusätzlichen Kontext
- Häufige Fehler bei der Benennung, die Steuerelemente stumm schalten