筛选/排序下拉组件应采用哪种无障碍设计模式？

核心结论 #

你设计的这类筛选器场景，优先选择Combobox搭配Listbox/Option的ARIA模式，而非Menu/MenuItem模式。

原因分析 #

1. Menu模式的定位不匹配 #

Menu/MenuItem角色是为功能操作菜单设计的（比如软件的文件菜单、右键快捷菜单），核心是触发命令或执行动作，而非用于选择筛选条件这类表单选择场景。屏幕阅读器用户遇到Menu组件时，会预期选项是执行操作，而非设置筛选值，这会造成交互认知偏差。

2. Combobox+Listbox完全适配你的需求 #

• 场景匹配：Combobox（配合Listbox/Option）专门用于选择值以过滤或填充内容的场景，天然契合你的筛选器定位——选择条件后即时更新结果，无需提交按钮。
• 多选支持：通过给Listbox设置aria-multiselectable="true"，可以明确标识这是多选组件，屏幕阅读器会正确告知用户可多选的特性，同时支持标准键盘多选操作（如Ctrl+点击、Space键选中/取消）。
• 交互适配：这种模式原生支持选择后即时触发内容更新的逻辑，不需要额外调整交互逻辑来适配ARIA规范。

额外注意事项 #

• 严格遵循ARIA键盘交互规范：比如用Enter/ArrowDown打开下拉列表，Escape关闭，方向键导航选项，确保多选快捷键正常工作；选中选项后，更新Combobox的显示文本（比如显示“已选3项”或具体选中的标签）。
• 用aria-live区域实时通知用户筛选结果的变化（例如“筛选完成，共12条内容”），确保屏幕阅读器用户能及时感知内容更新。

内容的提问来源于stack exchange，提问作者cusejuice