在界面设计中,为包含分组选项(grouped options)的 Listbox 模式配置 WAI-ARIA 属性时,需遵循以下核心原则以确保屏幕阅读器准确读取内容。
首先,结构上必须明确区分列表与分组。拥有所有选项的元素应设置 role="listbox"。每个选项需设置 role="option",并归属于 listbox 元素或一个 role="group" 的元素内。若使用分组,则被包含在组内的选项称为分组选项。
其次,针对分组选项的命名至关重要。如果 Listbox 包含分组选项,所有选项组必须至少包含一个选项。每个选项组必须通过 aria-label 或 aria-labelledby 属性提供可访问的名称。仅靠内容无法让屏幕阅读器理解组的语义,因此显式命名是必须的。
此外,Listbox 本身的标签配置同样重要。若该 Listbox 不属于其他组件(如 Combobox),其元素必须有可见标签(通过 aria-labelledby 引用)或指定 aria-label 值,以便告知用户当前选择的是哪个列表。
最后,关于多选状态的标识,若支持多选,需将 aria-multiselectable 设为 true。选中状态应统一使用 aria-selected 或 aria-checked,避免混用,除非界面明确区分了两种状态的含义且提供了独立控制方法。对于动态加载的选项,还需正确设置 aria-setsize 和 aria-posinset 属性。