aria-haspopup (Eigenschaft )

Definition und Verwendung

Die WAI definiert das Attribut in der aktuellen Spezifikation folgendermaßen:

Verdeutlicht die Verfügbarkeit und den Typ eines interaktiven Popup-Elements, wie eines Menüs oder Dialogfelds, das durch ein Element ausgelöst werden kann.

Ein Popup Element erscheint gewöhnlich als ein Inhaltsblock, der anderen Inhalt überlagert. Autor*innen müssen sicherstellen, dass die Rolle des Elements, welches als Container für den Popup-Inhalt dient, entweder einem Menü, einer Listbox, einem Baum, einem Gitter (grid) oder einem Diealog entspricht und dass der Wert von aria-haspopup mit der Rolle des Popup-Containers übereinstimmt.

[…]

Um Rückwärtskompatibilität zu ARIA 1.0 Inhalt zu gewährleisten, müssen Darstellungsprogramme den aria-haspopup Wert true gleichbedeutend mit dem Wert menu behandeln.

[…]

Anmerkungen

1. Ein Tooltipp wird in diesem Kontext nicht als Popup betrachtet.
2. Die Verwendung von aria-haspopup ist am relevantesten, wenn das Steuerelement zum Auslösen des Popup über einen visuellen Indikator verfügt. Beispielsweise werden Steuerelemente vielfach mit einem nach unten zeigenden Dreieck, einem Chevron oder drei Punkten (einer Ellipse) visuelle Standardindikatoren für die Anzeige eines Popup durch Aktivieren des Steuerelements. Wenn die Darstellung einer funktionellen Unterscheidung durch visuelle Merkmale für Sehnende von Relevanz ist, ist diese funktionelle Unterscheidung gewöhnlich auch bei der Nutzung von assistierenden Technologien von Relevanz. Gibt es keinen visuellen Indikator für das Auslösen eines Popup, sollte die Notwendigkeit von aria-haspopup hinterfragt und gegebenenfalls vermieden werden.

[…]

ARIA 1.2 #aria-haspopup

(Übersetzung durch Zweiter Blick)

Elemente und Rollen

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

• application
• button
• combobox
• gridcell
• link
• menuitem
• slider
• tab
• textbox
• treeitem

Visuelle Indikatoren und aria-haspopup

Wenn die Darstellung einer funktionellen Eigenart durch visuelle Merkmale für Sehnende von Relevanz ist, ist diese Eigenart gewöhnlich auch bei der Nutzung von assistierenden Technologien bedeutsam. In der ARIA Spezifikation werden für die Relevanz der Verwendung von aria-haspopup in einer Anmerkung folgende visuelle Indikatoren angeführt:

Nach unten zeigendes Dreieck

Die folgende Darstellung zeigt exemplarisch eine Hauptnavigation mit Dreiecken als Hinweise auf die Verfügbarkeit von Unterpunkten zu den einzelnen Schaltern:

Angebote ▽ Informationen ▽ Kontakt ▽ Über uns ▽

Ein Dreieck wird jedoch auch als Indikator für Ausklappmechanismen verwendet, etwa von details-Komponenten in der Standarddarstellung der meisten Browser. Du kannst die Darstellung der Funktionalität des details-Elements in deinem Browser im folgendem Beispiel testen:

Was bedeutet Q&A?

Questions and Answers (Fragen und Antworten).

Da sich Bedienungskonzepte von Ausklappmechanismus und Popup deutlich unterscheiden, kann ein Dreieck als Indikator für ein vorhandenes Popup zu Missverständnissen bei der Tastaturbedienung führen.

Chevron

Chevrons werden ursprünglich als Uniformabzeichen verwendet und erinnern an Pfeilspitzen. Die folgende Darstellung zeigt die Hauptnavigation nun mit nach unten zeigenden Pfeilspitzen als Hinweise auf die Verfügbarkeit von Unterpunkten:

Angebote ⌄ Informationen ⌄ Kontakt ⌄ Über uns ⌄

Drei Punkte (Ellipse)

In einigen Programmen wird auf Schaltern durch eine Ellipse (…) darauf hingewiesen, dass sich beim Drücken des Schalters ein Dialogfeld öffnet. Dieser Erfahrungshintergrund kann entsprechend für Webseiten und Apps genützt werden:

Drucken …

Indikatoren verbergen

Der visuelle Indikator wird für Screen Reader verborgen, wenn ein technischer Indikator vorhanden ist. Auf diese Weise wird eine überflüssige wortreiche Darstellung für Screen Reader vermieden.

Der Code zum Verbergen eines nach unten zeigenden Dreiecks in einem Menüschalter würde etwa folgendermaßen aussehen:

<button 
  aria-haspopup="menu">
  <span>
    Angebote
  </span>
  <span
    aria-hidden="true" >
    &bigtriangledown;
  </span>
</button>

Der Code ▽ liefert das Zeichen ▽. Ohne Verbergen des Dreiecks verlautet ein Screen Reader etwa:

Angebote Nach unten zeigendes weißes Dreieck.

Verwandte Konzepte

Tooltipp

Ein Tooltipp ist rein informativ und verfügt lediglich über einen Mechanismus zum Schließen. Die Kennzeichnung als Popup ist daher im Kontext komplexerer Popup-Fenster ungeeignet.

HTML details & summary-Element

Das HTML Element <details> liefert einen Mechanismus zum Einblenden von Zusatzinformationen. Die Ergänzungen werden jedoch unmittelbar unter dem Steuerelement eingeblendet und überlagern nicht den Inhalt der aktuellen Webseite.

Werte

false (Standard)

Das Element hat kein Popup.

true

Das Popup ist ein Menü (menu)

dialog

Das Popup ist ein Dialogfeld (dialog)

grid

Das Popup verfügt über eine interaktive Gitterstruktur (grid)

listbox

Das Popup ist eine Listenbox (listbox)

menu

Das Popup ist ein Menü (menu)

tree

Das Popup verfügt über eine Baumstruktur (tree)

Der Wert des Attributs muss der Rolle des Containers für das Popup entsprechen und umgekehrt.

Technische Realisierung

HTML Techniken

Typischerweise wird das Steuerelement zum Aktivieren eines Popup als Schalter realisiert (<button> oder role="button"). Eine Linksemantik ist hingegen nicht angebracht, da das Aktivieren unter der aktuellen Adresse Inhalte hinzufügt. (<a aria-haspopup=…).

Es genügt dann, das Attribut mit dem passenden Wert in den Tag einzubetten.

<button
  aria-haspopup="menu">
    [Beschriftung]
</button>

Tastaturbedienung

Für die Tastaturbedienbarkeit sollten folgende Punkte gewährleistet sein:

• Das Element zum Auslösen des Popup ist fokussierbar.
• Ein Tastaturmechanismus zum Öffnen des Popup ist verfügbar.
• Das Popup Element managt den Fokus all seiner Abkömmlinge.

CSS Techniken

Zur Gewährleistung einer parallelen visuellen und technischen Darstellung kann mittels CSS die visuelle Darstellung an das technische Attribut geknüpft werden. Die visuelle Hervorhebung von Elementen mit dem Attribut aria-haspopup kann etwa folgendermaßen realisiert werden:

button [aria-haspopup]="menu" {
  border: blue solid 1px;
  …
}

Beispiel: Schalter zu Dialogfeld

Der folgende Code zeigt für assistierende Technologien an, dass beim Auslösen ein Dialogfeld geöffnet wird:

<button
  aria-haspopup="dialog">
  Speichern unter …
</button>

Dieser Code wird in deinem Browser folgendermaßen realisiert:

JAWS gibt bei der Navigation mit Pfeiltasten oder Tabulator etwa Folgendes aus:

Speichern unter … Schalter Hat Popup Dialog

Verhalten von assistierenden Technologien

Screen Reader interpretieren leider das Attribut aria-haspopup mit seinen Werten teilweise sehr inkonsistent und unpräzise. Die folgende Tabelle enthält die Sprachausgabe in der jeweils aktuellen Version mit Stand Juni 2025:

Das Attribut aria-haspopup liefert laut Definition einen Hinweis auf die Verfügbarkeit und den Typ eines Popup-Elements. Verfügbarkeit und Typ werden jedoch bei keinem der getesteten Screen Reader zuverlässig und verständlich dargestellt:

• JAWS informiert bei menu bzw. dem allgemeinen true nicht über den Elementtyp Popup und übersetzt nicht den Typ des jeweiligen Popup-Elements.
• NVDA informiert generell nicht über die Eigenart Popup und stellt den Typ menu bzw. das allgemeine true nicht konsistent zu anderen Typen dar.
• VoiceOver verwendet für Popup den Ausdruck Einblendmenü und stellt den Typ menu bzw. das allgemeine true nicht konsistent zu anderen Typen dar.

Vorschläge für die Formulierung durch assistierende Technologien

Um Vorhandensein und Eigenart eines Popup-Fensters angemessen darzustellen, sollten Screen Reader folgende Angaben verlauten:

1. Falls der Wert des Attributs aria-haspopup ungleich false hat:

   Hat Popup

2. Falls ein spezieller Typ im Wert angegeben ist (der Wert ungleich false oder true ist), ergänzend eine Übersetzung des Werts als Bezeichnung:

   Umsetzung der Werte durch Screen Reader

   Wert	Bezeichnung
   dialog	Dialog
   grid	Gitter
   listbox	Liste
   menu	Menü
   tree	Baum

Ein Screen Reader würde nach diesen Vorgaben das Vorhandensein eines Dialogfelds folgendermaßen darstellen:

Hat Popup Dialog

Für Inhalte die auf Basis älterer ARIA-Spezifikationen lediglich die Werte false / true kennen, wird in der aktuellen Spezifikation festgelegt, dass von einem Screen Reader das Vorhandensein eines Popup generell durch den Wert menu interpretiert wird. Dies bedeutet jedoch nicht, dass unter Verwendung der aktuellen Spezifikation true und menu gleich dargestellt werden müssen.