Attribute – Dynamische Eigenschaften und Zustände

ARIA macht es einfacher, mit Elementen zu interagieren.

Bei einem Schieberegler können Sie JavaScript nutzen, um das “aria-valuenow” zu aktualisieren, wenn der Benutzer den Regler bewegt. Diese Eigenschaft kann nicht statisch sein, weil der Benutzer sie ändert.

Oder ein anderes Beispiel: In Dropdown-Menüs sollten Sie JavaScript schreiben, um zwischen “aria-expanded” und “aria-pressed” zu wechseln. In Umschalttasten sollten Sie zwischen “aria-pressed” und “aria-pressed” wechseln. Für Kombinationsfelder, Registerkarten, Registerkartenlisten oder auswählbare Knoten sollten Sie “aria-selected=true” oder “aria-selected=false” verwenden.

Oder als anderes Beispiel: Wenn ein Benutzer die Sortierreihenfolge einer Spalte ändert, sollten Sie zwischen “aufsteigend” und “absteigend” wechseln.

Je nachdem, welche Art von Komponente Sie erstellen oder welche Art von Interaktion Sie entwerfen, stehen Ihnen mehrere andere Eigenschaften zur Verfügung.

Diese Werte ändern sich nicht automatisch. Wenn Sie ein Menü beim Laden der Seite auf “aria-expanded=false” festlegen, wird die Schaltfläche weiterhin “aria-expanded=false” anzeigen.

Sie bekommen keine automatische Funktion, wenn Sie einfach ARIA-Attribute hinzufügen. Dynamische Funktionen müssen von JavaScript stammen, das Sie hinzufügen. Das ist der Preis, den Sie für die Nutzung von ARIA zahlen.

ARIA bedeutet mehr Arbeit, bietet Ihnen aber viele Möglichkeiten. Wenn Sie einige der dynamischen ARIA-Eigenschaften nicht aktualisieren, während der Benutzer mit der Komponente interagiert, kann das die Barrierefreiheit verschlechtern.

ARIA ist aufwändig, aber es lohnt sich. Sie müssen alle korrekten Angaben machen und die Eigenschaften immer aktuell halten.