aria-haspopup

Quand l’utiliser

Sur tout contrôle qui ouvre une superposition temporaire — un bouton qui déclenche un menu, un champ de saisie qui ouvre une listbox dans une combobox, un bouton icône qui affiche une boîte de dialogue. L’attribut permet au lecteur d’écran d’annoncer par exemple « Filtrer, bouton menu » ou « Rechercher, a une fenêtre surgissante », afin que l’utilisateur sache qu’appuyer sur le contrôle révélera davantage d’interface plutôt que de naviguer ou de soumettre.

Ne l’utilisez pas sur des contrôles qui se contentent de basculer une section de la même page — un widget de divulgation doit utiliser aria-expanded seul ; le contenu révélé fait partie de la page, pas d’une fenêtre surgissante.

Comportement

Accepte un ensemble fixe de valeurs symboliques :

• "menu" — ouvre un élément avec role="menu" (le cas le plus courant pour les boutons de menu).
• "listbox" — ouvre un élément avec role="listbox", utilisé dans les combobox personnalisées.
• "tree" — ouvre un élément avec role="tree".
• "grid" — ouvre un élément avec role="grid" (souvent pour les sélecteurs de date).
• "dialog" — ouvre un élément avec role="dialog" ou role="alertdialog".
• "true" — équivalent à "menu" pour des raisons de compatibilité ascendante ; préférez l’une des valeurs spécifiques.
• "false" — indique explicitement l’absence de fenêtre surgissante ; valeur par défaut.

Associez aria-haspopup à aria-expanded="true|false" afin que la technologie d’assistance puisse également annoncer si la fenêtre surgissante est actuellement ouverte. Les deux attributs remplissent des rôles différents — haspopup indique « il y a une fenêtre surgissante », expanded indique « et elle est actuellement visible ».

Erreurs fréquentes

• Utiliser aria-haspopup="true" sur un bouton qui ouvre un sélecteur de date personnalisé (qui est en réalité une grille ou une boîte de dialogue) — la technologie d’assistance annonce « bouton menu » et les utilisateurs appuient sur la flèche vers le bas en s’attendant à des éléments de menu.
• Oublier aria-expanded. La technologie d’assistance annonce « a une fenêtre surgissante » mais n’annonce jamais l’état ouvert/fermé, si bien que les utilisateurs ne peuvent pas savoir si leur clic a eu un effet.
• Ajouter aria-haspopup à un contrôle qui n’ouvre pas réellement de fenêtre surgissante. Cela induit l’utilisateur en erreur, qui entend la fonctionnalité annoncée sans rien trouver.
• Utiliser aria-haspopup sur un lien qui navigue vers une nouvelle page. Ce n’est pas une fenêtre surgissante ; laissez simplement le lien être un lien.
• Oublier de déplacer le focus dans une fenêtre surgissante dialog ou vers le premier menuitem d’un menu. L’attribut nomme le type de fenêtre surgissante, mais ne gère pas le focus.
• Définir aria-haspopup="dialog" sans définir role="dialog" sur la fenêtre surgissante. La sémantique promise n’apparaît jamais.

Exemple

<!-- Bouton menu -->
<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">Tous</li>
  <li role="menuitem">Non lus</li>
  <li role="menuitem">Marqués</li>
</ul>