HTML - aria-* Attribute

Diese Seite erklärt, wofür das ARIA-Attribut aria-* gedacht ist, wann es sinnvoll eingesetzt wird und worauf dabei zu achten ist. Weiterführende Informationen und offizielle Referenzen sind am Ende der Seite bereitgestellt.

Attribut	Beschreibung
aria-activedescendant	Gibt an, welches untergeordnete Element aktuell den Fokus hat, obwohl der Fokus technisch auf dem Elternelement liegt. Typisch bei komplexen Widgets wie Listen, Menüs oder Comboboxen, die per Tastatur gesteuert werden.
aria-atomic	Legt fest, ob Änderungen innerhalb eines Bereichs als Ganzes oder nur teilweise von Screenreadern angekündigt werden. Wird häufig bei dynamischen Inhalten wie Statusmeldungen oder Live-Regionen verwendet.
aria-autocomplete	Beschreibt, ob und wie eine Autovervollständigung für ein Eingabefeld funktioniert. Kommt typischerweise bei Suchfeldern, Textfeldern oder Comboboxen zum Einsatz.
aria-busy	Zeigt an, dass ein Bereich gerade aktualisiert wird (z.B. lädt oder rendert) und vorübergehend nicht vollständig nutzbar ist. Screenreader können so warten, bis der Inhalt „fertig“ ist.
aria-checked	Gibt den aktuellen Auswahlzustand an, z.B. bei Checkboxen, Radio-Buttons oder schaltbaren Menüeinträgen. Kann je nach Widget auch „gemischt“ (teilweise ausgewählt) bedeuten.
aria-colcount	Beschreibt die Gesamtanzahl der Spalten in einer Tabelle oder einem Grid, auch wenn nicht alle Spalten gleichzeitig sichtbar sind (z.B. bei virtuellen Tabellen).
aria-colindex	Gibt an, an welcher Spaltenposition sich eine bestimmte Zelle innerhalb einer Tabelle oder eines Grids befindet. Hilft besonders, wenn Inhalte dynamisch verschoben oder virtualisiert werden.
aria-colspan	Legt fest, über wie viele Spalten sich eine Tabellen- oder Grid-Zelle erstreckt, ähnlich wie das HTML-Attribut `colspan`.
aria-controls	Stellt eine Beziehung zwischen einem Steuerelement und den Elementen her, die dadurch beeinflusst werden. Typisch bei Buttons, die Inhalte ein-/ausblenden oder Bereiche umschalten.
aria-current	Kennzeichnet das aktuell „aktive“ Element innerhalb eines Kontexts, z.B. die aktuelle Seite in einer Navigation, den aktuellen Schritt in einem Prozess oder den aktuellen Tab.
aria-describedby	Verknüpft ein Element mit einer zusätzlichen Beschreibung, die Screenreader beim Vorlesen ergänzen. Typisch für Hilfetexte, Hinweise oder erklärende Zusatzinformationen zu Formularfeldern.
aria-details	Verweist auf ein Element mit weiterführenden Details (mehr als nur ein kurzer Hinweis). Praktisch, wenn es eine ausführlichere Erklärung oder ein Detailpanel gibt.
aria-disabled	Kennzeichnet ein Element als deaktiviert, sodass assistive Technologien erkennen: „Hier kann man gerade nichts auslösen“. Sinnvoll, wenn die Deaktivierung nicht durch ein natives `disabled` abgebildet werden kann.
aria-errormessage	Verbindet ein Eingabefeld mit einer zugehörigen Fehlermeldung, die bei ungültigen Eingaben vorgelesen werden kann. Wird typischerweise zusammen mit `aria-invalid` genutzt.
aria-expanded	Gibt an, ob ein Element ein- oder ausgeklappt ist. Typisch bei Akkordeons, Dropdown-Menüs, aufklappbaren Navigationsbereichen oder Disclosure-Buttons.
aria-flowto	Definiert eine alternative Lesereihenfolge für Screenreader, wenn die visuelle Reihenfolge nicht der logischen Struktur im Code entspricht. Eher selten nötig, aber hilfreich in Speziallayouts.
aria-haspopup	Zeigt an, dass ein Element beim Aktivieren ein Popup öffnet, z.B. ein Menü, eine Liste, ein Dialog oder ein Kalender-Picker. So wissen Nutzende, was sie erwartet.
aria-hidden	Blendet ein Element für Screenreader aus, während es visuell weiterhin vorhanden sein kann. Wichtig: Nicht für „wichtigen“ Inhalt verwenden – eher für dekorative oder doppelte Inhalte.
aria-invalid	Kennzeichnet den Gültigkeitszustand einer Eingabe (z.B. „ungültig“). Typisch bei Formularfeldern, wenn eine Validierung fehlschlägt.
aria-keyshortcuts	Beschreibt Tastenkombinationen, mit denen ein Element bedient werden kann (z.B. „Alt+S“). Hilft Screenreader-Nutzenden, Shortcuts zu entdecken und zu lernen.
aria-label	Gibt einem Element einen zugänglichen Namen als Text. Nützlich, wenn kein sichtbares Label vorhanden ist (z.B. Icon-Buttons). Sollte kurz, eindeutig und sinnvoll sein.
aria-labelledby	Verknüpft ein Element mit einem oder mehreren anderen Elementen, die als Beschriftung dienen. Das ist oft besser als `aria-label`, weil der sichtbare Text direkt wiederverwendet wird.
aria-level	Gibt die Hierarchieebene an, z.B. bei Überschriften oder Baumstrukturen („Level 1, Level 2…“). Wichtig, wenn die Struktur nicht über native HTML-Elemente abgebildet wird.
aria-live	Legt fest, wie dynamische Änderungen angekündigt werden (z.B. „polite“ oder „assertive“). Typisch für Statusmeldungen, Chat-Updates oder Validierungsfeedback.
aria-modal	Kennzeichnet einen Dialog als modal: Der Fokus soll im Dialog bleiben und der Rest der Seite ist „im Hintergrund“. Typisch bei echten Modal-Dialogen, nicht bei normalen Popovers.
aria-multiline	Gibt an, ob ein Eingabefeld mehrzeilig ist. Sinnvoll bei selbstgebauten Textboxen, wenn kein natives `textarea` verwendet wird.
aria-multiselectable	Zeigt an, dass in einer Liste/Gruppe mehrere Elemente gleichzeitig ausgewählt werden können. Typisch bei Listboxen oder Auswahllisten mit Mehrfachauswahl.
aria-orientation	Beschreibt die Ausrichtung eines Widgets (horizontal oder vertikal), z.B. bei Slidern, Tabs oder Scrollbereichen. Hilft bei der Orientierung und Bedienung.
aria-owns	Stellt eine „Besitz“-Beziehung her, wenn ein Element logisch zu einem anderen gehört, aber im DOM woanders steht. Kann bei Portalen/Overlays helfen, sollte aber sparsam verwendet werden.
aria-placeholder	Definiert einen Platzhaltertext für ein Eingabefeld. Hinweis: Ein Placeholder ersetzt kein echtes Label – er ist eher ein zusätzlicher Tipp oder Beispielinhalt.
aria-posinset	Gibt die Position eines Elements innerhalb einer Gruppe an (z.B. „Eintrag 3 von 10“). Nützlich bei Listen/Feeds, insbesondere wenn Inhalte dynamisch geladen werden.
aria-pressed	Beschreibt den gedrückten/aktiven Zustand eines Toggle-Buttons (Ein/Aus). Typisch bei Schaltern wie „Fett“ in Editor-Toolbars oder „Favorit“ als Toggle.
aria-readonly	Kennzeichnet ein Element als schreibgeschützt: Inhalt ist lesbar, aber nicht änderbar. Typisch bei Formularfeldern, die nur angezeigt werden sollen.
aria-relevant	Steuert, welche Arten von Änderungen in einer Live-Region angekündigt werden sollen (z.B. Textänderungen, Hinzufügen/Entfernen von Elementen). Meist zusammen mit `aria-live` sinnvoll.
aria-required	Kennzeichnet ein Feld als erforderlich (Pflichtfeld). Hilft assistiven Technologien, Erwartungen klar zu machen – besonders bei selbstgebauten Form-Controls.
aria-roledescription	Erlaubt eine benutzerfreundliche Rollenbeschreibung, die Screenreader statt der Standardrolle ansagen können. Nur nutzen, wenn es wirklich einen Mehrwert bringt und nicht verwirrt.
aria-rowcount	Beschreibt die Gesamtanzahl der Zeilen in einer Tabelle oder einem Grid, auch wenn nicht alle Zeilen gleichzeitig gerendert werden (Virtualisierung).
aria-rowindex	Gibt an, an welcher Zeilenposition sich eine bestimmte Zelle/Zeile in einer Tabelle oder einem Grid befindet. Hilft bei dynamischen oder virtualisierten Tabellen.
aria-rowspan	Legt fest, über wie viele Zeilen sich eine Tabellen- oder Grid-Zelle erstreckt, ähnlich wie das HTML-Attribut `rowspan`.
aria-selected	Beschreibt, ob ein Element ausgewählt ist. Typisch bei Tabs, Optionslisten, Listboxen oder Grid-Zellen – überall dort, wo Auswahl ein zentrales Konzept ist.
aria-setsize	Gibt an, wie groß eine Gruppe insgesamt ist (z.B. „10 Einträge“). Wird oft zusammen mit `aria-posinset` genutzt, um „Position von Gesamt“ korrekt anzusagen.
aria-sort	Beschreibt die Sortierreihenfolge einer Spalte (z.B. aufsteigend/absteigend). Typisch bei Tabellenköpfen, wenn Sortierung per Klick geändert werden kann.
aria-valuemax	Gibt den maximalen Wert eines Bereichs an, z.B. bei Slidern, Fortschrittsanzeigen oder Spinbuttons. Zusammen mit `aria-valuenow` ergibt sich der aktuelle Stand.
aria-valuemin	Gibt den minimalen Wert eines Bereichs an, z.B. bei Slidern oder Spinbuttons. Hilft, den Wertebereich verständlich zu machen.
aria-valuenow	Gibt den aktuellen numerischen Wert eines Bereichs an (z.B. Slider steht bei 30). Screenreader nutzen das, um den aktuellen Zustand anzusagen.
aria-valuetext	Gibt eine textuelle Alternative zum aktuellen Wert an, wenn eine Zahl nicht sinnvoll ist (z.B. „Leise“, „Mittel“, „Laut“ statt 1–3).
Diese Tabelle listet ausschließlich aria-* Attribute. Die Beschreibungen sind bewusst einsteigerfreundlich formuliert und beschreiben typische Anwendungsfälle. Weitere Details zu ARIA-Rollen und typischen Einsatzmustern finden sich in den WAI-ARIA Authoring Practices. Technische Details zu erlaubten Zuständen, Eigenschaften und Beziehungen sind in der ARIA-Spezifikation (States and Properties) beschrieben.