ポップオーバーとダイアログの関係を明確にします

ポップオーバー

（属性を使用）とダイアログpopover（要素とアクセス可能な役割）の区別は、しばしば混乱を引き起こします。 多くの記事はこれを明確にしようとしていますが、問題は続いています。 この説明は、決定的な理解を提供することを目的としています 関係を理解する：ポップオーバーとダイアログ<dialog></dialog> dialog技術的な実装を超えて、より広い視点に焦点を当てましょう。 ポップオーバーは、ユーザーが要素に対話する（クリック、ホーバー、または焦点を合わせる）ときに表示されるコンテンツです。 Aria

属性は、これらのポップアップを

、

、

、aria-haspopup、menuなどの役割に分類します。 重要なことに、listboxダイアログはtree gridダイアログタイプdialog 役割を拡大すると、3つの主なタイプがあります。

モーダル：

オーバーレイとフォーカストラップが含まれています。

dialog非モーダル：

オーバーレイとフォーカストラッピングがありません。

• アラートダイアログ：外観時にスクリーンリーダーに警告します。モーダルまたは非モーダルにすることができます
• これは、ポップオーバー/ダイアログの関係をさらにサポートします。ポップオーバーは厳密に非モーダルであると信じている人もいますが、これは不正確です。 多くの場合、ポップオーバーに存在するpseudo-elementは、ポップオーバーがモーダルになる可能性があることを示唆しています。 ただし、APIにはA メソッドがありません（
• に存在する）ため、完全に機能するモーダルダイアログの作成には適していません。 モダリティを構築するには、APIを使用する場合にのみ追加機能が必要です。 したがって、ポップオーバーの能力はモーダルになる能力は、ダイアログが特定の種類のポップオーバーであるという考えを強化します
。

ポップオーバーのアクセス可能な役割

::backdropアクセシビリティには、ポップオーバーに役割が必要です。 適切な役割には、：、popover、showModal()、<dialog></dialog>、およびpopoverにリストされている役割が含まれます。

や

などのより複雑な役割もオプションです。 およびはあまり一般的ではありませんが、潜在的に有効な選択肢です。

ツールチップ：ビジュアルとアクセシビリティ

視覚的には、ツールチップはポップオーバーに似ています。ホバーに表示される小さなウィンドウです。

APIを使用してツールチップを実装することは実行可能です。aria-haspopup

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

ただし、アクセシビリティガイドラインでは、ツールチップがインタラクティブなコンテンツを含めるべきではないことが規定されています。 インタラクティブなツールチップは、実際にはツールチップではなくダイアログです。 Heydon Pickeringが述べているように、「あなたはダイアログを考えています。ダイアログを使用してください。」 これが、

がaria-haspopup。tooltipを含めない理由です

役割status

ツールチップは、ホバーのみの性質のためにアクセシビリティの課題を提示します。 Steve Faulknerの「Toggletips」とHeydon Pickeringの

ロールは、ライブ地域を利用してツールチップコンテンツを読者に発表します。 ポップオーバーにはstatusを使用できますが、そのライブ地域の性質はそれを他の役割と区別します。 したがって、コアポップオーバーメンタルモデルから省略されています status要約

ポップオーバー：
• オンデマンドポップアップの一般的な用語。
ダイアログ：
• 新しいウィンドウまたはカードを作成する特定のタイプのポップオーバー。 これは、
apiと

要素との互換性を明確にします：

popover <dialog></dialog>ポップオーバーの推奨役割には、

、

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

、

、menu、listbox、tree、gridが含まれます。 treegridおよびdialogは従来性が低いですが、alertdialog。statusと互換性がありません tooltipさらに読み取りaria-haspopup

aria-haspopupプロパティ（WAI-ARIA仕様、バージョン1.2）

• セマンティクスとポップオーバー属性：どの役割をいつ使用するか？ （hidde de vries）
• aria-haspopupはより少ない（html5accessibility.com）
• ツールチップ＆トグリット（包括的コンポーネント）
• HTMLのダイアログ要素とポップオーバーの違いは何ですか？ （Chris Coyier）
（注：参照された記事と仕様への実際のリンクにブラケットリンクを置き換えてください。）

以上がポップオーバーとダイアログの関係を明確にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。