时间戳

首页 > 解决方案 > NVDA 未在 Microsoft Edge 中具有角色“对话框”的 div 上读取 aria-label

html - NVDA 未在 Microsoft Edge 中具有角色“对话框”的 div 上读取 aria-label

问题描述

在我们的网站中，有一个 div 元素具有“对话”的作用和一个 aria-label 属性。

它适用于以下组合：

Voice Over + Google Chrome / Mozilla Firefox / Safari
NVDA + Google Chrome / Mozilla Firefox / Internet Explorer

但是，当我们使用时，它会被完全忽略：

NVDA + Microsoft Edge(*)

(*) 它实际上适用于旧版本的 Edge (38)，但不适用于最新版本：42。

这是元素：

<div role="dialog" aria-label="name">
 <a title="Hide Dialog" href="#" id="eg"></a> 
</div>

在所有成功的情况下（例如：NVDA + Chrome），它都显示为"name dialog"，然后"hide dialog link"。

在 NVDA + Edge (42) 中：

"Hide dialog link, hide dialog".

在 NVDA + Edge (38) 中： "Clickable link hide dialog"然后"name dialog"

有任何想法吗？

标签： htmlaccessibilitymicrosoft-edgewai-arianvda

解决方案

你用 JAWS 测试过吗？正如Scott O'Hara在 Paciello Group 网站上的博客role="dialog"中所解释的，Internet Explorer 遇到了一些问题。阅读全文，但特别要查找名为“IE11 需要模式对话框的第一个元素作为其标题”的部分。

IE11 需要模态对话框的第一个元素作为其标题

模态对话框的第一个元素应该是它的标题（它提供了它的可访问名称）。此要求是专门补偿 Internet Explorer 11 + JAWS。通过这种配对，将焦点设置到对话元素本身将宣布对话的可访问名称、对话角色，然后 JAWS 将重新宣布对话的可访问名称以及对话的第一个子元素的角色。

例如，如果对话框的标题提供了对话框的可访问名称，那么 JAWS + IE11 将宣布“标题文本，对话框。标题文本，标题级别#”。但是，如果第一个子元素是另一个与对话框的可访问名称不匹配的元素，例如带有文本“关闭”的按钮，它将被宣布为：“标题文本，对话框。标题文本，按钮”</p>

现在，您询问的是 Edge 而不是 IE，但您也没有提及使用 JAWS 进行测试。可能 Edge 上的 NVDA可能与 IE 上的 JAWS 存在相同的问题，但这只是在黑暗中进行检查。你描述问题的方式，听起来和 IE 是一样的问题，你必须编写代码（也就是说，它是 IE 和/或 Edge 中的错误，而不是代码中的错误，但你仍然必须如果您希望它工作，请围绕它编写代码）。

推荐阅读