Klärung der Beziehung zwischen Popovers und Dialogen

Die Unterscheidung zwischen popovers (mit dem Dialoga popover Attribut ) und <dialog></dialog> (das dialog -Element und die zugängliche Rolle

zugänglich) verursacht häufig Verwirrung. Viele Artikel versuchen, dies zu klären, doch das Problem bleibt bestehen. Diese Erklärung zielt darauf ab, ein endgültiges Verständnis zu vermitteln.

Verständnis der Beziehung: Popovers und Dialoge

aria-haspopup Lassen Sie uns über technische Implementierungen hinausgehen und uns auf eine breitere Perspektive konzentrieren. Ein Popover ist der Inhalt, der angezeigt wird, wenn ein Benutzer auf ein Element interagiert (Klicks, Schwebevorstände oder Fokussierungen). Das ARIA menu -Merkmal kategorisiert diese Popups in Rollen, einschließlich listbox, tree, grid, dialog und . Entscheid Dialogetypen Die Ausdehnung der Rolle

haben drei Haupttypen:

dialog Modal:

Enthält ein Overlay- und Fokus -Fallen.

• Nichtmodal: fehlt ein Overlay- und Fokus-Fangen.
• Warndialog: Warnungen nach Bildschirmlesern nach Aussehen; kann modal oder nicht modal sein.
• Dies unterstützt die Popover-/Dialogbeziehung weiter. Während einige glauben, dass Popovers ausschließlich nicht modal sind, ist dies ungenau. Das Pseudoelement, das häufig in Popovers vorhanden ist, schlägt vor, dass
Popovers modal sein kann

. In der

-API fehlt jedoch eine ::backdrop -Methode (in vorhanden), sodass sie weniger geeignet ist, voll funktionsfähige modale Dialoge zu erstellen. Die Modalität des Aufbaus erfordert zusätzliche Funktionen, wenn nur die api verwendet wird. popover showModal() Daher verstärkt die Fähigkeit von Popovers, Modal zu sein <dialog></dialog> zugängliche Rollen für Popovers popover Die Zugänglichkeit erfordert, dass Popovers eine Rolle spielen. Geeignete Rollen enthalten diejenigen, die mit

:

, , ,

und

aufgeführt sind. Komplexere Rollen wie

und

sind ebenfalls Optionen. aria-haspopup und menu sind seltener, aber potenziell gültige Entscheidungen. listbox tree Tooltips: Visual vs. Barrierefreiheit grid dialog visuell ähnelt ein Tooltip einem Popover - ein kleines Fenster, das auf Schwebeplätzen erscheint. Das Implementieren von Tooltips mit der treegrid -API ist machbar. alertdialog

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

Die Richtlinien für die Barrierefreiheit bestimmen jedoch, dass Tooltips keinen interaktiven Inhalt enthalten sollten. Interaktive Tooltips sind tatsächlich Dialoge, keine Tooltips. Wie Heydon Pickering sagt: "Sie denken an Dialoge. Verwenden Sie einen Dialog." Deshalb enthält aria-haspopup tooltip.

nicht

die status Rolle

Tooltips stellen aufgrund ihrer nur schwebenden Naturherausforderungen die Herausforderungen der Zugänglichkeit vor. Steve Faulkners "Toggletips" und Heydon Pickerings Vorschlag, die status -Rolle zu verwenden, bieten Alternativen und verwenden Live -Regionen, um Tooltip -Inhalte für Bildschirmleser anzukündigen. Während status für einen Popover verwendet werden könnte, unterscheidet die Natur der lebenden Region sie von anderen Rollen. Daher wird es aus dem mentalen Popover -Kernmodell ausgelassen.

Zusammenfassung

• Popover: Ein allgemeiner Begriff für jedes On-Demand-Popup.
• Dialog: Ein bestimmter Typ von Popover erstellen ein neues Fenster oder eine neue Karte.

Dies verdeutlicht die Kompatibilität der popover API mit dem <dialog></dialog> Element:

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

empfohlene Rollen für Popovers umfassen: menu, listbox, tree, grid, treegrid, dialog und alertdialog. status und tooltip sind weniger konventionell, aber möglich, wenn auch nicht mit aria-haspopup.

kompatibel

Weiteres Lesen

• aria-haspopup-Eigenschaft (WAI-ARIA-Spezifikation, Version 1.2)
• Semantik und das Popover -Attribut: Welche Rolle ist zu verwenden, wann? (Hidde de vries)
• aria-haspopup weniger ist mehr (html5Accessibility.com)
• tooltips & Toggletips (inklusive Komponenten)
• Was ist der Unterschied zwischen dem Dialogelement von HTML und Popovers? (Chris Coyier)

(Hinweis: Bitte ersetzen Sie die Klammern Links durch tatsächliche Links zu den referenzierten Artikeln und Spezifikationen.)

Das obige ist der detaillierte Inhalt vonKlärung der Beziehung zwischen Popovers und Dialogen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!