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 von einer oder mehreren Vorhersagen des beabsichtigten Werts des Benutzers für ein combobox, searchbox oder textbox auslösen könnte und spezifiziert, wie Vorhersagen präsentiert werden, falls sie gemacht 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 aria-checked Attribut 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 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 Attribut aria-describedby identifiziert das Element (oder die Elemente), das bzw. die das Element beschreibt, auf dem das Attribut gesetzt ist.
aria-description: Das globale aria-description Attribut definiert einen Zeichenfolgenwert, der das aktuelle Element beschreibt oder kommentiert.
aria-details: Das globale aria-details-Attribut identifiziert das Element (oder die Elemente), die zusätzliche Informationen im Zusammenhang mit dem Objekt bereitstellen.
aria-disabled: Der aria-disabled-Zustand zeigt an, dass das Element wahrnehmbar, aber deaktiviert ist und daher nicht bearbeitet oder anderweitig bedienbar ist.
aria-dropeffect: Das globale aria-dropeffect-Attribut gibt an, welche Funktionen möglich sind, wenn ein gezogenes Objekt auf dem Zielbereich losgelassen 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 ein 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 die nächsten Elemente) in einer alternativen Lesereihenfolge des Inhalts. Dadurch kann unterstützende Technologie die allgemeine Voreinstellung des Lesens in der Dokumentquelle nach Belieben des Nutzers ü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 Barrierefreiheits-API sichtbar ist.
aria-invalid: Der aria-invalid Zustand gibt an, dass der eingegebene Wert nicht dem vom Anwendung erwarteten Format entspricht.
aria-keyshortcuts: Das globale aria-keyshortcuts-Attribut zeigt Tastenkombinationen an, die ein Autor implementiert hat, um ein Element zu aktivieren oder den Fokus darauf zu legen.
aria-label: Das aria-label Attribut definiert einen Stringwert, der verwendet werden kann, um ein Element zu benennen, sofern die Rolle des Elements das Benennen nicht verbietet.
aria-labelledby: Das aria-labelledby-Attribut identifiziert das Element (oder die Elemente), die das Element beschriften, auf das es angewendet wird.
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 gibt an, dass der Benutzer mehr als ein Element aus den derzeit 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 aria-pressed Attribut gibt den aktuellen "gedrückten" Zustand eines Umschaltknopfes an.
aria-readonly: Das aria-readonly-Attribut zeigt an, dass das Element nicht bearbeitet werden kann, aber dennoch bedienbar ist.
aria-relevant: Das globale aria-relevant Attribut, das in ARIA Live-Regionen verwendet wird, gibt an, welche Benachrichtigungen der Benutzeragent auslösen wird, wenn der Zugänglichkeitsbaum innerhalb einer Live-Region verändert wird.
aria-required: Das aria-required Attribut zeigt an, dass eine Benutzereingabe auf dem 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 Gesamtzahl der Reihen innerhalb einer Tabelle, eines Rasters oder eines Baumrasters.
aria-rowindextext: Das Attribut aria-rowindextext definiert eine menschenlesbare Textalternative zu aria-rowindex.
aria-rowspan: Das aria-rowspan-Attribut definiert die Anzahl von Zeilen, die von einer Zelle oder Gridcell innerhalb einer Tabelle, eines Grids oder Treegrids überspannt werden.
aria-selected: Das Attribut aria-selected gibt den aktuellen "ausgewählten" Zustand verschiedener Widgets an.
aria-setsize: Das aria-setsize Attribut definiert die Anzahl der Elemente in der aktuellen Menge von listitems oder treeitems, wenn nicht alle Elemente der Menge 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 Attribut aria-valuemax definiert den maximal zulässigen Wert für ein Bereichs-Widget.
aria-valuemin: Das Attribut aria-valuemin definiert den minimal zulässigen Wert für ein Bereichs-Widget.
aria-valuenow: Das aria-valuenow-Attribut 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