aria-haspopup

Wanneer te gebruiken

Op elk element dat een tijdelijke overlay opent — een knop die een menu activeert, een invoerveld dat een listbox in een combobox opent, een pictogramknop die een dialoogvenster toont. Het attribuut zorgt ervoor dat de schermlezer iets aankondigt als “Filter, menuknop” of “Zoeken, heeft popup”, zodat de gebruiker weet dat activering meer interface-elementen toont in plaats van navigeert of verzendt.

Gebruik het attribuut niet voor elementen die alleen een gedeelte van dezelfde pagina omschakelen — een disclosure-widget gebruikt aria-expanded op zichzelf; de vrijgegeven inhoud maakt deel uit van de pagina, geen popup.

Gedrag

Accepteert een vaste set tokenwaarden:

• "menu" — opent een role="menu" (de meest voorkomende toepassing bij menuknopen).
• "listbox" — opent een role="listbox", gebruikt in aangepaste comboboxen.
• "tree" — opent een role="tree".
• "grid" — opent een role="grid" (datumkiezers vaak).
• "dialog" — opent een role="dialog" of role="alertdialog".
• "true" — equivalent aan "menu" vanwege historische redenen; gebruik bij voorkeur een van de specifieke waarden.
• "false" — expliciet “heeft geen popup”; de standaardwaarde.

Combineer aria-haspopup met aria-expanded="true|false" zodat hulptechnologie ook kan aankondigen of de popup momenteel open is. De twee attributen vervullen verschillende functies — haspopup geeft aan “er is een popup”, expanded geeft aan “en die is momenteel zichtbaar”.

Veelvoorkomende fouten

• aria-haspopup="true" gebruiken op een knop die een aangepaste datumkiezer opent (wat eigenlijk een grid of dialoogvenster is) — hulptechnologie kondigt “menuknop” aan en gebruikers drukken op de pijl-omlaag en verwachten menuitems.
• aria-expanded vergeten. Hulptechnologie zegt “heeft popup” maar kondigt de open/gesloten-toestand nooit aan, waardoor gebruikers niet weten of hun klik effect heeft gehad.
• aria-haspopup toevoegen aan een element dat helemaal geen popup opent. Dit misleidt de gebruiker, die de affordance hoort maar niets vindt.
• aria-haspopup gebruiken op een koppeling die naar een nieuwe pagina navigeert. Dat is geen popup; laat de koppeling gewoon een koppeling zijn.
• Vergeten om focus te verplaatsen naar een dialog-popup of naar het eerste menuitem van een menu. Het attribuut benoemt het popuptype, maar beheert geen focus.
• aria-haspopup="dialog" instellen maar nalaten role="dialog" op de popup te zetten. De beloofde semantiek verschijnt nooit.

Voorbeeld

<!-- Menuknop -->
<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">Ongelezen</li>
  <li role="menuitem">Gemarkeerd</li>
</ul>