澄清彈出案與對話之間的關係

> popovers （使用>屬性）和 dialogs popover（>元素和可訪問的角色）之間的區別通常會引起混亂。 許多文章試圖澄清這一點，但問題仍然存在。 這種解釋旨在提供明確的理解。 <dialog></dialog>了解關係：彈出和對話dialog

>讓我們超越技術實施，專注於更廣泛的觀點。 當用戶在元素上進行交互（單擊，徘徊或聚焦）時出現popover的內容。 ARIA

屬性將這些彈出窗口分為角色，包括，，

，

，aria-haspopup和。 至關重要的是，menu對話框是popoverlistbox>的tree grid對話框類型dialog 擴展>角色，我們有三種主要類型：>

模態：

包括一個覆蓋和焦點捕獲。

>

dialognon-modal：

缺少覆蓋層和焦點捕獲。

• >警報對話框：警報屏幕讀取器外觀；可以是模態或非模式。
• 這進一步支持彈出/對話關係。雖然有些人認為彈出案是嚴格的非模式，但這是不准確的。 通常存在於彈出窗口中的pseudo-元素可以是模態
。 但是，
• api缺乏的方法（中的），因此不適合創建功能齊全的模態對話框。 建築方式需要其他功能，只要僅使用 api。
>

因此，彈出式的功能是模態的，強化了一個對話框是一種特定類型的popover

。 ::backdrop彈出式的可訪問角色 >可訪問性需要彈出式角色。 合適的角色包括popover列出的角色：showModal()，<dialog></dialog>，popover，

和

。 更複雜的角色（例如>和）也是選項。

和

>不太常見，但潛在的有效選擇。

工具提示：Visual vs.可訪問性

> 從視覺上講，工具提示類似於彈出窗口 - 懸停在徘徊的小窗口中。 用aria-haspopupapi實現工具提示是可行的。 menu>

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

但是，可訪問性指南規定工具提示不應包含交互式內容。 交互式工具提示實際上是對話框，而不是工具提示。 正如海頓·皮克林（Heydon Pickering）所說：“您正在考慮對話。使用對話框。” 這就是為什麼

不包括aria-haspopup。 tooltip>

角色status

>工具提示由於其懸停性而提出的可訪問性挑戰。 史蒂夫·福克納（Steve Faulkner）的“ toggletips”和Heydon Pickering使用

角色的建議提供替代方案，利用活區域宣布工具提示內容來篩選讀者。 儘管status可以用於彈出窗口，但其實時性質的性質將其與其他角色區分開。 因此，它是從核心彈出式心理模型中省略的。 status

摘要

• popover：>任何按需彈出窗口的一般術語。
>
• 對話框：>一種特定類型的彈出類型，創建新窗口或卡片。

這闡明了

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） 語義和popover屬性：哪個角色何時使用？ （hidde de vries）
• aria-haspopup更少（html5accessibility.com）
• > tooltips＆toggletips（包含組件）
• > HTML的對話框元素和彈出案之間有什麼區別？ （Chris Coyier）
• >
（注意：請用指向參考文章和規格的實際鏈接替換包圍的鏈接。）

以上是澄清彈出案與對話之間的關係的詳細內容。更多資訊請關注PHP中文網其他相關文章！