Signatur
Beschreibung
Über die Eigenschaft ariaMultiSelectable des ElementInternals-Objekts legt ein autonomes Custom Element fest, ob Hilfstechnologien wie Screenreader es als Mehrfachauswahl ansagen sollen. Dabei wird kein sichtbares aria-multiselectable-Attribut in das DOM geschrieben. Der Wert gilt als interne Standard-Semantik des Elements und steht nur im Accessibility-Baum.
Der Wert ist ein String: "true" heißt, dass mehrere Einträge gleichzeitig ausgewählt sein können. "false" steht für eine Einfachauswahl und ist das Standardverhalten. Mit null entfernen Sie den Wert wieder. Sinnvoll ist die Eigenschaft nur zusammen mit Rollen, die eine Auswahl verwalten: listbox, grid, tablist und tree (bzw. treegrid).
Setzt der Nutzer der Komponente selbst ein aria-multiselectable-Attribut auf das Host-Element, hat dieses Vorrang vor dem Wert aus ElementInternals. So kann die Komponente einen sinnvollen Standard mitbringen, den der Seitenautor bei Bedarf überschreibt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | null | null | Beim Setzen: "true" oder "false". null entfernt den Wert. |
Rückgabewert
"true" oder "false"). Wurde nichts gesetzt, ist er null.Beispiele
Listbox-Komponente mit Mehrfachauswahl
class MultiListbox extends HTMLElement {
#internals;
constructor() {
super();
this.#internals = this.attachInternals();
this.#internals.role = 'listbox';
this.#internals.ariaMultiSelectable = 'true';
}
get internals() { return this.#internals; }
}
customElements.define('multi-listbox', MultiListbox);
const box = document.createElement('multi-listbox');
console.log(box.internals.ariaMultiSelectable);
console.log(box.getAttribute('aria-multiselectable'));Modus dynamisch über ein Attribut umschalten
class SelectList extends HTMLElement {
static observedAttributes = ['multiple'];
#internals = this.attachInternals();
constructor() {
super();
this.#internals.role = 'listbox';
this.#internals.ariaMultiSelectable = 'false';
}
attributeChangedCallback(name, _old, value) {
if (name === 'multiple') {
// Leerer String bedeutet: Attribut ist vorhanden
this.#internals.ariaMultiSelectable = value !== null ? 'true' : 'false';
console.log('Mehrfachauswahl:', this.#internals.ariaMultiSelectable);
}
}
}
customElements.define('select-list', SelectList);
const list = document.createElement('select-list');
list.setAttribute('multiple', '');
list.removeAttribute('multiple');Feature-Erkennung mit Fallback-Attribut
class FallbackGrid extends HTMLElement {
constructor() {
super();
const internals = this.attachInternals?.();
if (internals && 'ariaMultiSelectable' in internals) {
internals.role = 'grid';
internals.ariaMultiSelectable = 'true';
} else {
// Ältere Browser: sichtbare Attribute setzen, sobald das Element im DOM ist
this.fallback = true;
}
}
connectedCallback() {
if (this.fallback) {
this.setAttribute('role', 'grid');
this.setAttribute('aria-multiselectable', 'true');
}
}
}
customElements.define('fallback-grid', FallbackGrid);
document.body.append(document.createElement('fallback-grid'));// Wichtig · Fallstricke
- Nur Semantik: Die Eigenschaft ändert kein Verhalten. Mehrfachauswahl per Strg/Shift-Klick und die Tastatursteuerung müssen Sie selbst umschreiben. Außerdem müssen Sie
aria-selectedauf den einzelnenoption-Einträgen pflegen. - Der Wert ist ein String: Weisen Sie
"true"bzw."false"zu, keinen booleschen Wert.truewird zwar in"true"umgewandelt,falseaber in"false"und nicht innull. - Vorrang: Ein vom Seitenautor gesetztes
aria-multiselectable-Attribut überschreibt den Wert ausElementInternals. attachInternals()ist nur für autonome Custom Elements verfügbar, also nicht für eingebaute Elemente mitis="…". Sie dürfen die Methode pro Element nur einmal aufrufen, sonst wird einNotSupportedErrorausgelöst.- Kompatibilität: Firefox unterstützt die ARIA-Reflection auf
ElementInternalserst ab Version 119, Safari ab 16.4. Für ältere Browser sollten Sie eine Feature-Erkennung wie in Beispiel 3 einbauen.