澄清弹出案与对话之间的关系

> 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中文网其他相关文章！