HTML 可访问性 combobox 角色

Question

我的项目中有以下布局：

<div class="css-c18mwd-ImageFrameBase-ImageFrameWithGradient-SecondaryImageFrameWithGradient e1jjxv8j4">
<button tabindex="0" aria-haspopup="true" class="css-11ubmv-MediaGridButton e1jjxv8j1">Enlarge Nordic Blue Nokia X20 from Front and Back</button>
</div>

但是当我查看辅助功能选项卡时，它显示我的button的角色是combobox ，如下面的屏幕截图所示。

如何将其更改为更易于访问并像页面上的其他button一样具有按钮的作用？

Answer 1

这是一个奇怪的案例。 我相信你应该删除aria-haspopup （和tabindex当你在它的时候，这对于<button>是多余的）。

就像我们继续之前的提醒一样：重要的是屏幕阅读器最终宣布了什么，并符合相关标准。

从haspopup属性文档：

弹出元素通常显示为位于其他内容之上的内容块。 作者必须确保用作弹出内容容器的元素的角色是menu, listbox, tree, grid或dialog ，并且aria-haspopup的值与弹出容器的角色相匹配。

如果我从您的评论中正确理解您正在打开图像的更大视图。 从上面的列表中，唯一合适的角色是dialog 。

在查看dialog role 的文档时，您不会发现任何提及haspopup ，我也没有看到任何具有该属性的对话框模式。

甚至ARIA Authoring Practices Guide 上的模态对话框示例也没有使用该属性。 Bootstrap Modal也没有。

所以我的建议是遵循这些指南并简单地删除aria-hasdialog并确保您的对话正确实施所有要求。

此外，我相信浏览器并不是要根据该属性中的值来改变元素的角色。 我更放心的是aria-hasdialog已被弃用，除了选定的角色，而button就是其中之一。 如果它改变了这个角色，这有什么意义呢？

试验结果

Chrome 在所有这些情况下都公开了combobox角色：

<button aria-haspopup="true">Enlarge Image</button>
<button aria-haspopup="true" aria-expanded="false">Enlarge Image</button>
<button aria-haspopup="dialog">Enlarge Image</button>

但 Chromvox 将宣布：

放大图片，弹出按钮
放大图像，弹出按钮折叠
放大图像，按钮

我还没有用 NVDA 测试过，如果有人可以用 Jaws 测试那就太好了。

Firefox 有所不同，但也改变了前两个的角色，这似乎很合适。

也许我们应该向 Webkit 团队提交错误报告。