HTML Popover API：top layer表示と閉じる動作
Popover APIはDOM上の位置を維持しながら、非モーダル要素をtop layerに表示します。autoとmanualの閉じ方、dialogとの役割の違い、呼び出し元とアクセシブルな操作を説明します。
発行・訂正窓口：infostoa · 編集基準
この記事の個別の執筆者・専門査読者の情報は提供されていません。
HTML Popover APIはメニューや補足情報などの非モーダルな内容をページ上に表示します。popover属性を持つ要素は表示時にtop layerへ置かれ、通常のstacking contextによる重なり問題を避けつつ、DOM内の元の位置を保ちます。modal dialogのように背景との操作を自動で遮断しないため、両者は同じ用途ではありません。
1. 宣言的なpopoverと呼び出し元
popover属性を付けた要素は初期状態で非表示になり、ボタンのpopovertargetから対象IDに結び付けられます。ブラウザーは呼び出し元との関係を知り、基本の表示操作を提供します。JavaScriptからはshowPopover()、hidePopover()、togglePopover()で状態を変更できます。宣言的制御とスクリプト制御を混ぜるときはアプリケーション状態と実際の表示がずれないよう確認します。
top layerに表示されても要素が複製されたり別のDOM親へ移動したりするわけではありません。ソース順、イベント経路、アクセシビリティ上の関係は引き続き重要です。popover内のフォーカス可能要素をキーボードで操作できるようにし、名前と目的を提示します。視覚的に浮いているだけでaccessible dialogになるわけではありません。
2. autoとmanualの閉じ方
popover=autoはブラウザー管理の閉じる動作を備えます。通常は外側のクリックやEscapeによるlight-dismissに対応し、開いたボタンとの関係も扱います。複数のauto popoverが互いに影響せず常に開いたままとは仮定せず、開く順序や入れ子を考えます。実際の動作は呼び出し方や文書内の別popover状態にも関係します。
popover=manualは自動的なlight-dismissを望まない場合に使えます。外側をクリックしてもブラウザーが閉じないため、ページ側で明示的な終了手段を提供します。通知や常時表示したいパネルに適する場合がありますが、閉じるボタンや必要なEscape操作など予測可能な出口を用意します。autoとmanualは見た目だけでなく状態と操作方針を変えます。
3. Popoverとmodal dialogの使い分け
Popoverは非モーダルなoverlayに向きます。開いている間も利用者はページの他の部分を操作できます。一方modal dialogは操作の流れを一時的に限定し、背景とのやり取りを制限します。小さなメニューや補足情報はpopoverに向く場合がありますが、判断を必須にしたり背景操作を止めたりする流れはdialogの意味と動作を別に検討します。
modal dialog elementとpopoverはいずれもtop layerを使うことがあり、z-indexだけで重なり順を予測できません。両方を使うページでは実際の利用者の流れで、どれが先に開閉すべきか試験してください。popoverがフォーカスを閉じ込めたり背景を操作不可にしたりすると期待せず、役割に必要なキーボード操作とフォーカス返却を設計します。
4. 専門家の視点：状態と入力方法を試験する
WHATWG HTML標準はpopover属性、auto・manual状態、呼び出し元、top layer表示、表示・非表示アルゴリズムを定義します。MDNはマークアップとJavaScriptによる操作を説明し、dialogとの違いを整理します。実装では表示メソッドを呼んだかだけでなく、Escape、外側のクリック、呼び出し元の再操作後に状態が意図どおり変わるかを確認します。
キーボード、ポインター、タッチ、拡大表示で同じ流れを試します。短いメニューやヘルプでlight-dismissが必要ならautoを使い、manualでは明示的な閉じ方を決めます。複雑なメニューのキーボード操作やmodal遮断が自動で備わると仮定しないでください。役割、アクセシブルな名前、フォーカス移動を確認すると、top layerの見た目と操作可能性を区別できます。