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

aria-selected (Zustand)
Information über Aktivierungszustand

Mit aria-selected wird in bestimmten Fällen der Zustand der Auswahl verfügbarer Elemente in einer Auswahlgruppe technisch für Screen Reader wiedergegeben.

Definition und Verwendung

Die WAI definiert das Attribut folgendermaßen:

Dient als Indikator für den aktuell „ausgewählten“ Zustand von unterschiedlichen Komponenten.

Vergleiche:

  • aria-checked
  • aria-pressed

Dieses Attribut wird in Komponenten verwendet, die eine einzelne oder eine mehrfache Auswahl zulassen.

Quelle: ARIA 1.2 Spezifikation

(Übersetzung durch Zweiter Blick)

Die Detailbeschreibungen variieren leicht zwischen der Spezifikation in ARIA 1.2 und dem Entwurf für eine künftige Spezifikation in der Version 1.3.

Elemente und Rollen

Das Attribut aria-selected ist in folgenden ARIA-Rollen beziehungsweise HTML-Elementen mit dieser impliziten Rolle zulässig:

Einsatzbereiche

Eine erfolgte Auswahl durch Nutzer*innen wird bei entsprechendem Einsatz von HTML visuell durch ein angekreuztes Kästchen oder einen Punkt in einem Kreis angezeigt. Screen Reader verlauten bei korrektem HTML-Einsatz automatisch den jeweiligen Aktivierungszustand.

Gelegentlich werden zur Auswahl jedoch nicht HTML-Standard-Auswahlkomponenten verwendet. Als visueller Indikator dient dann vielfach eine Änderung von Schriftfarbe, Hintergrund oder eine fette Schrift. Für eine der folgenden Komponenten wird dann der Aktivierungszustand technisch mit dem Attribut aria-selected für Screen Reader wiedergegeben:

Attribute für Auswahl

In ARIA stehen weitere Attribute zur Kennzeichnung der Auswahl oder Aktivität zur Verfügung. Welches der verfügbaren Attribute angemessen ist, hängt vom Kontext der jeweiligen Interaktion ab.

aria-checked
Das Attribut aria-checked liefert im Wesentlichen dieselbe Information, wird jedoch hauptsächlich für Checkboxen und Radiobuttons verwendet. Für die Rollen gridcell, row und tab steht das Attribut aria-selected zur Verfügung.

Wenn das entsprechende HTML-Markup für Checkboxen oder Auswahlelemente verwendet wird, kann auf die Information durch ein ARIA-Attribut verzichtet werden. Die Information über den Aktivierungszustand wird automatisch mitgeliefert.

aria-pressed
Das Attribut aria-pressed ist nur für Umschalter relevant. Bei einem Wert true wird der Umschalter vom Screen Reader als „gedrückt“ ausgegeben.
aria-current

Das Attribut aria-current informiert über eine bereits ausgelöste Auswahl, beispielsweise die aktuelle Position in Standortangaben. Ein mit aria-selected gekennzeichnetes Element wird hingegen erst nach dem Absenden eines Formulars umgesetzt.

Ergänzende Attribute für Auswahl

Ergänzend zu Hinweisen über den Auswahlzustand können weitere ARIA-Attribute erforderlich sein:

aria-multiselectable
Wenn eine Mehrfachauswahl möglich ist, sollte dem übergeordneten Element (listbox, tablist, …) das Attribut aria-multiselectable="true" hinzugefügt werden. Darüber hinaus kann in vielen Fällen auch ein redaktioneller Hinweis auf die Möglichkeit einer Mehrfachauswahl zweckmäßig sein.
aria-orientation
Wenn die Ausrichtung der Tastaturbedienung vom Standardwert abweicht muss dies mit dem entsprechenden Wert für die abweichende horizontale oder vertikale Ausrichtung gekennzeichnet werden.

Missbrauch von aria-selected

aria-selected darf nicht in Links verwendet werden, um etwa einen Toggle Schalter zu simulieren. Ebenso ist das Attribut nicht geeignet, um Kontrollkästchen als angekreuzt zu kennzeichnen. Ausgewählt ist nicht das gleiche wie angekreuzt.

Technische Realisierung

HTML Techniken

Das Element muss fokussierbar und auswählbar sein. Es genügt dann , das Attribut mit dem passenden Wert in den Tag einzubetten.

Mit dem folgenden Code wird beispielsweise die erste Registerkarte einer Tablist als ausgewählt gekennzeichnet: 

<section
  aria-label="Jahresauswahl"
  role="tablist">
  <button
    aria-selected="true"
    role="tab"
    tabindex="0"
    … >
    2025
  </button>
  …
</section>

CSS Techniken

Zur Gewährleistung einer zuverlässigen parallelen visuellen und technischen Darstellung sollte in CSS die visuelle Darstellung an das technische Attribut geknüpft werden. 

[aria-selected] {
  font-weight: bold;
  …
}

Werte

undefined (Standardwert
Das Element ist nicht auswählbar.
true
Das auswählbare Element ist ausgewählt.
false (Impliziter Standardwert für tab)
Das auswählbare Element ist nicht ausgewählt.

Verhalten von assistierenden Technologien

JAWS gibt in der Standardkonfiguration der Version 2025 unter Chrome 137 folgende spezifische Informationen an:

aria-selected und JAWS
Wert 📢 Ausgabe
undefined [Keine Ausgabe]
true ausgewählt
false [Keine Ausgabe]