ARIA Zustände & Eigenschaften
Schematische Darstellung: Person mit weißem Stock gelangt über ein Boddenleitsystem zu einem Aufmerksamkeitsfeld

aria-describedby (Eigenschaft )
Verweis zu Beschreibung

Mit dem Attribut aria-describedby kann zu Steuerelementen technisch auf eine Zusatzinformation verwiesen werden.

„described by“ = „beschrieben durch“

Typischerweise werden mit dieser ARIA-Anweisung sichtbare Hinweise zu einem Steuerelement von einem Screen Reader ergänzend zur Beschriftung des Steuerelements vorgetragen.

Technische Realisierung

ID festlegen und referenzieren

Um einem Element technisch eine Beschreibung hinzuzufügen, muss das Objekt mit der Beschreibung zunächst in HTML mit einer eindeutigen ID versehen werden: 

<p
  id="[Wert]">
  [Beschreibung]
<p>

Durch den Wert der ID des Objekts mit der Beschreibung wird im Steuerelement auf die Beschreibung referenziert: 

<button
  aria-describedby="[Wert]">
  [Beschriftung]
</button>
<p
  id="[Wert]">
  [Beschreibung]
<p>

Referenzieren zu mehreren Beschreibungen

Mehrere Beschreibungen lassen sich durch Referenzieren auf mehrere IDs zu Objekten realisieren. Die referenzierten Beschreibungen werden jeweils durch Leerzeichen zwischen den IDs eingebunden. Die Ausgabe durch Screen Reader erfolgt in der Reihenfolge der Werte für die jeweilige ID. 

<button
  aria-describedby="[Wert1] [Wert2]">
  [Beschriftung]
</button>

Verborgenen Inhalt referenzieren

Objekte können auch dann referenziert werden, wenn sie technisch verborgen sind. In HTML wird ein Element beispielsweise mit dem Attribut hidden aus dem DOM entfernt. Das gleiche gilt für die CSS-Anweisung display: none.

Dieser Trick kann in Ausnahmefällen sinnvoll angewendet werden, um ergänzende Hinweise explizit für Screen Reader vorzusehen.

Elemente für Beschreibungen

Die Spezifikation erlaubt den Einsatz von aria-describedby für alle Elemente aus dem grundlegenden Markup. Tatsächlich gibt es eine zuverlässige Unterstützung des Attributs durch Screen Reader nur für fokussierbare Steuerelemente, wie Eingabekomponenten in Formularen, Schalter und Links.

Außerhalb dieser Komponenten gibt es ohnedies kaum nutzungsfreundliche Einsatzszenarien.

Beispiel: Eingabefeld mit Hinweis

Im folgenden Beispiel wird zunächst ein Eingabefeld für die Versicherungsnummer dargestellt. Unter dem Eingabefeld befindet sich visuell ein Hinweis auf eine Möglichkeit, im Bedarfsfall eine Versicherungsnummer zu finden. Damit der Hinweis auch für Screen Reader ohne zusätzliche Navigation verfügbar ist, wird auf den Hinweis im input-Element mittels aria-describedby referenziert.

Code für Eingabefeld mit Hinweis 

<label
  for="vsnr-id">
  Versicherungsnummer:
</label>
<input
  aria-describedby="vsnr-hint"
  id="vsnr-id"
  type="text" >
<p
  id="vsnr-hint">
  Sie finden Ihre Versicherungsnummer auf Ihrer E-Card, die Sie auch in einer Ordination benötigen.
</p>

Ergebnis

Du kannst das Verhalten Prüfen, indem du einen Screen Reader aktivierst.

Sie finden Ihre Versicherungsnummer auf Ihrer E-Card, die Sie auch in einer Ordination benötigen.

Die Sprachausgabe gibt zunächst die Beschriftung des Steuerelements und anschließend die Beschreibung wieder. Der Typ des Steuerelements kann der Beschriftung vorangestellt oder angehängt sein. Eine Sprachausgabe verlautet also insgesamt etwa folgende Information:

Versicherungsnummer: Eingabefeld
Sie finden Ihre Versicherungsnummer auf Ihrer E-Card, die Sie auch in einer Ordination benötigen.

Nutzungsfreundlichkeit

Das Attribut aria-describedby dient sehbehinderten Menschen, die mit einem Screen Reader arbeiten. Informationen, die visuell aus dem Kontext wahrnehmbar sind, können technisch für Screen Reader bereitgestellt werden. Überlegungen zur Nutzungsfreundlichkeit müssen sich daher auf die technische Wahrnehmung von Elementen mit einem Screen Reader konzentrieren.

Einsatz Steuerelementen vorbehalten

Die Spezifikation erlaubt den Einsatz von aria-describedby für das gesamte HTML-Markup. Screen Reader weisen jedoch ein unzufriedenstellendes Verhalten beim Einsatz für statische Komponenten auf. Das Attribut sollte daher nur für Formularkomponenten, Schalter und Links eingesetzt werden. Im Bedarfsfall muss das Verhalten mit gängigen assistierenden Technologien getestet werden.

Formulierung der Beschreibung

Die referenzierte Beschreibung muss kurz und prägnant auf die wesentlichen Zusatzinformationen für das jeweilige Objekt beschränkt bleiben. Ausführlichere Erläuterungen sollten vor dem erklärungsbedürftigen Element eingebettet werden.

Für ausführlichere Zusatzinformationen stehen Alternativen zu aria-describedby zur Verfügung:

Interaktive Inhalte nicht referenzieren

Die Inhalte eines referenzierten Objekts werden vom Screen Reader als reiner Text ohne Semantik ausgegeben. Der Fokus wird bei der Wiedergabe auch nicht auf das Objekt mit der Beschreibung verschoben. Die Beschreibung sollte daher keine interaktiven Elemente, wie Links zu weiterführenden Informationen enthalten.

Der Fokus wird ähnlich auch beim Einsatz von Live Regionen , etwa durch das output-Element nicht verschoben. Auch diese sollten daher keine interaktiven Komponenten enthalten.

Hinweise nicht nur für Screen Reader

Die Möglichkeiten, mit dem HTML-Attribut hidden oder der CSS-Anweisung display: none referenzierte Inhalte vom Bildschirm zu verbergen, sollte nur in begründeten Ausnahmefällen eingesetzt werden. Sehende Assistenzpersonen suchen am Bildschirm ansonsten möglicherweise ratlos nach einer Ursache für das Screen Reader Verhalten. Selbst die Suche im Browser mittels STRG+F bleibt erfolglos.

Hinweise nicht für Screen Reader verbergen

Geübte Nutzer*innen beschwerten sich beim Arbeiten mit einem Screen Reader schon einmal über die Wiederholung der Beschreibung. Erst wird die Beschreibung beim Betreten des Steuerelements mit der Tabulator-Taste vorgelesen und dann gleich wieder durch Drücken von ↓. Könnte das Element mit dem Hinweis nicht mittels aria-hidden für Screen Reader verborgen werden?

Eine Beschreibung wird gewöhnlich beim Betreten eines Steuerelements mittels Tabulator vorgelesen. Die Angabe von Hinweisen erfolgt jedoch vielfach nicht bei der Navigation mittels Pfeiltasten (↓ / ↑). Auch beim Auflisten von Formularkomponenten auf einer Webseite (z.B. JAWS-Taste+F5) wird die Beschreibung nicht mitgeliefert.

Das Objekt mit dem Hinweis darf daher auf keinen Fall für assistierende Technologien verborgen werden: 

<p
  id="vsnr-hint"
  aria-hidden="true">
  Sie finden Ihre Versicherungsnummer auf Ihrer E-Card, die Sie auch in einer Ordination benötigen.
</p>