Element.ariaHasPopup — Eigenschaft · JavaScript-Referenz

Signatur

Element.ariaHasPopup

Beschreibung

Die Eigenschaft ariaHasPopup gehört zum ARIA-Reflection-Mechanismus der Element-Schnittstelle. Sie ist direkt mit dem HTML-Attribut aria-haspopup verknüpft. Beim Lesen erhältst du den aktuellen Attributwert als String. Beim Schreiben wird das Attribut gesetzt, als hättest du setAttribute('aria-haspopup', …) aufgerufen.

Mit dem Attribut erfahren assistive Technologien wie Screenreader, dass ein Element (meist ein Button oder eine Combobox) beim Aktivieren ein weiteres interaktives Element öffnet. Erlaubt sind diese Werte:

"false": kein Popup (Standard)
"true": ein Popup; bedeutet dasselbe wie "menu"
"menu", "listbox", "tree", "grid", "dialog": Popup mit der jeweiligen Rolle

Du setzt die Eigenschaft typischerweise in eigenen UI-Komponenten wie Dropdown-Menüs, Autovervollständigung oder Buttons, die einen Dialog öffnen. Wichtig: Das Popup selbst muss die passende role haben. Außerdem sollte der Offen-Zustand zusätzlich über aria-expanded (ariaExpanded) mitgeteilt werden.

Parameter

Name	Typ	Default	Beschreibung
$value	string \| null	null	Neuer Wert beim Setzen: `"false"`, `"true"`, `"menu"`, `"listbox"`, `"tree"`, `"grid"` oder `"dialog"`. Mit `null` wird das Attribut entfernt.

Rückgabewert

Typ

string | null

Beschreibung

Der aktuelle Wert des Attributs aria-haspopup als String. Ist das Attribut nicht gesetzt, ist der Wert null.

Beispiele

Wert auslesen

// HTML: <button id="menu-btn" aria-haspopup="menu">Optionen</button>
const button = document.querySelector('#menu-btn');
console.log(button.ariaHasPopup);

menu

Menü-Button zur Laufzeit zugänglich machen

const button = document.createElement('button');
button.textContent = 'Aktionen';
button.ariaHasPopup = 'menu';
button.ariaExpanded = 'false';
button.setAttribute('aria-controls', 'action-menu');

const menu = document.createElement('ul');
menu.id = 'action-menu';
menu.setAttribute('role', 'menu');
menu.hidden = true;

button.addEventListener('click', () => {
  const open = button.ariaExpanded === 'true';
  button.ariaExpanded = String(!open);
  menu.hidden = open;
});

document.body.append(button, menu);
console.log(button.getAttribute('aria-haspopup'));

menu

Combobox mit Listbox-Popup und Entfernen des Attributs

const input = document.createElement('input');
input.setAttribute('role', 'combobox');
input.ariaHasPopup = 'listbox';
console.log(input.outerHTML);

// Autovervollständigung wird abgeschaltet: Attribut entfernen
input.ariaHasPopup = null;
console.log(input.hasAttribute('aria-haspopup'), input.ariaHasPopup);

<input role="combobox" aria-haspopup="listbox"> false null

// Wichtig · Fallstricke

Keine Prüfung der Werte: Der Browser nimmt beliebige Strings an, etwa el.ariaHasPopup = 'popover'. Ungültige Werte behandeln assistive Technologien wie "false".
Nur Strings: Auch boolesche Werte werden als String gespeichert. Aus true wird also "true". Vergleiche deshalb immer mit Strings.
"true" bedeutet „Menü“: Öffnet das Element einen Dialog oder eine Listbox, gib den genauen Typ an. Sonst kündigt der Screenreader ein Menü an.
Nicht bei jeder Rolle sinnvoll: Erlaubt ist das Attribut unter anderem bei button, combobox, menuitem, link, tab, textbox und gridcell. Bei anderen Rollen kann es ignoriert werden.
Kein Verhalten: Die Eigenschaft beschreibt nur die Semantik. Das Öffnen des Popups, die Tastatursteuerung (Enter, Leertaste, Pfeiltasten, Esc) und das Setzen des Fokus musst du selbst umsetzen.
Kompatibilität: Firefox unterstützt ARIA-Reflection erst ab Version 119. Für ältere Browser verwende setAttribute('aria-haspopup', …), das überall funktioniert.

Siehe auch

Element.ariaExpanded Element.role Element.ariaControlsElements Element.setAttribute() Element.getAttribute() Element Element.ariaKeyShortcuts