ARIA-Labels und -Beziehungen

ARIA-Labels zum Erstellen barrierefreier Elementbeschreibungen verwenden

Alice Boxhall

Dave Gash

Meggin Kearney

Labels

ARIA bietet verschiedene Mechanismen zum Hinzufügen von Beschriftungen und Beschreibungen zu Elementen. Tatsächlich ist ARIA die einzige Möglichkeit, barrierefreie Hilfe- oder Beschreibungstexte hinzuzufügen. Sehen wir uns die Eigenschaften an, mit denen ARIA barrierefreie Labels erstellt.

ARIA-Label

Mit aria-label können Sie einen String angeben, der als zugängliches Label verwendet werden soll. Dadurch werden alle anderen nativen Labeling-Mechanismen wie ein label-Element überschrieben. Wenn eine button beispielsweise sowohl Textinhalt als auch eine aria-label enthält, wird nur der Wert aria-label verwendet.

Sie können ein aria-label-Attribut für eine visuelle Angabe des Zwecks eines Elements verwenden, z. B. bei einer Schaltfläche, für die eine Grafik anstelle von Text verwendet wird. Sie müssen diesen Zweck aber trotzdem für alle klären, die nicht auf die visuelle Angabe zugreifen können, z. B. bei einer Schaltfläche, bei der nur ein Bild für den Zweck verwendet wird.

aria-labelby

Mit aria-labelledby können Sie die ID eines anderen Elements im DOM als Label eines Elements angeben.

Dies ähnelt der Verwendung eines label-Elements. Es gibt aber einige wichtige Unterschiede.

1. aria-labelledby kann für jedes beliebige Element verwendet werden, nicht nur für beschriftbare Elemente.
2. Während sich ein label-Element auf das Element bezieht, das es beschriftet, wird die Beziehung im Fall von aria-labelledby umgekehrt. Das Element, das mit einem Label versehen wird, bezieht sich auf das Element, das es kennzeichnet.
3. Einem Label-Element kann nur ein Labelelement zugewiesen werden. aria-labelledby kann jedoch eine Liste von IDREFs verwenden, um ein Label aus mehreren Elementen zu erstellen. Das Label wird in der Reihenfolge verkettet, in der die IDREFs angegeben sind.
4. Sie können aria-labelledby verwenden, um auf Elemente zu verweisen, die ausgeblendet sind und sich andernfalls nicht in der Barrierefreiheitsstruktur befinden würden. Beispielsweise können Sie neben einem Element, das Sie mit einem Label versehen möchten, ein ausgeblendetes span einfügen und mit aria-labelledby darauf verweisen.
5. Da ARIA sich jedoch nur auf die Barrierefreiheitsstruktur auswirkt, bietet aria-labelledby nicht das gewohnte Klickverhalten, das bei Verwendung eines label-Elements üblich ist.

Wichtig: aria-labelledby überschreibt alle anderen Namensquellen für ein Element. Wenn ein Element beispielsweise sowohl ein aria-labelledby als auch ein aria-label oder ein aria-labelledby und eine native HTML-label hat, hat das Label aria-labelledby immer Vorrang.

Beziehungen

aria-labelledby ist ein Beispiel für ein Beziehungsattribut. Mit einem Beziehungsattribut wird unabhängig von ihrer DOM-Beziehung eine semantische Beziehung zwischen Elementen auf der Seite erstellt. Im Fall von aria-labelledby lautet diese Beziehung „Dieses Element wird durch dieses Element gekennzeichnet“.

In der ARIA-Spezifikation sind acht Beziehungsattribute aufgeführt. Sechs dieser Elemente (aria-activedescendant, aria-controls, aria-describedby, aria-labelledby und aria-owns) verweisen auf ein oder mehrere Elemente, um eine neue Verknüpfung zwischen den Elementen auf der Seite zu erstellen. Der Unterschied besteht in jedem Fall darin, was der Link bedeutet und wie er den Nutzenden angezeigt wird.

aria-inhaber

aria-owns ist eine der am häufigsten verwendeten ARIA-Beziehungen. Mit diesem Attribut können wir assistive Technologien mitteilen, dass ein im DOM getrenntes Element als untergeordnetes Element des aktuellen Elements behandelt werden soll, oder vorhandene untergeordnete Elemente in eine andere Reihenfolge bringen. Wenn sich beispielsweise ein Pop-up-Untermenü optisch in der Nähe des übergeordneten Menüs befindet, aber kein DOM-Untermenü des übergeordneten Menüs sein kann, da es die visuelle Darstellung beeinflussen würde, können Sie aria-owns verwenden, um das Untermenü als untergeordnetes Element des übergeordneten Menüs für einen Screenreader zu präsentieren.

aria-activedescendant

aria-activedescendant spielt eine ähnliche Rolle. So wie das aktive Element einer Seite das Element ist, das im Fokus steht, können wir mithilfe des aktiven Nachfolgerelements unterstützen, dass ein Element dem Nutzer als fokussiertes Element präsentiert werden soll, obwohl das übergeordnete Element im Fokus liegt. In einem Listenfeld kann es beispielsweise sinnvoll sein, den Seitenfokus auf dem Listenfeld-Container zu belassen, aber das Attribut aria-activedescendant auf das aktuell ausgewählte Listenelement zu aktualisieren. Dadurch wird der unterstützenden Technologie das aktuell ausgewählte Element so angezeigt, als wäre es das fokussierte Element.

aria-descriptionby

aria-describedby stellt eine barrierefreie Beschreibung auf dieselbe Weise bereit wie aria-labelledby ein Label. Wie aria-labelledby kann auch aria-describedby auf Elemente verweisen, die ansonsten nicht sichtbar sind, sei es im DOM oder für Nutzer von Hilfstechnologien. Diese Technik ist nützlich, wenn zusätzliche erklärende Texte vorhanden sind, die Nutzende möglicherweise benötigen, unabhängig davon, ob sie nur für Nutzende von Hilfstechnologien oder für alle Nutzenden gelten.

Ein gängiges Beispiel ist ein Passworteingabefeld, das mit einer Beschreibung der Mindestanforderungen für Passwörter begleitet ist. Im Gegensatz zu einem Label wird dem Nutzer diese Beschreibung möglicherweise nie angezeigt. Er kann entscheiden, ob er auf die Informationen zugreifen möchte, alle anderen Informationen folgen oder sie durch etwas anderes ersetzt wird. Wenn der Nutzer beispielsweise Informationen eingibt, wird diese Eingabe zurückgegeben und kann die Beschreibung des Elements unterbrechen. Eine Beschreibung ist daher eine großartige Möglichkeit, ergänzende, aber nicht wesentliche Informationen zu kommunizieren. Sie steht wichtigen Informationen wie der Rolle des Elements nicht im Weg.

aria-posinset und aria-setsize

Die übrigen Beziehungsattribute unterscheiden sich etwas und funktionieren zusammen. Mit aria-posinset („Position im Satz“) und aria-setsize („Größe des Satzes“) wird eine Beziehung zwischen gleichgeordneten Elementen in einem Satz definiert, z. B. einer Liste.

Wenn die Größe eines Satzes nicht durch die im DOM vorhandenen Elemente bestimmt werden kann, z. B. wenn beim Lazy Rendering eine große Liste im DOM nicht zu sehen ist, kann aria-setsize die tatsächliche Größe und aria-posinset die Position des Elements im Datensatz angeben. Beispiel: Bei einem Datensatz mit 1.000 Elementen könnten Sie sagen, dass ein bestimmtes Element den Wert 857 für aria-posinset hat, obwohl es zuerst im DOM angezeigt wird. Anschließend können Sie mithilfe von dynamischen HTML-Techniken dafür sorgen, dass der Nutzer die vollständige Liste bei Bedarf aufrufen kann.