La distinction entre popovers (en utilisant l'attribut popover) et Dialogs (l'élément <dialog></dialog> et le rôle accessible dialog) provoque souvent une confusion. De nombreux articles tentent de clarifier cela, mais le problème persiste. Cette explication vise à fournir une compréhension définitive.
allons au-delà des implémentations techniques et concentrons-nous sur une perspective plus large. Un popover est un contenu qui apparaît lorsqu'un utilisateur interagit (clique, plane ou se concentre) sur un élément. L'attribut Aria aria-haspopup classe ces popups en rôles, y compris menu, listbox, tree, grid et dialog. Surtout, une boîte de dialogue est un type de popover .
développant le rôle dialog, nous avons trois types principaux:
Cela soutient en outre la relation popover / dialogue. Bien que certains pensent que les popovers sont strictement non modales, cela est inexact. Le pseudo-élément ::backdrop, souvent présent dans les popovers, suggère que les popovers peuvent être modales . Cependant, l'API popover manque une méthode showModal() (présente dans <dialog></dialog>), ce qui le rend moins adapté pour créer des boîtes de dialogue modales entièrement fonctionnelles. La modalité du bâtiment nécessite des fonctionnalités supplémentaires si vous n'utilisez que l'API popover
Par conséquent, la capacité des popovers à être modale renforce l'idée que une boîte de dialogue est un type spécifique de popover .
L'accessibilité nécessite que les popovers aient un rôle. Les rôles appropriés incluent ceux répertoriés avec aria-haspopup: menu, listbox, tree, grid et dialog. Des rôles plus complexes comme treegrid et alertdialog sont également des options. tooltip et status sont des choix moins courants mais potentiellement valides.
Visuellement, une info-bulle ressemble à un popover - une petite fenêtre apparaissant sur survol. Implémentation de tools avec l'API popover est possible.
<div popover="" role="tooltip">...</div>
Cependant, les directives d'accessibilité dictent que les info-bulleurs ne doivent pas contenir de contenu interactif. Les infractions interactives sont en fait des boîtes de dialogue, pas des info-bulleurs. Comme le dit Heydon Pickering, "vous pensez à des dialogues. Utilisez une boîte de dialogue." C'est pourquoi aria-haspopup n'inclut pas tooltip.
status rôle Les info-bulleurs présentent des défis d'accessibilité en raison de leur nature en volants uniquement. Les "toggletips" de Steve Faulkner et la suggestion de Heydon Pickering d'utiliser les alternatives d'offre de rôle status, en utilisant des régions en direct pour annoncer le contenu info-bulle pour filtrer les lecteurs. Alors que status pourrait être utilisé pour un popover, sa nature de région vivante la distingue des autres rôles. Par conséquent, il est omis du modèle mental de la popover de base.
Cela clarifie la compatibilité de l'API popover avec l'élément <dialog></dialog>:
<div popover="">...</div> <dialog popover="">...</dialog>
Les rôles recommandés pour les popovers comprennent: menu, listbox, tree, grid, treegrid, dialog et alertdialog. status et tooltip sont moins conventionnels mais possibles, mais pas compatibles avec aria-haspopup.
(Remarque: veuillez remplacer les liens entre crochets par des liens réels vers les articles et spécifications référencés.)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Qu'est-ce qu'un servomoteur
Introduction aux méthodes de diagnostic SEO
Que comprend le stockage par cryptage des données ?
Quelles sont les principales différences entre Linux et Windows
Une mémoire capable d'échanger des informations directement avec le CPU est une
Comment ouvrir le fichier mds
Changer la couleur d'arrière-plan du mot en blanc
Quels sont les outils de développement ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
