aria-haspopup

Wann zu verwenden

Bei jedem Steuerelement, das ein vorübergehendes Overlay öffnet — einem Button, der ein Menü auslöst, einem Eingabefeld, das in einer Combobox eine Listbox öffnet, oder einem Icon-Button, der einen Dialog anzeigt. Das Attribut ermöglicht es dem Screenreader, Meldungen wie „Filter, Menü-Button“ oder „Suche, verfügt über Popup“ auszugeben, damit Nutzende wissen, dass das Aktivieren des Steuerelements weiteres UI einblendet, anstatt zu navigieren oder ein Formular abzuschicken.

Es sollte weggelassen werden bei Steuerelementen, die lediglich einen Bereich auf derselben Seite umschalten — ein Disclosure-Widget sollte eigenständig aria-expanded verwenden; der eingeblendete Inhalt ist Teil der Seite, kein Popup.

Verhalten

Das Attribut akzeptiert eine feste Menge von Token-Werten:

• "menu" — öffnet ein role="menu" (häufigster Fall bei Menü-Buttons).
• "listbox" — öffnet ein role="listbox", verwendet in benutzerdefinierten Comboboxen.
• "tree" — öffnet ein role="tree".
• "grid" — öffnet ein role="grid" (häufig in Datumsauswahl-Widgets).
• "dialog" — öffnet ein role="dialog" oder role="alertdialog".
• "true" — entspricht aus Kompatibilitätsgründen "menu"; spezifischere Werte sind vorzuziehen.
• "false" — explizit „kein Popup vorhanden“; der Standardwert.

aria-haspopup sollte stets mit aria-expanded="true|false" kombiniert werden, damit AT auch ansagen kann, ob das Popup gerade sichtbar ist. Die beiden Attribute erfüllen unterschiedliche Aufgaben — haspopup teilt mit „es gibt ein Popup“, expanded teilt mit „und es ist derzeit sichtbar“.

Häufige Fehler

• aria-haspopup="true" auf einem Button verwenden, der eine benutzerdefinierte Datumsauswahl öffnet (die eigentlich ein Grid oder Dialog ist) — AT kündigt „Menü-Button“ an, und Nutzende drücken die Pfeil-nach-unten-Taste in der Erwartung von Menüeinträgen.
• aria-expanded vergessen. AT meldet „verfügt über Popup“, gibt jedoch nie den geöffneten oder geschlossenen Zustand an, sodass Nutzende nicht erkennen können, ob ihr Klick eine Auswirkung hatte.
• aria-haspopup auf einem Steuerelement hinzufügen, das tatsächlich kein Popup öffnet. Das täuscht Nutzende, die eine Affordanz hören, jedoch nichts finden.
• aria-haspopup auf einem Link verwenden, der zu einer neuen Seite navigiert. Das ist kein Popup; der Link sollte einfach ein Link bleiben.
• Den Fokus nicht in einen dialog-Popup oder auf den ersten menuitem eines menu zu verschieben. Das Attribut benennt den Popup-Typ, verwaltet jedoch nicht den Fokus.
• aria-haspopup="dialog" setzen, ohne role="dialog" auf dem Popup festzulegen. Die angekündigte Semantik erscheint nie.

Beispiel

<!-- Menü-Button -->
<button
  type="button"
  id="filter-btn"
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="filter-menu"
>
  Filter
</button>
<ul id="filter-menu" role="menu" hidden>
  <li role="menuitem">Alle</li>
  <li role="menuitem">Ungelesen</li>
  <li role="menuitem">Markiert</li>
</ul>