ARIA Zustände & Eigenschaften
Schematische Darstellung: Person mit weißem Stock gelangt über ein Boddenleitsystem zu einem Aufmerksamkeitsfeld

aria-haspopup (Eigenschaft )

Das Attribut aria-haspopup weist auf das Vorhandensein und den Typ eines Popup-Elements hin, das von einem Steuerelement bereitgestellt wird.

Typischerweise wird das Steuerelement zum Aktivieren eines Popup als Schalter realisiert (<button> oder role="button"). Eine Linksemantik ist nicht angebracht, da das Aktivieren zu keiner anderen Adresse führt (<a aria-haspopup=…).

Das Attribut fügt keine Funktionalitäten zu einem Element hinzu. Es ist rein informativ und nicht performativ.

Ein Tooltipp wird in diesem Kontext nicht als Popup betrachtet.

Definition und Verwendung

Die WAI definiert das Attribut folgendermaßen:

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

Die Verwendung von aria-haspopup ist dann am relevantesten, wenn das Steuerelement zum Auslösen des Popup über einen visuellen Indikator verfügt. Beispielsweise wurden Steuerelemente vielfach mit einem nach unten zeigenden Dreieck, einem Chevron oder drei Punkten (einer Ellipse) zu visuellen Standardindikatoren für die Verfügbarkeit eines Popup. 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.

(Ü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:

Tastaturbedienung

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

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 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.

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:

Ein Screen Reader gibt bei der Navigation mit Pfeiltasten oder Tabulator etwa Folgendes aus:

Speichern unter … Schalter Hat Popup Dialog

Verhalten von assistierenden Technologien

JAWS gibt in der Standardkonfiguration der Version 2023 folgende spezifische Informationen an (unter Firefox 117 und Chrome 116 ):

aria-haspopup und JAWS
Wert 📢 Ausgabe
false [Keine Ausgabe]
true Menü
dialog Hat Popup dialog
grid Hat Popup grid
listbox Hat Popup listbox
menu Menü
tree Hat Popup tree