Zustand Widget-Zustand

`aria-selected`

Gibt an, dass ein Element innerhalb eines Einzel- oder Mehrfachauswahl-Containers aktuell ausgewählt ist. Wird auf tab, option, gridcell, treeitem und ähnlichen Rollen verwendet. Zu unterscheiden von aria-checked (Kontrollkästchen/Radio) und aria-pressed (Umschalter).

Verwendung

Auf Elementen, die zu einem Container mit einem Auswahlmodell gehören:

role="tab" innerhalb einer tablist (genau eine ausgewählt).
role="option" innerhalb einer listbox (eine oder mehrere, abhängig von aria-multiselectable).
role="treeitem" innerhalb eines tree.
role="gridcell", role="row", role="columnheader", role="rowheader" innerhalb eines grid.

Der Zustand beschreibt die Beziehung zwischen dem Element und dem Auswahlmodell seines Containers – kein eigenständiges Ein/Aus wie bei einem Kontrollkästchen. Die richtige Wahl je nach Muster:

aria-selected – Elemente in Tab-, Option-, Baum- oder Grid-Kontext.
aria-checked – Kontrollkästchen und Radio-Buttons (unabhängige Auswahl).
aria-pressed – Umschalter (der Button selbst ist ein- oder ausgeschaltet).

Ein häufiger Fehler ist das Setzen von aria-selected="true" auf einem <button> im Sinne von „dieser Button wurde zuletzt geklickt“. Ist das Element kein Bestandteil eines auswahl-ähnlichen Widgets, sollte stattdessen aria-pressed oder aria-current verwendet werden.

Synchron halten

Gültige Werte sind "true" und "false". "false" sollte auf nicht ausgewählten Elementen gesetzt werden, anstatt das Attribut wegzulassen – assistive Technologie kann dann korrekte Positionsangaben wie „1 von 5“ ausgeben. In einem Einzel-Auswahl-Widget (Tabliste, Einzel-Auswahl-Listbox) sollte zu jedem Zeitpunkt genau ein Element "true" sein.

Das Attribut muss synchron mit dem visuellen Indikator und dem Fokus-Management geändert werden. In einer Tabliste verschiebt ein Selektionswechsel in der Regel auch tabindex="0" auf den ausgewählten Tab und setzt tabindex="-1" bei den anderen.

Häufige Fehler

aria-selected auf einem Button oder Link außerhalb eines auswahl-ähnlichen Containers verwenden.
Mehrere aria-selected="true"-Elemente in einer Einzel-Auswahl-Tabliste oder -Listbox.
Das Attribut beim vorher ausgewählten Element nicht auf aria-selected="false" zurücksetzen, wenn die Auswahl wechselt.
Das visuelle „ausgewählt“-Erscheinungsbild per CSS setzen, ohne das Attribut umzuschalten.
aria-selected mit aria-checked bei Listbox-Optionen (stets selected) oder mit aria-current bei einem Navigationslink (current, nicht selected) verwechseln.
aria-selected auf role="menuitem" setzen – Menüeinträge unterstützen es nicht; für Menü-Kontrollkästchen oder -Radio-Buttons ist aria-checked zu verwenden.

Beispiel

<div role="tablist" aria-label="Sections">
  <button role="tab" id="tab-1" aria-selected="true"  tabindex="0"  aria-controls="panel-1">Overview</button>
  <button role="tab" id="tab-2" aria-selected="false" tabindex="-1" aria-controls="panel-2">Details</button>
  <button role="tab" id="tab-3" aria-selected="false" tabindex="-1" aria-controls="panel-3">Reviews</button>
</div>