WAI-ARIA/Zustände und Eigenschaften

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Ausdrücke Zustände (status) und Eigenschaften (properties) beziehen sich auf ähnliche Merkmale. Beide liefern zusätzliche Information über ein Objekt und bilden Teil einer Definition der Rolle eines Objekts. Während Werte von Eigenschaften wie aria-labelledby im Allgemeinen seltener geändert werden als Zustände wie aria-checked, die bei jeder Benutzerinteraktion aktualisiert werden, kann dies trotzdem nicht generalisiert werden. So sind die Werte von Eigenschaften wie aria-activedescendant, aria-valuenow, und aria-valuetext oft veränderlich.

Empfehlung:
  • Setzen Sie HTML ein, wenn es ein HTML-Element oder -Attribut mit dem gewünschten Verhalten gibt.
  • Mit ARIA sollte die Semantik von HTML nicht verändert werden.

[Bearbeiten] aria-Attribute

aria-activedescendant
Zeigt das aktuelle Kindelement eines composite widget an.
aria-atomic
Zeigt an, ob assistive Technologien vorhanden sind - geänderte Regionen werden durch das aria-relevant-Attribut gekennzeichnet.
aria-autocomplete
Zeigt an, ob bei Benutzereingaben Vorschläge zur Auto-Vervollständigung angeboten werden.
aria-busy (Zustand)
Zeigt an, ob ein Element (oder seine Kindelemente) gerade durch ein Update aktualisiert werden.
aria-checked (Zustand)
Zeigt den aktuellen "checked"-Zustand von Checkboxen, Radio Buttons und anderen Eingabeelementen an. (Siehe auch: aria-pressed und aria-selected)
aria-controls
Identifiziert ein Element, dessen Inhalt durch das aktuelle Element kontrolliert wird.(Siehe auch: aria-owns)
aria-current
Identifiziert das Element mit dem jeweils aktuellen Wert. Mögliche Werte sind:
  • page: Die aktuelle Seite
  • step: der aktuelle Schritt einer Folge
  • location: Der aktuelle Standort
  • date: Das heutige Datum
  • time: die jetzige Uhrzeit
Beachten Sie:
  • Es sollte immer nur ein Element mit aria-current ausgezeichnet werden.
  • aria-current sollte nicht für Tabs, etc, verwendet werden, in denen ein Element ausgewählt wird. Verwenden Sie hier aria-selected.


aria-describedby
Identifiziert ein Element, welches das mit aria-labelledby bezeichnete Objekt näher beschreibt über dessen id.
aria-disabled (Zustand)
Identifiziert ein Element, das erkennbar aber inaktiv ist, sodass es nicht editier- oder bedienbar ist. (siehe auch: aria-hidden und aria-readonly)
aria-dropeffect
Zeigt an, welche Funktionen ausgeführt werden können, wenn das Objekt am Drop-Ziel losgelassen wird. Dies erlaubt es assistiven Technologien über mögliche drag-Optionen zu informieren, auch, ob ein zusätzliches Pop-up-Menü von der Webanwendung angeboten wird. Typischerweise können Drop-Funktionen erst zur Verfügung gestellt werden, wenn ein Objekt aufgenommen worden ist.
aria-expanded (Zustand)
Zeigt an, ob ein Element oder eine Gruppierung gerade aus- oder eingeklappt ist.
aria-flowto
Identifiziert das nächste Element (oder Elemente), falls die Lesestruktur von der normalen Reihenfolge abweicht. So können assistive Technologien zum inhaltlich nächsten Leseabschnitt springen.
aria-grabbed (Zustand)
Zeigt in einer Drag & Drop-Operation den "grabbed" Zustand an.
aria-haspopup
Zeigt, dass das Element ein Popup Kontext-Menü oder sub-level Menü besitzt.
aria-hidden (Zustand)
Zeigt, dass das Element und alle Kindelemente nicht sicht- und erkennbar sind. (Siehe auch aria-disabled).
aria-invalid (Zustand)
Zeigt, dass der eingegebene Wert nicht zum erwarteten Format kompatibel ist.
aria-label
Beschreibt das aktuelle Element mit einer Zeichenkette. (Siehe auch aria-labelledby).
aria-labelledby
Identifizert ein Element über dessen id, das das aktuelle Element näher beschreibt (siehe auch: aria-label und aria-describedby)
aria-level
Legt die hierarchische Ebene eines Elements innerhalb einer Struktur fest.
aria-live
Zeigt, dass ein Element aktualisiert werden kann, und beschreibt die Arten der Updates die die Browser, assistive Technologien und benutzer erwarten können.
aria-multiline
Zeigt, ob ein Textfeld einzeilige oder mehrzeilige Eingaben erlaubt.
aria-multiselectable
Zeigt, dass der Benutzer mehr als eine Auswahl wählen kann.
aria-orientation
Zeigt an, ob das Element und seine Orientierung horizontal oder vertikal sind.
aria-owns
Beschreibt, dass ein Element eine visuelle, funktionale, oder kontextualisierte Eltern/Kind-Beziehung zwischen DOM-Elementen besitzt, die durch die DOM-Hierarchie nicht ausgedrückt wird. (Siehe auch aria-controls).
aria-posinset
Beschreibt die Position eines Elements innerhalb einer Liste oder Baumstruktur. Es wird nicht benötigt, wenn alle Elemente der Menge im DOM vorhanden sind. (Siehe auch aria-setsize).
aria-pressed (Zustand)
Zeigt bei toggle-Buttons den "gedrückt" Zustand an. Siehe auch aria-checked und aria-selected).
aria-readonly
Zeigt, dass das Element nicht editierbar ist. (Siehe auch aria-disabled).
aria-relevant
Zeigt an, welche user agent change notifications (additions, removals, etc.) assistive Technologien innerhalb einer Live Region erhalten werden. (Siehe auch aria-atomic).
aria-required
Zeigt, dass eine Benutzereingabe benötigt wird, bevor ein Formular abgesendet werden kann..
aria-selected (Zustand)
Zeigt the aktuellen "selected"-Zustand verschiedener widgets an. (Siehe auch aria-checked und aria-pressed).
aria-setsize
Zeigt die Anzahl von Elementen innerhalb einer Liste oder Baumstruktur. Es wird nicht benötigt, wenn alle Elemente der Menge im DOM vorhanden sind. (Siehe auch aria-posinset).
aria-sort
Zeigt, ob Elemente einer Tabelle oder eines grid-Raster in steigender oder absteigender Reihenfolge sortiert sind.
aria-valuemax
Legt den Maximalwert eines range widget fest.
aria-valuemin
Legt den Minimalwert eines range widget fest.
aria-valuenow
Legt den aktuellen Wert eines range widget fest.. (Siehe auch aria-valuetext).
aria-valuetext
Legt den lesbaren Alternativtext von aria-valuenow eines range widget fest.

[Bearbeiten] Quelle

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML