HTML/Attribute/aria-*
Aus SELFHTML-Wiki
< HTML | Attribute(Weitergeleitet von Aria-expanded)
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 |
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>
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
- ↑ html5doctor: On HTML belts and ARIA braces
(The Default Implicit ARIA semantics they didn’t want you to know about) vom 14. April 2015
aria-Attribute und CSS
Sie können auch aria-Attribute anstelle von Klassen als Selektoren für eine Gestaltung mit CSS verwenden.
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
aria-atomic
aria-autocomplete
aria-busy
(Zustand)aria-checked
(Zustand)aria-controls
aria-current
page
: Die aktuelle Seite einer Navigationstep
: der aktuelle Schritt einer Folgelocation
: Der aktuelle Standort, z.B. bei einem OnePagerdate
: Das heutige Datumtime
: die jetzige Uhrzeitaria-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
aria-disabled
(Zustand)aria-dropeffect
aria-expanded
(Zustand)aria-flowto
aria-grabbed
(Zustand)aria-haspopup
aria-hidden
(Zustand)aria-invalid
(Zustand)aria-label
aria-labelledby
aria-level
aria-live
aria-multiline
aria-multiselectable
aria-orientation
aria-owns
aria-posinset
aria-pressed
(Zustand)aria-readonly
aria-relevant
aria-required
aria-selected
(Zustand)aria-setsize
aria-sort
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext