列表框和带有复选框的组之间的语义差异是什么？

Question

官方 ARIA APG 列表框示例实现 广泛使用

aria

属性。 这是有道理的，因为他们想展示如何使用它们。

他们的单个选项的 A11y 树如下所示：

但通常我会使用带有

type="checkbox"

的输入来实现列表框模式 在一组。这也符合他们的“没有 ARIA 比坏 ARIA 更好”推荐。 那么 ARIA 树看起来像这样：

我现在的问题

1. 如果我想创建符合 ARIA 的多选，首选方法是什么？
2. 列表框和带有复选框的组之间的语义差异是什么？

Answer 1

一如既往，首选方法取决于您的用户群，在这种情况下也取决于您的用户群。

listbox

允许使用一堆功能来导航大量选项，其中通过选项卡浏览所有选项会很痛苦：

• 箭头键导航可使用 Tab
退出列表
• 可选择折叠盒子以节省视觉空间
• 开始和结束的键盘快捷键
• 提前输入即可快速找到选项

因此，如果您只有一个相对较短的列表，那么

group

+

checkbox

将是一个更轻量级的解决方案。

---

ARIA 角色允许向用户传达他们对小部件行为的期望。这主要涉及键盘导航。

键盘导航

这里，简单的复选框列表和列表框有所不同。

ARIA 表示

listbox

:

要通过键盘访问，作者应该管理此角色的所有实例的选项后代的焦点，如管理焦点中所述。

在作者信息中，这是强制执行的：

作者必须管理对以下容器角色的关注：[...]

listbox

这意味着在列表框中，箭头键将控制单个选项之间的焦点，Home和End可能会跳转到列表的开头或结尾。 APG 列出了多个其他推荐的键盘快捷键。

在一组简单的复选框中，仅使用 Tab。

管理焦点允许用户绕过重复的块。如果组件不管理焦点并且需要 Tab 键，请不要使用

listbox

角色。

可折叠

第二个区别在于

aria-expanded

。列表 box 有时可以折叠和展开，而

group

角色不允许使用此属性。