Clarifying the Relationship Between Popovers and Dialogs

The distinction between Popovers (i.e., the popover attribute) and Dialogs (i.e., each the <dialog> factor and the dialog accessible position) is extremely complicated — a lot that many articles (like this, this, and this) have tried to shed some mild on the problem.

Should you’re nonetheless feeling confused, I hope this one clears up that confusion as soon as and for all.

Distinguishing Popovers From Dialogs

Let’s pull again on the technical implementations and contemplate the better image that makes extra sense and places every little thing into perspective.

The rationale for this categorization comes from a few noteworthy factors.

First, we all know {that a} popover is content material that “pops” up when a person clicks a button (or hovers over it, or focuses on it). Within the ARIA world, there’s a helpful attribute referred to as aria-haspopup that categorizes such popups into 5 completely different roles:

menu

listbox

tree

grid

dialog

Strictly talking, there’s a sixth worth, true, that evaluates to menu. I didn’t embrace it above because it’s successfully simply menu.

By advantage of dialog being on this checklist, we already know that dialog is a kind of popover. However there’s extra proof behind this too.

The Three Forms of Dialogues

Since we’re already speaking in regards to the dialog position, let’s additional broaden that into its subcategories:

Dialogs may be categorized into three important sorts:

Modal: A dialog with an overlay and focus trapping

Non-Modal: A dialog with neither an overlay nor focus trapping

Alert Dialog: A dialog that alerts display screen readers when proven. It may be both modal or non-modal.

This brings us to a different purpose why a dialog is taken into account a popover.

Some individuals could say that popovers are strictly non-modal, however this appears to be a serious misunderstanding — as a result of popovers have a ::backdrop pseudo-element on the highest layer. The presence of ::backdrop signifies that popovers are modal. Quoting the CSS-Tips almanac:

The ::backdrop CSS pseudo-element creates a backdrop that covers your entire viewport and is rendered instantly beneath a <dialog>, a component with the popup attribute, or any factor that enters fullscreen mode utilizing the Fullscreen API.

That mentioned, I don’t advocate utilizing the Popover API for modality as a result of it doesn’t have a showModal() technique (that <dialog> has) that creates inertness, focus trapping, and different needed options to make it an actual modal. Should you solely use the Popover API, you’ll have to construct these options from scratch.

So, the truth that popovers may be modal signifies that a dialog is solely one type of popover.

A Popover Wants an Accessible Function

Popovers want a job to be accessible. Hidde has a nice article on deciding on the precise position, however I’m going to supply some factors on this article as effectively.

To begin, you should utilize one of many aria-haspopup roles talked about above:

menu

listbox

tree

grid

dialog

You can additionally use one of many extra complicated roles like:

treegrid

alertdialog

There are two extra roles which might be barely extra contentious however could do exactly high-quality.

tooltip

standing

To grasp why tooltip and standing may very well be legitimate popover roles, we have to take a detour into the world of tooltips.

A Notice on Tooltips

From a visible perspective, a tooltip is a popover as a result of it incorporates a tiny window that pops up when the tooltip is displayed.

I included tooltip within the psychological mannequin as a result of it’s affordable to implement tooltip with the Popover API.

<div popver position=”tooltip”>…</div>

The tooltip position doesn’t do a lot in display screen readers right now so you have to use aria-describedby to create accessible tooltips. However it’s nonetheless essential as a result of it might lengthen accessibility assist for some software program.

However, from an accessibility standpoint, tooltips should not popovers. Within the accessibility world, tooltips should not include interactive content material. In the event that they include interactive content material, you’re not a tooltip, however a dialog.

You’re pondering of dialogs. Use a dialog.

Heydon Pickering, “Your Tooltips are Bogus”

That is additionally why aria-haspopup doesn’t embrace tooltip —aria-haspopup is meant to indicate interactive content material however a tooltip should not include interactive content material.

With that, let’s transfer on to standing which is an attention-grabbing position that requires some clarification.

Why standing?

Tooltips have a fairly complicated historical past on the planet of accessible interfaces so there’s a variety of dialogue and competition over it.

To maintain issues brief (once more), there’s an accessibility problem with tooltips since tooltips ought to solely present on hover. This implies display screen readers and cell phone customers received’t be capable of see these tooltips (since they’ll’t hover on the interface).

Steve Faulkner created an alternate — toggletips — to fill the hole. In doing so, he defined that toggletip content material have to be introduced by display screen readers by means of reside areas.

When initially displayed content material is introduced by (most) display screen readers that assist aria-live

Heydon Pickering later added that standing can be utilized in his article on toggletips.

We will provide an empty reside area, and populate it with the toggletip “bubble” when it’s invoked. This can each make the bubble seem visually and trigger the reside area to announce the tooltip’s data.

<!– Code instance by Heydon –>
<span class=”tooltip-container”>
<button kind=”button” aria-label=”extra data” data-toggletip-content=”This clarifies no matter wants clarifying”>i</button>
<span position=”standing”>
<span class=”toggletip-bubble”>This clarifies no matter wants clarifying</span>
</span>
</span>

Because of this standing is usually a potential position for a popover, however you could use discretion when creating it.

That mentioned, I’ve chosen to not embrace the standing position within the Popover psychological mannequin as a result of standing is a reside area position and therefore completely different from the remaining.

In Abstract

Right here’s a fast abstract of the psychological mannequin:

Popover is an umbrella time period for any type of on-demand popup.

Dialog is one kind of popover — a sort that creates a brand new window (or card) to include some content material.

While you internalize this, it’s not laborious to see why the Popover API can be utilized with the dialog factor.

<!– Makes use of the popover API. Function must be decided manually –>
<div popover>…</div>

<!– Dialog with the popover API. Function is dialog –>
<dialog popover>…</dialog>

<!– Dialog that does not use the popover API. Function is dialog –>
<dialog>…</dialog>

When selecting a job to your popover, you should utilize one in every of these roles safely.

menu

listbox

tree

grid

treegrid

dialog

alertdialog

The additional benefit is most of those roles work along with aria-haspopup which gained first rate assist in display screen readers final yr.

After all, there are a pair extra you should utilize like standing and tooltip, however you received’t be capable of use them along with aria-haspopup.

Additional Studying

aria-haspopup property (WAI-ARIA Specification, Model 1.2)

Semantics and the popover attribute: which position to make use of when? (Hidde de Vries)

aria-hasPopUp much less is extra (html5accessibility.com)

Tooltips & Toggletips (Inclusive Elements)

What’s the Distinction Between HTML’s Dialog Component and Popovers? (Chris Coyier)

Clarifying the Relationship Between Popovers and Dialogs initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You need to get the e-newsletter.