JAWS无法读取SelectBoxIt JS生成的无序列表下拉项如何解决

核心问题定位 #

你给出的代码里存在两个导致JAWS无法读取选项的关键错误：

• 外层<ul>设置了aria-hidden="true"，直接导致整个下拉列表被标记为对无障碍工具隐藏
• 作为option角色的li元素缺少必填的无障碍状态属性，读屏软件无法识别选项的选中状态和可交互属性

具体修改步骤 #

1. 调整外层<ul>属性
   • 移除aria-hidden="true"
   • 可选补充aria-label说明列表用途，比如aria-label="子原因选择列表"
2. 调整每个<li>（role=option）属性
   • 给所有li添加tabindex属性：当前选中项设为tabindex="0"，其余未选中项设为tabindex="-1"，保证焦点状态可被读屏识别
   • 给所有li添加aria-selected属性：当前选中项设为aria-selected="true"，其余设为aria-selected="false"
   • 补全第一个空选项的aria-label内容，不要留空值

修改后参考代码 #

<ul id="ddlSubReason_1SelectBoxItOptions" class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-label="子原因选择列表">
   <li id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first selectboxit-selected" role="option" aria-label="请选择" tabindex="0" aria-selected="true">
   <a class="selectboxit-option-anchor">
   <span class="selectboxit-option-icon-container">
   <i class="selectboxit-option-icon  selectboxit-container"></i></span></a></li>
   <li id="1" data-val="29" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 1" tabindex="-1" aria-selected="false">
   <a class="selectboxit-option-anchor">
   <span class="selectboxit-option-icon-container">
   <i class="selectboxit-option-icon  selectboxit-container"></i></span>
   Selection text placeholder 1</a></li>
   <li id="2" data-val="28" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 2" tabindex="-1" aria-selected="false">
   <a class="selectboxit-option-anchor">
   <span class="selectboxit-option-icon-container">
   <i class="selectboxit-option-icon  selectboxit-container"></i></span>
   Selection text placeholder 2</a></li>
   <li id="3" data-val="55" data-disabled="false" class="selectboxit-option" role="option" aria-label="Selection text placeholder 3" tabindex="-1" aria-selected="false">
   <a class="selectboxit-option-anchor">
   <span class="selectboxit-option-icon-container">
   <i class="selectboxit-option-icon  selectboxit-container"></i></span>
   Selection text placeholder 3</a></li>  
</ul>

额外说明 #

修改后切换选项时要同步更新对应li的tabindex和aria-selected属性值，保证状态和实际交互一致即可。

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