aria-activedescendant

Wann verwenden

Bei einem zusammengesetzten Widget, das nur einen einzigen Tab-Stopp haben soll, bei dem Benutzerinnen und Benutzer aber dennoch eine Markierung über viele Elemente bewegen müssen — etwa ein Combobox-Eingabefeld mit einem Listbox-Popup, eine Single-Tab-Stop-Listbox, ein Treegrid oder ein Datagrid. Der DOM-Fokus verbleibt auf dem Containerelement (dem Eingabefeld, der Listbox, dem Grid). Wenn jemand eine Pfeiltaste drückt, wird aria-activedescendant auf die ID des neu hervorgehobenen Kindelements aktualisiert; assistive Technologien kündigen dieses Element an, als hätte sich der Fokus tatsächlich dorthin bewegt.

Das Alternativmuster ist der Roving Tabindex: dabei wird der DOM-Fokus tatsächlich verschoben und die tabindex-Werte entsprechend angepasst. aria-activedescendant empfiehlt sich, wenn es den Code vereinfacht, den Browser-Fokus auf dem Container zu halten — typischerweise, weil dort die Eingabe erfolgt oder Tastaturkürzel verankert sind.

Verhalten

Der Wert ist eine einzelne Element-ID — niemals eine Liste. Das referenzierte Element muss ein Nachfahre des Containers sein, der das Attribut aria-activedescendant trägt (oder über aria-owns besessen wird). Ändert sich der Wert, wandert die Position des „virtuellen Fokus“ im Accessibility-Tree zu diesem Element, und assistive Technologien geben dessen Beschriftung, Rolle und Zustand aus.

Zwei Aspekte verbleiben in der Verantwortung der Entwickelnden:

• Visuelle Darstellung. Assistive Technologien wissen, wo der virtuelle Fokus liegt, aber der Browser zeichnet keinen Fokusring um das Nachfahrenelement. Eine eigene Hervorhebung per CSS muss synchron per Klasse gesetzt werden.
• Scrollen. Wenn das aktive Element außerhalb des sichtbaren Bereichs liegt, muss es programmatisch ins Sichtfeld gescrollt werden; der Browser übernimmt das nicht.

Wenn das Popup geschlossen wird oder das Widget den Fokus verliert, sollte aria-activedescendant auf einen leeren String gesetzt oder das Attribut entfernt werden.

Häufige Fehler

• Referenz auf eine ID, die kein Nachfahre des Containers ist (und nicht über aria-owns eingebunden wurde). Assistive Technologien ignorieren die Referenz in diesem Fall.
• Vermischung der Muster: sowohl tabindex="0" auf dem Nachfahrenelement setzen als auch aria-activedescendant auf dem Container. Nur eine Fokusstrategie sollte gewählt werden; beide gleichzeitig führen zu widersprüchlichem Verhalten.
• Die visuelle Hervorhebung wird nicht aktualisiert, wenn sich das Attribut ändert — sehende Personen sehen keine Bewegung, während Benutzerinnen und Benutzer assistiver Technologien die Ankündigung hören.
• Eine veraltete ID verbleibt, nachdem die Option aus der Liste entfernt wurde (z. B. bei gefilterten Combobox-Ergebnissen).
• aria-activedescendant wird bei Maus-Hover aktualisiert. Das Attribut sollte ausschließlich das per Tastatur aktive Element widerspiegeln.
• Setzen auf einem Element, dessen Nachfahre sich nicht im AT-Tree befindet (fehlende aria-owns-Angabe für eine portierte Liste).

Beispiel

<label for="fruit">Obst</label>
<input
  id="fruit"
  role="combobox"
  type="text"
  aria-controls="fruit-listbox"
  aria-expanded="true"
  aria-activedescendant="fruit-2"
  autocomplete="off"
>
<ul id="fruit-listbox" role="listbox">
  <li id="fruit-1" role="option">Apple</li>
  <li id="fruit-2" role="option" class="is-active">Banana</li>
  <li id="fruit-3" role="option">Cherry</li>
</ul>