ARIA-Zustände und -Eigenschaften

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

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

Hinweis: ARIA verändert nur den Accessibility-Tree, indem es bestimmt, wie unterstützende Technologien den Inhalt Ihren Benutzern präsentieren. ARIA verändert nichts an der Funktion oder dem Verhalten eines Elements. Wenn Sie semantische HTML-Elemente nicht für ihren beabsichtigten Zweck und ihre Standardfunktionalität verwenden, müssen Sie JavaScript verwenden, um das Verhalten, den Fokus und die ARIA-Zustände zu verwalten.

ARIA-Attributtypen

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

  1. Widget-Attribute

  2. Live-Region-Attribute

  3. Drag-and-Drop-Attribute

  4. Beziehungsattribute

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 Basiselementen unterstützt.

Viele der oben genannten Attribute sind global, was bedeutet, dass sie auf jedes Element angewendet werden können, es sei denn, sie sind ausdrücklich ausgeschlossen:

Mit "ausdrücklich ausgeschlossen" sind alle oben genannten Attribute global, außer die Eigenschaften aria-label und aria-labelledby, welche auf Elementen mit der Rolle presentation und ihrem Synonym Rolle none nicht erlaubt sind.

Zustände und Eigenschaften, die auf MDN definiert sind

Im Folgenden sind die Referenzseiten zu den WAI-ARIA-Zuständen und -Eigenschaften aufgeführt, die auf MDN besprochen werden.

aria-activedescendant

Das Attribut aria-activedescendant identifiziert das derzeit aktive Element, wenn der Fokus auf einem composite-Widget, combobox, textbox, group oder application liegt.

aria-atomic

In ARIA-Live-Bereichen gibt das globale aria-atomic-Attribut an, ob unterstützende Technologien wie ein Screenreader die gesamte oder nur Teile der geänderten Region basierend auf den durch das aria-relevant Attribut definierten Änderungsbenachrichtigungen präsentieren.

aria-autocomplete

Das Attribut aria-autocomplete gibt an, ob die Eingabe von Text die Anzeige einer oder mehrerer Vorhersagen des beabsichtigten Wertes des Benutzers für ein combobox, searchbox oder textbox auslösen könnte und wie Vorhersagen angezeigt werden, wenn sie gemacht werden.

aria-braillelabel

Die globale aria-braillelabel-Eigenschaft definiert einen Zeichenfolgenwert, der das aktuelle Element beschriftet und in Braille umgewandelt werden soll.

aria-brailleroledescription

Das globale aria-brailleroledescription-Attribut definiert eine lesbare, autorspezifische, lokalisierte, abgekürzte Beschreibung für die Rolle eines Elements, das in Braille umgesetzt werden soll.

aria-busy

Verwendet in ARIA-Live-Regionen, zeigt der globale aria-busy-Zustand an, dass ein Element modifiziert wird und dass unterstützende Technologien möglicherweise warten sollten, bis die Änderungen abgeschlossen sind, bevor der Benutzer über das Update informiert wird.

aria-checked

Das aria-checked Attribut zeigt den aktuellen "gecheckten" 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 im Verhältnis zur Gesamtzahl der Spalten innerhalb einer <table>, <grid> oder <treegrid>.

aria-colindextext

Das aria-colindextext-Attribut definiert eine menschenlesbare Textalternative zum numerischen aria-colindex.

aria-colspan

Das aria-colspan Attribut definiert die Anzahl der Spalten, die von einer Zelle oder einem Rasterzelle in einer table, einem grid oder einem treegrid überspannt werden.

aria-controls

Die globale aria-controls-Eigenschaft identifiziert das Element (oder die Elemente), dessen Inhalt oder Vorhandensein von dem Element gesteuert wird, auf dem dieses Attribut gesetzt ist.

aria-current

Ein nicht-null 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 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 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 bedienbar ist.

aria-dropeffect

Das globale aria-dropeffect-Attribut gibt an, welche Funktionen ausgeführt werden können, wenn ein gezogenes Objekt auf dem Zielbereich losgelassen wird.

aria-errormessage

Das aria-errormessage Attribut auf 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 eine Steuerung erweitert oder reduziert ist und ob die kontrollierten 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 von Inhalten. Dies ermöglicht es unterstützender Technologie, die allgemeine Standardeinstellung des Lesens in der Dokumentquellreihenfolge nach Ermessen des Benutzers zu überschreiben.

aria-grabbed

Der aria-grabbed-Zustand zeigt an, ob sich ein Element in einem "gegriffenen" Zustand in einer Drag-and-Drop-Operation befindet.

aria-haspopup

Das aria-haspopup-Attribut gibt die Verfügbarkeit und den Typ eines interaktiven Popup-Elements 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 Zugänglichkeits-API zugänglich ist.

aria-invalid

Der Zustand aria-invalid zeigt an, dass der eingegebene Wert nicht dem von der Anwendung erwarteten Format entspricht.

aria-keyshortcuts

Das globale aria-keyshortcuts-Attribut gibt an, welche Tastenkombinationen ein Autor implementiert hat, um ein Element zu aktivieren oder den Fokus darauf zu setzen.

aria-label

Das aria-label Attribut definiert einen Zeichenfolgewert, der verwendet werden kann, um ein Element zu benennen, solange die Rolle des Elements dies nicht verhindert.

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 Arten von Updates, die die Benutzeragenten, Unterstützungstechnologien und der Benutzer von dem Live-Bereich erwarten können.

aria-modal

Das aria-modal Attribut gibt an, ob ein Element modal ist, wenn es angezeigt wird.

aria-multiline

Das Attribut aria-multiline gibt an, ob ein textbox mehrere Zeilen Eingaben akzeptiert oder nur eine einzelne Zeile.

aria-multiselectable

Das Attribut aria-multiselectable zeigt an, dass der Benutzer mehr als ein Element aus den aktuell auswählbaren Nachkommen auswählen kann.

aria-orientation

Das aria-orientation Attribut 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 und seinen untergeordneten Elementen 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 Formularfeld 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 im aktuellen Satz von Listenelementen oder Baumelementen, 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 zeigt 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ösen wird, wenn der Accessibility_tree innerhalb einer Live-Region geändert wird.

aria-required

Das aria-required Attribut gibt an, dass die Benutzereingabe bei dem Element erforderlich ist, bevor ein Formular abgeschickt werden kann.

aria-roledescription

Das Attribut aria-roledescription definiert eine menschenlesbare, von Autoren 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 Zeilen innerhalb einer Tabelle, eines Rasters oder eines Baumrasters.

aria-rowindextext

Das Attribut aria-rowindextext definiert einen für Menschen lesbaren Text als Alternative zu aria-rowindex.

aria-rowspan

Das aria-rowspan Attribut definiert die Anzahl der Zeilen, die von einer Zelle oder gridcell innerhalb einer Tabelle, eines Grids oder eines treegrid ü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 aria-sort Attribut 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 aria-valuemin-Attribut definiert den minimal erlaubten Wert für ein Range-Widget.

aria-valuenow

Das Attribut aria-valuenow definiert den aktuellen Wert für ein range-Widget.

aria-valuetext

Das aria-valuetext-Attribut definiert den für Menschen lesbaren Text als Alternative zu aria-valuenow für ein Bereichs-Widget.

Siehe auch