Clarifier la relation entre les popovers et les dialogues

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.

Comprendre la relation: popovers et dialogues

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 .

Types de dialogue

développant le rôle dialog, nous avons trois types principaux:

• MODAL: comprend une superposition et un piégeage de mise au point.
• Non-modal: manque de superposition et de piégeage de focus.
• Boîte de dialogue d'alerte: Alerte les lecteurs d'écran lors de l'apparence; peut être modal ou non modal.

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 .

Rôles accessibles pour les popovers

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.

Infiltriers: visuel vs accessibilité

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.

le 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.

Résumé

• popover: un terme général pour toute popup à la demande.
• Boîte de dialogue: Un type spécifique de popover créant une nouvelle fenêtre ou carte.

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.

lecture plus approfondie

• Aria-Haspopup Property (Wai-Aria Specification, version 1.2)
• sémantique et attribut popover: quel rôle utiliser quand? (Hidde de Vries)
• aria-haspopup moins est plus (html5accessignebitability.com)
• Info-toolsts & toggletips (composants inclusifs)
• Quelle est la différence entre l'élément de dialogue de HTML et les popovers? (Chris Coyier)

(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!