使用 SelectBoxIt js 时，JAWS 不读取使用无序列表创建的下拉列表项

Question

我有下面的下拉列表代码，它是使用 selectboxit js lib 生成的。当关注项目时，JAWS 不会读取 select 列表中的项目。我已经尝试在 li、a、span 甚至 i 元素上添加 aria-label 和 title 属性，但它仍然无法读取。我需要添加什么属性，以便 JAWS 可以在焦点上正确读取它。使用向上和向下箭头时，焦点正确地放在 li 元素上。

<ul id="ddlSubReason_1SelectBoxItOptions" class="selectboxit-options selectboxit-list" tabindex="-1" role="listbox" aria-hidden="true">
   <li id="0" data-val="" data-disabled="false" class="selectboxit-option selectboxit-option-first selectboxit-selected" role="option" aria-label="">
   <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">
   <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">
   <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">
   <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>

Answer 1

您在 parent 容器 (<ul>) 上有 aria-hidden="true"。这将从屏幕 reader 中隐藏所有 children，并且不会公布任何内容。尝试删除它。

.

Answer 2

发布我在此找到的对我有用的解决方案 link - https://webaim.org/discussion/mail_thread?thread=6559

将 tabindex="0" 移到周围的范围内，因为这应该处理键盘交互。
为所有具有 role=option 的元素添加了 ID 和 tabindex="-1"。
将 aria-activedescendant 添加到具有 role=combobox 的容器中，它应该动态更新以指向选定的。（我错过了为我解决问题的这一点）

使用 SelectBoxIt js 时，JAWS 不读取使用无序列表创建的下拉列表项

JAWS not reading dropdown list items created using unordered list when using SelectBoxIt js

html

javascript

jquery

jaws-screen-reader