aria-haspopup

Hvornår bruges den

På ethvert element, der åbner et midlertidigt overlay — en knap, der udløser en menu, et inputfelt, der åbner en listbox i en combobox, eller en ikonknap, der åbner en dialog. Attributten lader skærmlæseren annoncere noget som “Filter, menuknap” eller “Søg, har popup”, så brugeren ved, at aktivering af elementet vil vise mere brugerflade frem for at navigere eller sende en formular.

Undlad den på elementer, der blot viser eller skjuler et afsnit på samme side — et disclosure-element bør bruge aria-expanded alene; det viste indhold er en del af siden, ikke en popup.

Sådan fungerer den

Accepterer et fast sæt tokenværdier:

• "menu" — åbner en role="menu" (det mest almindelige tilfælde for menuknapper).
• "listbox" — åbner en role="listbox", bruges i brugerdefinerede comboboxe.
• "tree" — åbner en role="tree".
• "grid" — åbner en role="grid" (typisk datovælgere).
• "dialog" — åbner en role="dialog" eller role="alertdialog".
• "true" — svarer til "menu" af bagudkompatibilitetshensyn; brug en af de specifikke værdier i stedet.
• "false" — angiver eksplicit “har ingen popup”; standardværdien.

Par aria-haspopup med aria-expanded="true|false", så hjælpeteknologi også kan annoncere, om popuppen aktuelt er synlig. De to attributter gør forskellige ting — haspopup siger “der er en popup”, og expanded siger “og den er aktuelt synlig”.

Hyppige fejl

• Brug af aria-haspopup="true" på en knap, der åbner en brugerdefineret datovælger (som reelt er et grid eller en dialog) — hjælpeteknologi annoncerer “menuknap”, og brugere trykker pil ned i forventning om menupunkter.
• Udeladelse af aria-expanded. Hjælpeteknologi siger “har popup”, men annoncerer aldrig åben/lukket-tilstanden, så brugeren ikke kan vide, om klikket havde nogen effekt.
• Tilføjelse af aria-haspopup på et element, der faktisk ikke åbner en popup. Vildleder brugeren, der hører affordancen og ikke finder noget.
• Brug af aria-haspopup på et link, der navigerer til en ny side. Det er ikke en popup; lad linket forblive et link.
• Glemsel af at flytte fokus ind i en dialog-popup eller ned til det første menuitem i en menu. Attributten navngiver popup-typen, men styrer ikke fokus.
• Angivelse af aria-haspopup="dialog" uden at sætte role="dialog" på selve popuppen. De lovede semantikker optræder aldrig.

Eksempel

<!-- Menuknap -->
<button
  type="button"
  id="filter-btn"
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="filter-menu"
>
  Filtrer
</button>
<ul id="filter-menu" role="menu" hidden>
  <li role="menuitem">Alle</li>
  <li role="menuitem">Ulæste</li>
  <li role="menuitem">Markerede</li>
</ul>