ARIA und Barrierefreiheit: label, role, aria-*
Verknüpfen Sie Labels mit Steuerelementen, setzen Sie bei Bedarf ARIA-Rollen ein und verwenden Sie aria-label und aria-describedby zur Unterstützung von Screenreadern.
ARIA und Barrierefreiheit: label, role, aria-* ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum ARIA?
ARIA (Accessible Rich Internet Applications) ist eine Sammlung von HTML-Attributen, die Zweck, Zustand und Eigenschaften von UI-Komponenten an unterstützende Technologien wie Screenreader übermitteln – insbesondere bei benutzerdefinierten Widgets ohne natives HTML-Gegenstück.
Die erste Regel von ARIA
Verwenden Sie ARIA nicht, wenn ein natives HTML-Element oder -Attribut die Aufgabe übernehmen kann. <button> ist immer besser als <div role="button">. Natives HTML bietet Barrierefreiheit ohne zusätzlichen Aufwand.
Landmark-Rollen
Mit ARIA-Landmark-Rollen können Screenreader-Nutzer zu Abschnitten der Seite springen. Die meisten werden durch semantisches HTML impliziert: <main> → role=main, <nav> → role=navigation. Fügen Sie explizite Rollen nur hinzu, wenn kein semantisches Element verwendet wird.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label stellt einen unsichtbaren zugänglichen Namen für ein Element bereit. Verwenden Sie es, wenn kein sichtbares Textlabel vorhanden ist, auf das verwiesen werden kann. Es wird häufig für Icon-Buttons verwendet.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby verweist über eine ID-Referenz auf den Text eines anderen Elements und verwendet ihn als Label. Wenn bereits ein sichtbares Label vorhanden ist, ist dieses Attribut aria-label vorzuziehen.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby verweist auf zusätzlichen Beschreibungstext – etwa eine Fehlermeldung oder einen Hinweis –, der das Label ergänzt. Screenreader lesen zuerst das Label und anschließend die Beschreibung vor.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded und aria-haspopup
Dynamische Widgets benötigen Zustandsattribute. aria-expanded gibt an, ob ein Disclosure-Widget (Akkordeon, Dropdown) geöffnet oder geschlossen ist. Aktualisieren Sie das Attribut in JavaScript, wenn sich der Zustand ändert.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" entfernt ein Element und alle seine untergeordneten Elemente aus dem Accessibility Tree. Verwenden Sie es für dekorative Elemente wie SVG-Icons, die bereits durch sichtbaren Text beschriftet sind.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Live-Regionen: aria-live
aria-live weist Screenreader an, Änderungen in dieser Region anzukündigen. polite wartet, bis der Nutzer seine aktuelle Aktion beendet hat. assertive unterbricht sofort (sparsam verwenden).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" entspricht implizit aria-live=assertive. Fügen Sie Fehlermeldungen oder wichtige Benachrichtigungen in ein Element mit dieser Rolle ein; Screenreader kündigen sie sofort an.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyBarrierefreie Formularfehler
Wenn ein Feld einen Fehler enthält: Verwenden Sie aria-invalid="true", verknüpfen Sie die Fehlermeldung mit aria-describedby und aktualisieren Sie den Inhalt von role="alert". Dieser dreiteilige Ansatz stellt sicher, dass Screenreader alle erforderlichen Informationen übermitteln.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Schnelltest
Welches ARIA-Attribut stellt den zugänglichen Namen für ein Element bereit, wenn kein sichtbares Textlabel vorhanden ist?
Zusammenfassung: ARIA-Grundlagen
Bevorzugen Sie natives HTML gegenüber ARIA. aria-label für Icon-Buttons. aria-labelledby für den Verweis auf sichtbare Labels. aria-describedby für Hinweise und Fehler. aria-expanded für Disclosure-Widgets. aria-hidden für dekorative Inhalte. aria-live für dynamische Statusaktualisierungen. aria-invalid + role=alert für Formularfehler.
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
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „ARIA und Barrierefreiheit: label, role, aria-*“ kostenlos?
Ja — der vollständige Text von „ARIA und Barrierefreiheit: label, role, aria-*“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „ARIA und Barrierefreiheit: label, role, aria-*“?
Verknüpfen Sie Labels mit Steuerelementen, setzen Sie bei Bedarf ARIA-Rollen ein und verwenden Sie aria-label und aria-describedby zur Unterstützung von Screenreadern. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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 und Barrierefreiheit: label, role, aria-*“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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
- Formularsteuerelemente: input-Typen, select, textarea
- ARIA und Barrierefreiheit: label, role, aria-*
- Semantisches HTML5: Semantik statt div-Suppe
- Attribute zur Formularvalidierung