HTML/Attribute/aria-*

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche


Häufig sind aus Javascript-Bibliotheken übernommene Komponenten (widgets) entgegen ihrer Versprechungen nicht barrierefrei. Durch aria-Attribute können zusätzliche Information über ein Objekt geliefert werden, die ein Teil einer Definition der Rolle eines Objekts bilden.

erlaubte Werte

leerzeichen-separierte Liste einzelner Zeichen

default-Wert
erlaubt in allen Elementen
Browsersupport Details bei caniuse.com: {{{caniuse}}}
Beispiel
<div role="dialog" aria-labelledby="dialogheader"> <h2 id="dialogheader">Choose a File</h2> ... Dialog contents <button aria-label="close" aria-describedby="descriptionClose" onclick="myDialog.close()">X</button> ... <div id="descriptionClose"> Beim Schließen dieses Fensters werden eingegebene Daten verworfen. Sie werden zur Hauptseite zurückgeleitet. </div> </div>
Da das dialog-Element früher nicht durchgehend unterstützt wurde, wurde es oft aus divs nachgebaut:
  • Die Überschrift wird über ein aria-labelledby-Attribut mit dem div-Element verknüpft.
  • Der Schließen-Button enthält ein aria-label und ein aria-describedby-Attribut, dass auf die Erklärung im weiter unterstehenden div-Element verweist.

aria-Attribute und CSS

Sie können auch aria-Attribute anstelle von Klassen als Selektoren für eine Gestaltung mit CSS verwenden.

aria-Attribute als Attributselektoren 
[aria-checked] {
  width: 1em;
  height: 1em;
}

[aria-checked="true"] {
  color: blue;
}

[aria-checked="false"] {
  color: green;
}

Sie können sowohl den einfachen Attributselektor verwenden als auch nach dem Wert selektieren.

Während das Auslesen und Setzen von Klassen in JavaScript immer noch seine Tücken hat, können die aria-Attribute bequem mit getAttribute und setAttribute verändert werden.

Zustände und Eigenschaften

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.

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 einer Navigation
  • step: der aktuelle Schritt einer Folge
  • location: Der aktuelle Standort, z.B. bei einem OnePager
  • 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.
Beachten Sie: Elemente, die mit aria-hidden="true" gekennzeichnet sind, sind weder sichtbar noch fokussierbar. Sie sollten ARIA-Attribute, die nur den implizit vorhandenen Default-Wert des role-Attributs beinhalten, nicht in das Markup aufnehmen.[1] Sie enthalten keine zusätzlichen Informationen und blähen nur unnötigerweise den Quelltext auf.
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.

Siehe auch

Weblinks

  1. ↑ html5doctor: On HTML belts and ARIA braces
    (The Default Implicit ARIA semantics they didn’t want you to know about) vom 14. April 2015
Liste der HTML-Attribute
Abgerufen von „http://wiki.selfhtml.org/index.php?title=HTML/Attribute/aria-*&oldid=96748“