01
Nach dem Token suchen
button, role=button und aria-expanded funktionieren als Suche. Der Filter trennt Rollen und Attribute innerhalb der eingebauten Liste, ohne Netzwerkabruf.
Entwicklerreferenz
ARIA Rollenund Attribute im Überblick
Suchen Sie nach einem Rollennamen oder aria-Attribut und lesen Sie Beispiel, Bedienvoraussetzungen und Normquelle zusammen.
ARIA Rollen
Treffer
button
Rollebutton bezeichnet eine auslösbare Aktion; ein echtes button-Element bringt Fokus und Tasten mit.
Tastatur: Natives HTML unterstützt grundlegende Tasten. Eigene Rollen brauchen entsprechende Logik.
Achtung: Eine native Semantik mit gleichem Verhalten braucht keine doppelte role-Angabe.
Wichtige Anforderungen: Keine
HTML-Beispiel
<button type="button">Save</button>Bedienung ausprobieren
0-mal ausgelöst
Die Suche bleibt auf dieser Seite; externe Quellen öffnen sich erst nach einem Klick.
Kategorie
1 von 16 Einträgen
WAI-ARIA 1.2 · 06.06.2023Geprüft am 23.09.2026
Vor einer selbstgebauten Komponente lohnt die Frage, ob ARIA Rollen überhaupt nötig sind. Ein echtes button- oder input-Element bringt Bedeutung und Tastaturverhalten bereits mit; ein role-Attribut allein liefert nur Semantik.
Diese Übersicht zu ARIA Rollen verbindet häufige Zustände und Eigenschaften mit kopierbaren Beispielen. Für Tabs, Dialoge und Comboboxen führt ein zusätzlicher Link zur ausführlichen APG-Anleitung.
Warum diese ARIA Rollen Referenz nutzen
Rolle, tatsächliche Bedienung und feste Quelle stehen nebeneinander.
Native Elemente zuerst prüfen
Bei button und checkbox zeigt die Referenz zuerst HTML-Elemente. ARIA Rollen auf einem div ergänzen weder Fokus noch die Aktivierung mit Eingabe- und Leertaste.
Zustand mit Inhalt verbinden
Das Beispiel für aria-expanded zeigt Schalter und gesteuerten Bereich gemeinsam. Auch bei ARIA Rollen gilt: Der gemeldete Zustand muss sich mit der sichtbaren Oberfläche ändern.
Vom Suchbegriff zur nutzbaren Komponente
02
Vor dem Kopieren Bedienung lesen
Ein Beispiel für ARIA Rollen ist nur der semantische Anfang. Bei tab, dialog und combobox erklärt der APG-Link die nötigen Fokus- und Tastaturmuster.
03
Version prüfen und selbst testen
Jeder Eintrag führt zur festgelegten WAI-ARIA 1.2. Testen Sie danach die fertige Komponente mit Tastatur und Screenreader im wirklichen Seitenkontext.
Definitionen mit konkreten Bedingungen
Beide Tokenarten durchsuchen
Acht Rollen und acht aria-Attribute beziehungsweise Zustände stehen im selben Index; kein Treffer ist kein Urteil über die vollständige Norm.
Beispiel samt Herkunft
Zu jedem Eintrag gehören ein HTML-Ausschnitt und ein direkter Link zur WAI-ARIA 1.2; komplexe Muster erhalten auch einen APG-Link.
Semantik von Funktion trennen
aria-expanded meldet offen oder geschlossen, öffnet aber nichts selbst. Die Oberfläche und der Wert müssen zusammen aktualisiert werden.
Grenzen der schnellen Auskunft
- Nur ausgewählte Einträge
- Diese ARIA Rollen Übersicht enthält mit den Attributen 16 Einträge. Nicht gefundene Begriffe sollten in der vollständigen W3C-Spezifikation geprüft werden.
- Ausschnitt ist kein fertiges Widget
- Kopierter Code für tab, dialog oder eigene checkbox erledigt weder Pfeiltasten noch Fokusführung oder Zustandswechsel. Lesen Sie das passende APG-Muster.
- Keine Konformitätsprüfung
- Die Seite scannt keine Website und bestätigt keine WCAG-Erfüllung. Farbkontrast gehört in den separaten Rechner; reale Bedienung muss praktisch getestet werden.
Fragen zu ARIA Rollen
Wann sollte ich eine ARIA-Rolle statt eines HTML-Elements verwenden?
Wenn ein HTML-Element die benötigte Semantik und Bedienung bereits bietet, verwenden Sie es. ARIA Rollen sind für Fälle gedacht, die HTML allein nicht ausdrückt; die Interaktion muss trotzdem implementiert werden.
Macht role=button ein Element per Tastatur bedienbar?
Nein. role=button ändert die Ansage an Hilfstechnologien, macht ein div aber weder fokussierbar noch per Eingabe- oder Leertaste auslösbar. Ein echtes button-Element ist meist die bessere Wahl.
Wann verwende ich aria-label oder aria-labelledby?
aria-label enthält den Namen als Text im Attribut. aria-labelledby verweist auf die ID eines vorhandenen Textelements. Sichtbare Beschriftungen und HTML-label sollten zuerst geprüft werden.
Welche ARIA-Attribute verlangt eine Rolle?
Die Pflichtzustände und Beziehungen unterscheiden sich je nach Rolle. Die Karte nennt Schlüsselpunkte; die vollständigen normativen Anforderungen stehen im verlinkten WAI-ARIA-1.2-Abschnitt.
Belegt eine ARIA-Referenz die WCAG-Konformität?
Nein. Eine ARIA Rollen Referenz beantwortet Begriffsfragen. Für WCAG müssen Inhalt, Fokusfolge, Tastaturbedienung und Hilfstechnologien an der echten Anwendung geprüft werden.
Fehlt ein Eintrag oder ist etwas falsch?
ARIA Rollen jetzt nachschlagen
Wählen Sie ein Token, lesen Sie die native Alternative und öffnen Sie danach die feste W3C-Definition.