NVDA无法读取Microsoft Edge中具有“对话框”角色的div上的aria标签

Question

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

它适用于以下组合：

旁白+ 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"

有任何想法吗？

Answer 1

您是否已通过JAWS测试过？ 正如Paciello Group网站上的Scott O'Hara的博客中所述 ，Internet Explorer在Role role="dialog"存在一些麻烦。 阅读全部内容，但尤其要查找名为“ IE11的部分，该标题为模式对话框的第一个元素”。

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

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

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

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

Answer 2

NVDA与Firefox更加兼容，Jaws与Internet Explorer和Edge更加兼容。

讲述人与Edge更加兼容。

通常，如果您使用锚标记，则必须在锚内提供一些文本。 同样，使用空锚标签也不是一个好习惯。

如果我们使用基本的html语义标准，那么它将正常工作。

同样，如果我们使用role =“ dialog”，我们会将焦点发送到对话框的容器，并将使用aria-labeled-by与对话框标题相关。