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:
-
Widget-Attribute
aria-autocomplete
aria-checked
aria-disabled
aria-errormessage
aria-expanded
aria-haspopup
aria-hidden
aria-invalid
aria-label
aria-level
aria-modal
aria-multiline
aria-multiselectable
aria-orientation
aria-placeholder
aria-pressed
aria-readonly
aria-required
aria-selected
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
-
Live-Region-Attribute
-
Drag-and-Drop-Attribute
-
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:
aria-atomic
aria-busy
aria-controls
aria-current
aria-describedby
aria-description
aria-details
aria-disabled
aria-dropeffect
aria-errormessage
aria-flowto
aria-grabbed
aria-haspopup
aria-hidden
aria-invalid
aria-keyshortcuts
aria-label
aria-labelledby
aria-live
aria-owns
aria-relevant
aria-roledescription
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 einemcomposite
-Widget,combobox
,textbox
,group
oderapplication
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 dasaria-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 eincombobox
,searchbox
odertextbox
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 einertable
, einemgrid
oder einemtreegrid
, 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 numerischenaria-colindex
.- aria-colspan
Das
aria-colspan
Attribut definiert die Anzahl der Spalten, die von einer Zelle oder einem Rasterzelle in einertable
, einemgrid
oder einemtreegrid
ü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.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 eintextbox
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 Eltern- 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 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 zuaria-rowindex
.- aria-rowspan
Das
aria-rowspan
Attribut definiert die Anzahl der Zeilen, die von einer Zelle odergridcell
innerhalb einer Tabelle, eines Grids oder einestreegrid
ü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 vonlistitems
odertreeitems
, 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 einrange
-Widget.- aria-valuetext
Das
aria-valuetext
-Attribut definiert den für Menschen lesbaren Text als Alternative zuaria-valuenow
für ein Bereichs-Widget.