web-dev-qa-db-fra.com

Accessibilité: à quoi peut servir aria-haspopup?

Je l'ai de bonne foi que aria-haspopup convient aux sous-menus (comme un menu contextuel contextuel ou un menu de sous-niveau). Il est utilisé sur jQuery UI Selectmen et également utilisé dans ce excellent exemple.

Ce que je n'ai pas pu savoir, c'est si aria-haspopup est applicable dans les 2 exemples suivants:

  • Popovers d'information tels que Bootstrap's - utilisés pour les informations contextuelles, mais ne contenant aucun lien
  • Fenêtres contextuelles du navigateur - par ex. liens avec target="_blank"

Est aria-haspopup approprié dans ces situations? Sinon, y a-t-il des attributs ARIA qui devraient être utilisés à la place?

javascriptaccessibilitywai-aria
22
francois

Officiellement, il ne doit être utilisé que pour les menus ou sous-menus, à partir de la ARIA spec 1. :

Indique que l'élément a un menu contextuel contextuel ou un menu de sous-niveau.

Le guide de style Whatsock couvre cela sous la section 'modaux':

Cela peut sembler une bonne idée d'aviser les utilisateurs de lecteur d'écran qu'un "Popup" est attaché en ajoutant l'attribut aria-haspopup = "true" à l'élément déclencheur, mais ce n'est pas une bonne idée. ... En bref, n'utilisez aria-haspopup que si vous déclenchez un menu.

Il y a quelques discussions sur l'élargissement du sens dans les futures révisions, mais supposons pour le moment que ce soit pour les menus.

J'ai donné ne réponse sur les info-bulles de Bootstrap qui devrait aider.

Pour les fenêtres de navigateur pop-up, celles-ci sont annoncées par les lecteurs d'écran de toute façon, aucun balisage supplémentaire n'est nécessaire. (NB: Il est utile d'inclure un indicateur visuel d'une nouvelle fenêtre pour les utilisateurs de loupe d'écran.)

23
AlastairC

La spécification WAI-ARIA 1.1 (qui est la version actuelle au moment de la rédaction) étend l'utilisation de aria-haspopup par rapport à la spécification 1.0:

[aria-haspopup] indique la disponibilité et le type d'élément contextuel interactif, tel qu'un menu ou une boîte de dialogue, qui peut être déclenché par un élément.

Un élément popup apparaît généralement comme un bloc de contenu qui se trouve au-dessus d'un autre contenu. Les auteurs [~ # ~] doivent [~ # ~] s'assurer que le rôle de l'élément qui sert de le conteneur du contenu contextuel est menu, listbox, tree, grid ou dialog, et que la valeur de aria-haspopup correspond au rôle du conteneur popup.

Vous devez donc définir la valeur de aria-haspopup à la même valeur que l'attribut role sur l'élément déclenché. S'il est défini sur true, il sera interprété comme menu pour s'aligner sur la spécification 1.0 où aria-haspopup était uniquement destiné aux menus.

Notez cependant ceci à propos des info-bulles (comme Bootstrap popovers):

Un tooltip n'est pas considéré comme une popup dans ce contexte.

Les fenêtres contextuelles du navigateur ne sont pas des éléments HTML sur la page, donc ancrez les éléments avec target="_blank" ne doit pas avoir de aria-haspopup attribut.

7
jeanfredrik