HTML 可访问性组合框角色答案

【问题标题】：HTML accessibility combobox roleHTML 可访问性组合框角色
【发布时间】：2022-08-18 02:03:32
【问题描述】：

我的项目中有以下布局：

<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 的角色，就像页面上的其他按钮一样？

它有aria-haspopup=\"true\"。对我来说，这听起来像是一个组合框。是什么使它不是组合框，如果它不是组合框，为什么它有一个弹出窗口？（您可以使用role=\"button\"，但您应该解决冲突，以便它与辅助设备一起正常工作。）
@Ouroborus 嗨，非常感谢您的回答，我正在努力使其易于访问。它的功能是单击按钮时打开显示图像的模式，如果我删除 aria-haspopup 可以吗？
@Loki 这正是组合框的含义 The combobox role identifies an element as an input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of that input. developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/…
@KonradLinkowski 谢谢你的回复，但我有一个用户的请求......那个按钮仍然没有以编程方式定义的按钮角色，这意味着什么？
您需要向您的用户询问详细信息。它应该是role=\"combobox\"，这已经被暗示了。（role=\"button\" 如果你真的需要它是按钮，但这可能是错误的。你的用户可能说错了，可能被误导了，或者可能只是错误的。）但我想知道这是否是因为你是t 在弹出窗口打开和关闭时设置aria-expanded。

标签： javascript html css accessibility wai-aria

【解决方案1】：

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

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

来自the haspopup attribute documentation：

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

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

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

即使Modal Dialog Example on the ARIA Authoring Practices Guide 也没有使用该属性。 Bootstrap Modal 也没有。

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

此外，我相信浏览器并不是要根据该属性中的值来改变元素的角色。 aria-hasdialog is deprecated except for chosen roles, and button is among them 让我更加放心。如果它改变了这个角色，这有什么意义？

试验结果

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>
带有 Firefox 和 Chrome 的 NVDA 将宣布：

放大图像、菜单按钮、子菜单
放大图像、菜单按钮、折叠、子菜单
放大图像、菜单*按钮、子菜单

仅在 Chrome 中公布

Chromvox 将宣布：

放大图像，弹出按钮
放大图像，弹出按钮折叠
放大图像、按钮、子菜单

如果有人可以用 Jaws 进行测试，那就太好了。

当haspopup 存在时浏览器会改变按钮的角色这一事实看起来很奇怪，但这可能是因为打开对话框的按钮没有使用该属性。

【讨论】：