Clarifying the Relationship Between Popovers and Dialogs

The distinction between popovers (using the popover attribute) and dialogs (the <dialog></dialog> element and the dialog accessible role) often causes confusion. Many articles attempt to clarify this, yet the issue persists. This explanation aims to provide a definitive understanding.

Understanding the Relationship: Popovers and Dialogs

Let's move beyond technical implementations and focus on a broader perspective. A popover is content that appears when a user interacts (clicks, hovers, or focuses) on an element. The ARIA aria-haspopup attribute categorizes these popups into roles, including menu, listbox, tree, grid, and dialog. Crucially, a dialog is a type of popover.

Dialog Types

Expanding on the dialog role, we have three main types:

• Modal: Includes an overlay and focus trapping.
• Non-modal: Lacks an overlay and focus trapping.
• Alert Dialog: Alerts screen readers upon appearance; can be modal or non-modal.

This further supports the popover/dialog relationship. While some believe popovers are strictly non-modal, this is inaccurate. The ::backdrop pseudo-element, often present in popovers, suggests popovers can be modal. However, the popover API lacks a showModal() method (present in <dialog></dialog>), making it less suitable for creating fully functional modal dialogs. Building modality requires additional features if only using the popover API.

Therefore, the capability of popovers to be modal reinforces the idea that a dialog is a specific kind of popover.

Accessible Roles for Popovers

Accessibility requires popovers to have a role. Suitable roles include those listed with aria-haspopup: menu, listbox, tree, grid, and dialog. More complex roles like treegrid and alertdialog are also options. tooltip and status are less common but potentially valid choices.

Tooltips: Visual vs. Accessibility

Visually, a tooltip resembles a popover—a small window appearing on hover. Implementing tooltips with the popover API is feasible.

<div popover="" role="tooltip">...</div>

However, accessibility guidelines dictate that tooltips shouldn't contain interactive content. Interactive tooltips are actually dialogs, not tooltips. As Heydon Pickering states, "You’re thinking of dialogs. Use a dialog." This is why aria-haspopup doesn't include tooltip.

The status Role

Tooltips present accessibility challenges due to their hover-only nature. Steve Faulkner's "toggletips" and Heydon Pickering's suggestion of using the status role offer alternatives, utilizing live regions to announce tooltip content to screen readers. While status could be used for a popover, its live region nature distinguishes it from other roles. Therefore, it's omitted from the core popover mental model.

Summary

• Popover: A general term for any on-demand popup.
• Dialog: A specific type of popover creating a new window or card.

This clarifies the compatibility of the popover API with the <dialog></dialog> element:

<div popover="">...</div>
<dialog popover="">...</dialog>

Recommended roles for popovers include: menu, listbox, tree, grid, treegrid, dialog, and alertdialog. status and tooltip are less conventional but possible, though not compatible with aria-haspopup.

Further Reading

• aria-haspopup property (WAI-ARIA Specification, Version 1.2)
• Semantics and the popover attribute: which role to use when? (Hidde de Vries)
• aria-hasPopUp less is more (html5accessibility.com)
• Tooltips & Toggletips (Inclusive Components)
• What’s the Difference Between HTML’s Dialog Element and Popovers? (Chris Coyier)

(Note: Please replace the bracketed links with actual links to the referenced articles and specifications.)

The above is the detailed content of Clarifying the Relationship Between Popovers and Dialogs. For more information, please follow other related articles on the PHP Chinese website!