aria-haspopup

När ska det användas

På varje kontroll som öppnar ett tillfälligt överlager — en knapp som utlöser en meny, ett inmatningsfält som öppnar en listbox i en combobox, en ikonknapp som visar en dialog. Attributet låter skärmläsaren meddela något i stil med “Filter, menyknapp” eller “Sök, har popup”, så att användaren vet att kontrollen visar mer gränssnitt i stället för att navigera eller skicka ett formulär.

Utelämna attributet på kontroller som bara växlar en sektion på samma sida — ett disclosure-widget ska använda aria-expanded på egen hand; det synliggjorda innehållet är en del av sidan, inte ett popup-element.

Hur det fungerar

Accepterar en fast uppsättning tokenvärden:

• "menu" — öppnar ett role="menu" (det vanligaste fallet för menyknappar).
• "listbox" — öppnar ett role="listbox", används i anpassade comboboxar.
• "tree" — öppnar ett role="tree".
• "grid" — öppnar ett role="grid" (datumväljare ofta).
• "dialog" — öppnar ett role="dialog" eller role="alertdialog".
• "true" — motsvarar "menu" av bakåtkompatibilitetsskäl; föredra ett av de specifika värdena.
• "false" — explicit “har inget popup-element”; standardvärdet.

Kombinera aria-haspopup med aria-expanded="true|false" så att AT också kan meddela om popupen är öppen. De två attributen fyller olika funktioner — haspopup säger “det finns ett popup-element”, expanded säger “och det är för närvarande synligt”.

Vanliga fel

• Att använda aria-haspopup="true" på en knapp som öppnar en anpassad datumväljare (som egentligen är ett grid eller en dialog) — AT meddelar “menyknapp” och användare trycker nedåtpilen i väntan på menyposter.
• Att glömma aria-expanded. AT säger “har popup” men meddelar aldrig det öppna/stängda tillståndet, så användare kan inte avgöra om deras klick hade någon effekt.
• Att lägga till aria-haspopup på en kontroll som inte faktiskt öppnar ett popup-element. Vilseleder användaren, som hör möjligheten och inte hittar något.
• Att använda aria-haspopup på en länk som navigerar till en ny sida. Det är inte ett popup-element; låt länken vara en länk.
• Att glömma att flytta fokus in i ett dialog-popup eller ned till den första menuitem i en menu. Attributet namnger popup-typen men hanterar inte fokus.
• Att sätta aria-haspopup="dialog" utan att sätta role="dialog" på popup-elementet. De utlovade semantiken uteblir.

Exempel

<!-- Menu 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">All</li>
  <li role="menuitem">Unread</li>
  <li role="menuitem">Flagged</li>
</ul>