Element.ariaSelected — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaSelected

Beschreibung

Die Eigenschaft ariaSelected gehört zum ARIA-Reflection-Mixin (ARIAMixin) des Element-Interfaces. Sie liest und schreibt direkt das HTML-Attribut aria-selected. Assistive Technologien wie Screenreader erfahren darüber, welches Element innerhalb eines zusammengesetzten Widgets gerade ausgewählt ist.

Sinnvoll ist das Attribut nur bei Elementen mit den Rollen gridcell, option, row und tab. Typische Einsatzfälle sind eigene Tab-Leisten, Listboxen, Auswahllisten oder Datentabellen, bei denen die Auswahl per JavaScript gesteuert wird.

Der Wert ist immer ein String und kein Boolean. Gültige Werte sind "true", "false" und "undefined" (Element ist nicht auswählbar). Ist das Attribut nicht gesetzt, liefert die Eigenschaft null. Wird null zugewiesen, entfernt der Browser das Attribut.

Rückgabewert

Typ

string | null

Beschreibung

"true", wenn das Element ausgewählt ist, "false", wenn es auswählbar, aber nicht ausgewählt ist, "undefined", wenn es nicht auswählbar ist, oder null, wenn das Attribut fehlt.

Beispiele

Wert lesen und setzen

// <div id="tab1" role="tab" aria-selected="false">Übersicht</div>
const tab = document.getElementById('tab1');

console.log(tab.ariaSelected);
tab.ariaSelected = 'true';
console.log(tab.getAttribute('aria-selected'));

false true

Zugängliche Tab-Leiste umschalten

// <div role="tablist">
//   <button role="tab" aria-controls="p1">Profil</button>
//   <button role="tab" aria-controls="p2">Konto</button>
// </div>
const tabs = [...document.querySelectorAll('[role="tab"]')];

const selectTab = (selected) => {
  for (const tab of tabs) {
    const isActive = tab === selected;
    tab.ariaSelected = String(isActive); // immer als String!
    tab.tabIndex = isActive ? 0 : -1;
    document.getElementById(tab.getAttribute('aria-controls')).hidden = !isActive;
  }
};

tabs.forEach((tab) => tab.addEventListener('click', () => selectTab(tab)));
selectTab(tabs[0]);

Ausgewählte Optionen einer Listbox auslesen

// <ul role="listbox" aria-multiselectable="true"> mit <li role="option">
const options = document.querySelectorAll('[role="option"]');

const selectedValues = [...options]
  .filter((opt) => opt.ariaSelected === 'true')
  .map((opt) => opt.textContent.trim());

console.log(selectedValues);

["Rot", "Blau"]

Attribut entfernen

const row = document.querySelector('[role="row"]');
row.ariaSelected = null; // entfernt aria-selected
console.log(row.hasAttribute('aria-selected'), row.ariaSelected);

false null

// Wichtig · Fallstricke

String statt Boolean: el.ariaSelected === true ist immer false. Vergleiche mit 'true'. Beim Setzen wird false zum String "false" umgewandelt. Das funktioniert zwar, ist aber schwer lesbar – besser explizit String(bool) verwenden.
Rolle beachten: aria-selected ist nur bei tab, option, row und gridcell gültig. Für Checkboxen oder Schalter gehören aria-checked bzw. aria-pressed. Bei Navigationslinks ist aria-current richtig.
Die Eigenschaft ändert nur die Semantik für assistive Technologien. Optische Hervorhebung, Fokus-Verwaltung und Tastatur-Steuerung (Pfeiltasten, tabindex) musst du selbst umsetzen. Zum Gestalten eignet sich der CSS-Selektor [aria-selected="true"].
Kompatibilität: Chrome/Edge ab 81 und Safari ab 12.1 unterstützen die ARIA-Reflection, Firefox erst ab 119. Für ältere Browser setAttribute('aria-selected', 'true') verwenden, das funktioniert überall.
Native <option>-Elemente in einem <select> brauchen kein aria-selected. Dort gilt die Eigenschaft selected.

Siehe auch

Element.role Element.ariaPressed Element.ariaChecked Element.ariaLevel Element.ariaRelevant