aria-haspopup

Quando usarlo

Su qualsiasi controllo che apre un overlay temporaneo — un pulsante che attiva un menu, un campo di testo che apre una listbox in una combobox, un pulsante icona che fa comparire un dialog. L’attributo consente allo screen reader di annunciare qualcosa come «Filtra, pulsante menu» o «Cerca, ha popup», in modo che l’utente sappia che premendo il controllo comparirà ulteriore interfaccia, anziché navigare o inviare un modulo.

Si omette per i controlli che attivano/disattivano semplicemente una sezione della stessa pagina: un widget di tipo disclosure dovrebbe usare aria-expanded da solo; il contenuto rivelato fa parte della pagina, non è un popup.

Come funziona

Accetta un insieme fisso di valori token:

• "menu" — apre un role="menu" (il caso più comune per i pulsanti menu).
• "listbox" — apre un role="listbox", usato nelle combobox personalizzate.
• "tree" — apre un role="tree".
• "grid" — apre un role="grid" (spesso usato nei selettori di data).
• "dialog" — apre un role="dialog" o role="alertdialog".
• "true" — equivalente a "menu" per compatibilità con versioni precedenti; si preferisce uno dei valori specifici.
• "false" — indica esplicitamente che il controllo non ha un popup; è il valore predefinito.

Si abbina aria-haspopup ad aria-expanded="true|false" affinché la tecnologia assistiva possa annunciare anche se il popup è attualmente aperto. I due attributi svolgono ruoli distinti: haspopup comunica «esiste un popup», mentre expanded comunica «ed è attualmente visibile».

Errori frequenti

• Usare aria-haspopup="true" su un pulsante che apre un selettore di data personalizzato (che è in realtà un grid o un dialog): la tecnologia assistiva annuncia «pulsante menu» e l’utente preme la freccia verso il basso aspettandosi delle voci di menu.
• Dimenticare aria-expanded. La tecnologia assistiva segnala «ha popup» ma non annuncia mai lo stato aperto/chiuso, lasciando l’utente nell’impossibilità di capire se il clic ha avuto effetto.
• Aggiungere aria-haspopup a un controllo che non apre effettivamente un popup. Fuorvia l’utente, che percepisce l’affordance e non trova nulla.
• Usare aria-haspopup su un link che porta a una nuova pagina. Non si tratta di un popup: è sufficiente lasciare il link come tale.
• Dimenticare di spostare il focus in un popup dialog o sul primo menuitem di un menu. L’attributo indica il tipo di popup, ma non gestisce il focus.
• Impostare aria-haspopup="dialog" senza applicare role="dialog" al popup. La semantica promessa non si manifesta mai.

Esempio

<!-- Pulsante menu -->
<button
  type="button"
  id="filter-btn"
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="filter-menu"
>
  Filtra
</button>
<ul id="filter-menu" role="menu" hidden>
  <li role="menuitem">Tutti</li>
  <li role="menuitem">Non letti</li>
  <li role="menuitem">Con contrassegno</li>
</ul>