0Pricing
Frontend Academy · Lektion

ARIA-Rollen und -Attribute

Wenden Sie Landmark-Rollen, Live-Regionen und aria-*-Attribute an, um Komponenten zu verbessern, wenn natives HTML nicht ausreicht.

ARIA-Rollen und -Attribute ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Was ist ARIA?

ARIA (Accessible Rich Internet Applications) ist eine Sammlung von HTML-Attributen, die assistiven Technologien die Rolle, den Zustand und die Eigenschaften von Elementen beschreiben. ARIA bildet die Brücke für benutzerdefinierte Widgets, die sich nicht mit nativem HTML ausdrücken lassen.

Erste ARIA-Regel: Kein ARIA verwenden

Wenn ein natives Element Ihre Anforderungen erfüllt, verwenden Sie es. <button> ist besser als <div role="button">. Falsch eingesetztes ARIA ist schlimmer als gar kein ARIA – es erweckt den Eindruck von Barrierefreiheit, lässt Nutzer aber dennoch nicht weiterkommen.

Kategorien von ARIA-Attributen

Drei Kategorien: Rollen (was etwas ist), Eigenschaften (relativ statisch – aria-label, aria-describedby) und Zustände (dynamisch – aria-expanded, aria-pressed, aria-checked).

Landmark-Rollen

Kennzeichnen Sie wichtige Seitenbereiche. Für die meisten gibt es HTML5-Entsprechungen, die Sie bevorzugen sollten.

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

aria-label und aria-labelledby

aria-label: stellt einen zugänglichen Namen als Zeichenkette bereit. aria-labelledby: verweist auf den Text eines anderen Elements als Namen. Verwenden Sie diese Attribute, wenn kein sichtbarer Text vorhanden oder der vorhandene Text nicht ausreichend ist.

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

aria-describedby für Hinweise

aria-describedby verknüpft ein Element mit einer längeren Beschreibung. Das ist für Formularhinweise, Fehlermeldungen und Tooltips hilfreich.

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

aria-expanded für Offenlegungen

Buttons, die ein Panel ein- und ausblenden, sollten aria-expanded = true/false bereitstellen.

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

aria-pressed für Umschaltbuttons

Buttons mit einem Ein-/Aus-Zustand (Stummschaltung, Fettdruck) verwenden aria-pressed.

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

Live-Regionen: aria-live

Dynamisch aktualisierte Inhalte (Toasts, Suchergebnisse, Fehlerzusammenfassungen) sollten sich in einer Live-Region befinden, damit Screenreader Änderungen ansagen. polite wartet auf eine Pause; assertive unterbricht.

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

Kurzform role="alert"

role="alert" ist eine Kurzform für eine assertive Live-Region mit aria-atomic. Verwenden Sie es sparsam – jeder Alert unterbricht den Nutzer.

aria-hidden für dekorative Inhalte

aria-hidden="true" entfernt ein Element aus dem Accessibility Tree. Verwenden Sie es für dekorative Icons neben Textbeschriftungen – andernfalls sagen Screenreader sie doppelt an.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save
</button>

Mit einem Screenreader testen

Ob ARIA funktioniert, lässt sich nur durch Testen feststellen. VoiceOver (macOS/iOS, kostenlos), NVDA (Windows, kostenlos), TalkBack (Android, kostenlos). 10 Minuten mit VoiceOver zeigen mehr als jedes Audit-Tool.

Kurze Überprüfung

Welches ARIA-Attribut sollten Sie für einen Button mit ausschließlich einem Icon ohne sichtbare Textbeschriftung festlegen?

Zusammenfassung: ARIA

ARIA beschreibt assistiven Technologien die Rolle, Eigenschaften und den Zustand von Elementen. Bevorzugen Sie natives HTML, bevor Sie ARIA einsetzen. aria-label/aria-labelledby stellen zugängliche Namen bereit. aria-describedby dient für Hinweise. aria-expanded/aria-pressed dienen für Umschalter. aria-live dient für dynamische Ansagen. aria-hidden dient für dekorative Inhalte. Testen Sie immer mit einem echten Screenreader.

Häufig gestellte Fragen

Ist die Lektion „ARIA-Rollen und -Attribute“ kostenlos?

Ja — der vollständige Text von „ARIA-Rollen und -Attribute“ 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-Rollen und -Attribute“?

Wenden Sie Landmark-Rollen, Live-Regionen und aria-*-Attribute an, um Komponenten zu verbessern, wenn natives HTML nicht ausreicht. 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 3 von 4.

Wie lange dauert die Lektion „ARIA-Rollen und -Attribute“?

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

  1. WCAG-Stufen A, AA, AAA
  2. Semantisches HTML als Grundlage
  3. ARIA-Rollen und -Attribute
  4. Tastaturnavigation und Fokusverwaltung
← Zurück zu Frontend Academy