Element.ariaMultiSelectable — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaMultiSelectable

Beschreibung

Die Eigenschaft ariaMultiSelectable des Interfaces Element ist ein Teil der ARIA-Reflexion. Sie liest und schreibt den Wert des Attributs aria-multiselectable direkt als Zeichenkette. So musst du nicht mit getAttribute() bzw. setAttribute() arbeiten. Das Attribut sagt assistiven Technologien wie Screenreadern, ob in einem Container mehr als ein Eintrag gleichzeitig ausgewählt sein darf.

Sinnvoll ist die Eigenschaft nur bei Elementen mit Container-Rollen, die ausgewählte Nachfahren haben können: listbox, grid, tablist und tree. Typische Anwendungsfälle sind eigene Auswahllisten, Datei-Explorer mit Mehrfachauswahl oder Tabellen, in denen Zeilen markiert werden können.

Mögliche Werte sind die Zeichenketten "true" und "false". Fehlt das Attribut, liefert die Eigenschaft null. Das bedeutet für assistive Technologien dasselbe wie "false". Die Eigenschaft ändert nur die Semantik für assistive Technologien, nicht das Verhalten. Die Logik für die Mehrfachauswahl (z. B. mit Strg- oder Umschalt-Klick) und das Setzen von aria-selected auf den Einträgen musst du selbst programmieren.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Beim Setzen: `"true"` erlaubt die Mehrfachauswahl, `"false"` erlaubt nur einen Eintrag. Mit `null` wird das Attribut entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert des Attributs aria-multiselectable als Zeichenkette ("true" oder "false"). Ist das Attribut nicht gesetzt, ist der Wert null.

Beispiele

Wert auslesen und ändern

// HTML: <div id="farben" role="listbox" aria-multiselectable="true">…</div>
const liste = document.getElementById('farben');

console.log(liste.ariaMultiSelectable);

// Auf Einzelauswahl umstellen
liste.ariaMultiSelectable = 'false';
console.log(liste.getAttribute('aria-multiselectable'));

true false

Eigene Listbox mit umschaltbarer Mehrfachauswahl

const listbox = document.createElement('ul');
listbox.role = 'listbox';
listbox.ariaLabel = 'Programmiersprachen';
listbox.ariaMultiSelectable = 'true';

['JavaScript', 'Python', 'Rust'].forEach((name) => {
  const li = document.createElement('li');
  li.role = 'option';
  li.textContent = name;
  li.ariaSelected = 'false';
  li.tabIndex = -1;
  listbox.append(li);
});

listbox.addEventListener('click', (event) => {
  const option = event.target.closest('[role="option"]');
  if (!option) return;

  const mehrfach = listbox.ariaMultiSelectable === 'true';
  if (!mehrfach || !(event.ctrlKey || event.metaKey)) {
    // Einzelauswahl: alle anderen abwählen
    listbox.querySelectorAll('[role="option"]').forEach((o) => (o.ariaSelected = 'false'));
  }
  option.ariaSelected = option.ariaSelected === 'true' ? 'false' : 'true';
});

document.body.append(listbox);

Attribut entfernen und Fallback für ältere Browser

const grid = document.querySelector('[role="grid"]');

const setzeMehrfachauswahl = (el, aktiv) => {
  if ('ariaMultiSelectable' in el) {
    el.ariaMultiSelectable = aktiv ? 'true' : 'false';
  } else {
    el.setAttribute('aria-multiselectable', String(aktiv));
  }
};

setzeMehrfachauswahl(grid, true);
console.log(grid.ariaMultiSelectable);

grid.ariaMultiSelectable = null; // Attribut wird entfernt
console.log(grid.hasAttribute('aria-multiselectable'));

true false

// Wichtig · Fallstricke

Nur eine Zeichenkette, kein Boolean: Wenn du el.ariaMultiSelectable = false zuweist, wird daraus die Zeichenkette "false". Beim Vergleichen musst du deshalb immer mit Zeichenketten arbeiten, also === 'true'. Die Prüfung if (el.ariaMultiSelectable) ist auch bei "false" wahr.
Nur Semantik: Die Eigenschaft ändert das Verhalten nicht. Tastatursteuerung, Auswahllogik und aria-selected bzw. aria-checked auf den Einträgen musst du selbst umsetzen.
Passende Rolle nötig: Die Eigenschaft wirkt nur bei listbox, grid, tablist und tree. Bei anderen Rollen ignorieren assistive Technologien den Wert.
Natives HTML bevorzugen: Ein <select multiple> ist von sich aus barrierefrei. ARIA brauchst du nur für eigene Widgets.
Browserunterstützung: Firefox unterstützt die ARIA-Reflexion erst seit Version 119. Für ältere Browser brauchst du den Fallback über setAttribute(). Auch einige DOM-Umgebungen wie jsdom bieten die Eigenschaft eventuell nicht an.

Siehe auch

Element.role Element ElementInternals.ariaMultiLine Element.ariaMultiLine Element.ariaSelected