Firefox中屏幕阅读器无法读取autosuggest组件listbox选项问题求助

你的自动建议组件不符合WAI-ARIA中listbox控件的规范要求，Firefox对这类控件的无障碍属性合规性校验更严格，错误的角色映射和缺失的状态属性会导致屏幕阅读器无法识别当前选中项。

• 修正ARIA角色映射
  role="listbox"的直接子选项必须使用role="option"，你当前给按钮设置role="link"和外层listbox角色完全不匹配，是无法朗读的核心原因。如果选项本身需要跳转能力，可以直接用<a>标签配合role="option"，保留合法href属性即可。
• 补充必填状态属性
  1. 外层listbox节点添加aria-activedescendant属性，动态绑定当前选中项的DOM id，屏幕阅读器会通过这个属性识别当前激活的选项，不需要将所有选项加入Tab焦点序列
  2. 每个option节点添加aria-selected属性，切换选项时动态更新为true/false
• 调整交互逻辑
  方向键切换选项时不需要修改实际焦点，只更新aria-activedescendant和对应选项的aria-selected状态即可，Tab键默认逻辑保持为离开输入框/自动建议组件即可。

<div id="autosuggest" role="listbox" aria-activedescendant="option_1">
   <div id="autosuggest_list">
      <div id="option_1" role="option" aria-selected="true">Value1</div>
      <div id="option_2" role="option" aria-selected="false">Value2</div>
   </div>
</div>

如果需要选项可点击跳转，调整为如下结构即可：

<div id="autosuggest" role="listbox" aria-activedescendant="option_1">
   <div id="autosuggest_list">
      <a id="option_1" href="/xxx1" role="option" aria-selected="true">Value1</a>
      <a id="option_2" href="/xxx2" role="option" aria-selected="false">Value2</a>
   </div>
</div>

修改后在Firefox配合NVDA屏幕阅读器测试，方向键切换选项时，会正常朗读 选项值 + 第X项共Y项 + 选中状态 的完整提示。

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