ARIA-Zustände und -Eigenschaften (Attribute)

Diese Seite listet Referenzseiten auf, die alle auf MDN besprochenen WAI-ARIA-Attribute abdecken.

ARIA-Attribute ermöglichen es, die Zustände und Eigenschaften eines Elements zu ändern, wie im Accessibility-Tree definiert.

Hinweis: ARIA ändert nur den Accessibility-Tree, indem es beeinflusst, wie assistive Technologie den Inhalt Ihren Nutzern präsentiert. ARIA ändert nichts an der Funktion oder dem Verhalten eines Elements. Wenn semantische HTML-Elemente nicht für ihren beabsichtigten Zweck und ihre Standardfunktionalität verwendet werden, müssen Sie JavaScript verwenden, um Verhalten, Fokus und ARIA-Zustände zu verwalten.

ARIA-Attributtypen

Es gibt 4 Kategorien von ARIA-Zuständen und -Eigenschaften:

Live-Region-Attribute

Drag-and-Drop-Attribute

Beziehungs-Attribute

Globale ARIA-Attribute

Einige Zustände und Eigenschaften gelten für alle HTML-Elemente, unabhängig davon, ob eine ARIA-Rolle angewendet wird. Diese werden als "Globale" Attribute definiert. Globale Zustände und Eigenschaften werden von allen Rollen und grundlegenden Markup-Elementen unterstützt.

Viele der oben genannten Attribute sind global, was bedeutet, dass sie, sofern nicht ausdrücklich ausgeschlossen, in jedes Element eingefügt werden können:

Mit "ausdrücklich ausgeschlossen" sind alle oben genannten Attribute global, außer den Eigenschaften aria-label und aria-labelledby, die nicht auf Elemente mit der Rolle presentation oder ihrem Synonym none angewendet werden dürfen.

Index der Zustände und Eigenschaften

Die folgenden sind die Referenzseiten, die die auf WAI-ARIA-Zustände und Eigenschaften auf MDN beschreiben.

aria-activedescendant: Das aria-activedescendant-Attribut identifiziert das aktuell aktive Element, wenn der Fokus auf einem composite Widget, combobox, textbox, group oder einer application liegt.
aria-atomic: In ARIA-Live-Regionen gibt das globale aria-atomic-Attribut an, ob unterstützende Technologien wie ein Screenreader den gesamten oder nur Teile des geänderten Bereichs basierend auf den durch das aria-relevant-Attribut definierten Änderungsbenachrichtigungen präsentieren.
aria-autocomplete: Das aria-autocomplete-Attribut gibt an, ob die Eingabe von Text die Anzeige einer oder mehrerer Vorhersagen des vom Benutzer beabsichtigten Wertes für eine combobox, searchbox oder textbox auslösen könnte und spezifiziert, wie Vorhersagen präsentiert werden, wenn sie angezeigt werden.
aria-braillelabel: Die globale Eigenschaft aria-braillelabel definiert einen Zeichenfolgewert, der das aktuelle Element kennzeichnet und in Braille konvertiert werden soll.
aria-brailleroledescription: Das globale Attribut aria-brailleroledescription definiert eine für Menschen lesbare, vom Autor lokalisierte, verkürzte Beschreibung für die Rolle eines Elements, die in Braille umgewandelt werden soll.
aria-busy: Verwendet in ARIA-Live-Bereichen, zeigt der globale aria-busy-Zustand an, dass ein Element modifiziert wird und unterstützende Technologien möglicherweise warten sollten, bis die Änderungen abgeschlossen sind, bevor sie den Benutzer über das Update informieren.
aria-checked: Das Attribut aria-checked zeigt den aktuellen "ausgewählten" Zustand von Kontrollkästchen, Optionsfeldern und anderen Widgets an.
aria-colcount: Das Attribut aria-colcount definiert die Gesamtanzahl der Spalten in einer table, einem grid oder einem treegrid, wenn nicht alle Spalten im DOM vorhanden sind.
aria-colindex: Das aria-colindex-Attribut definiert den Spaltenindex oder die Position eines Elements in Bezug auf die Gesamtanzahl der Spalten innerhalb einer table, grid oder treegrid.
aria-colindextext: Das aria-colindextext Attribut definiert eine für Menschen lesbare Textalternative zum numerischen aria-colindex.
aria-colspan: Das aria-colspan Attribut definiert die Anzahl der Spalten, die von einer Zelle oder einem Gridcell innerhalb einer table, grid oder treegrid überspannt werden.
aria-controls: Das globale aria-controls-Attribut identifiziert das Element (oder die Elemente), deren Inhalte oder Präsenz durch das Element, auf dem dieses Attribut gesetzt ist, kontrolliert werden.
aria-current: Ein nicht-leerer aria-current-Zustand auf einem Element zeigt an, dass dieses Element das aktuelle Element innerhalb eines Containers oder einer Gruppe verwandter Elemente darstellt.
aria-describedby: Das globale aria-describedby Attribut identifiziert das Element (oder die Elemente), das/die das Element beschreibt/beschreiben, auf dem das Attribut gesetzt ist.
aria-description: Das globale Attribut aria-description definiert einen Zeichenfolgenwert, der das aktuelle Element beschreibt oder annotiert.
aria-details: Das globale Attribut aria-details identifiziert das Element (oder die Elemente), die zusätzliche Informationen in Bezug auf das Objekt bereitstellen.
aria-disabled: Der aria-disabled Zustand zeigt an, dass das Element wahrnehmbar, aber deaktiviert ist, sodass es nicht bearbeitbar oder anderweitig funktionsfähig ist.
aria-dropeffect: Das globale aria-dropeffect-Attribut gibt an, welche Funktionen ausgeführt werden können, wenn ein gezogenes Objekt auf das Ziel fallen gelassen wird.
aria-errormessage: Das Attribut aria-errormessage an einem Objekt identifiziert das Element, das eine Fehlermeldung für dieses Objekt bereitstellt.
aria-expanded: Das aria-expanded Attribut wird auf einem Element gesetzt, um anzuzeigen, ob ein Steuerelement erweitert oder eingeklappt ist und ob die gesteuerten Elemente angezeigt oder versteckt sind.
aria-flowto: Das globale aria-flowto-Attribut identifiziert das nächste Element (oder Elemente) in einer alternativen Lesereihenfolge des Inhalts. Dies ermöglicht unterstützenden Technologien, die allgemeine Standard-Lesereihenfolge im Quellcode nach Ermessen des Benutzers zu überschreiben.
aria-grabbed: Der aria-grabbed Zustand zeigt den "gegriffenen" Zustand eines Elements in einer Drag-and-Drop-Operation an.
aria-haspopup: Das aria-haspopup-Attribut zeigt die Verfügbarkeit und den Typ eines interaktiven Popups an, das durch das Element ausgelöst werden kann, auf dem das Attribut gesetzt ist.
aria-hidden: Der aria-hidden Zustand gibt an, ob das Element für eine Accessibility-API sichtbar ist.
aria-invalid: Der aria-invalid-Zustand zeigt an, dass der eingegebene Wert nicht dem von der Anwendung erwarteten Format entspricht.
aria-keyshortcuts: Das globale Attribut aria-keyshortcuts gibt Tastenkombinationen an, die ein Autor implementiert hat, um ein Element zu aktivieren oder den Fokus darauf zu setzen.
aria-label: Das aria-label Attribut definiert einen Zeichenfolgenwert, der verwendet werden kann, um ein Element zu benennen, sofern die Rolle des Elements das Benennen nicht untersagt.
aria-labelledby: Das aria-labelledby-Attribut identifiziert das oder die Elemente, die das Element, auf das es angewandt wird, beschriften.
aria-level: Das aria-level-Attribut definiert die hierarchische Ebene eines Elements innerhalb einer Struktur.
aria-live: Das globale aria-live Attribut zeigt an, dass ein Element aktualisiert wird und beschreibt die Art der Aktualisierungen, die Benutzeragenten, unterstützende Technologien und der Benutzer von der Live-Region erwarten können.
aria-modal: Das aria-modal Attribut gibt an, ob ein Element modal ist, wenn es angezeigt wird.
aria-multiline: Das aria-multiline Attribut gibt an, ob ein textbox mehrere Zeilen Eingabe akzeptiert oder nur eine einzelne Zeile.
aria-multiselectable: Das Attribut aria-multiselectable zeigt an, dass der Benutzer mehr als ein Element aus den aktuellen auswählbaren Nachkommen auswählen kann.
aria-orientation: Das Attribut aria-orientation gibt an, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist.
aria-owns: Das Attribut aria-owns identifiziert ein Element (oder mehrere Elemente), um eine visuelle, funktionale oder kontextuelle Beziehung zwischen einem übergeordneten Element und seinen Kindelementen zu definieren, wenn die DOM-Hierarchie nicht zur Darstellung der Beziehung verwendet werden kann.
aria-placeholder: Das aria-placeholder-Attribut definiert einen kurzen Hinweis (ein Wort oder eine kurze Phrase), der dem Benutzer bei der Dateneingabe helfen soll, wenn ein Formularelement keinen Wert hat. Der Hinweis kann ein Beispielwert oder eine kurze Beschreibung des erwarteten Formats sein.
aria-posinset: Das Attribut aria-posinset definiert die Nummer oder Position eines Elements in der aktuellen Menge von Listenelementen (listitems) oder Baumelementen (treeitems), wenn nicht alle Elemente im DOM vorhanden sind.
aria-pressed: Das Attribut aria-pressed gibt den aktuellen "gedrückten" Zustand eines Umschaltknopfes an.
aria-readonly: Das aria-readonly Attribut gibt an, dass das Element nicht bearbeitbar, aber dennoch bedienbar ist.
aria-relevant: Das globale aria-relevant-Attribut wird in ARIA-Live-Regionen verwendet und gibt an, welche Benachrichtigungen der Benutzeragent auslöst, wenn der Accessibility_tree innerhalb einer Live-Region verändert wird.
aria-required: Das aria-required Attribut gibt an, dass eine Benutzereingabe für das Element erforderlich ist, bevor ein Formular abgeschickt werden kann.
aria-roledescription: Das aria-roledescription-Attribut definiert eine menschenlesbare, vom Autor lokalisierte Beschreibung für die Rolle eines Elements.
aria-rowcount: Das Attribut aria-rowcount definiert die Gesamtanzahl der Zeilen in einer Tabelle, einem Raster oder einem Baumraster.
aria-rowindex: Das aria-rowindex Attribut definiert die Position eines Elements in Bezug auf die Gesamtanzahl der Zeilen innerhalb einer Tabelle, eines Rasters oder eines Baumrasters.
aria-rowindextext: Das Attribut aria-rowindextext definiert eine menschenlesbare Textalternative zu aria-rowindex.
aria-rowspan: Das Attribut aria-rowspan definiert die Anzahl der Zeilen, die von einer Zelle oder einer Rasterzelle innerhalb einer Tabelle, eines Rasters oder eines Baumrasters überspannt werden.
aria-selected: Das Attribut aria-selected gibt den aktuellen "ausgewählten" Zustand verschiedener Widgets an.
aria-setsize: Das Attribut aria-setsize definiert die Anzahl der Elemente im aktuellen Satz von Listenelementen oder Baumelementen, wenn nicht alle Elemente des Sets im DOM vorhanden sind.
aria-sort: Das Attribut aria-sort gibt an, ob Elemente in einer Tabelle oder einem Raster in aufsteigender oder absteigender Reihenfolge sortiert sind.
aria-valuemax: Das aria-valuemax-Attribut definiert den maximal zulässigen Wert für ein Bereichs-Widget.
aria-valuemin: Das Attribut aria-valuemin definiert den minimal erlaubten Wert für ein Bereichs-Widget.
aria-valuenow: Das Attribut aria-valuenow definiert den aktuellen Wert für ein range-Widget.
aria-valuetext: Das aria-valuetext Attribut definiert den lesbaren Text, der als Alternative zu aria-valuenow für ein Bereichs-Widget dient.

Siehe auch

Verwendung von ARIA: Rollen, Zustände und Eigenschaften