我有下面的下拉列表代码是使用selectboxit js lib生成的。当聚焦于选择列表中的项目时,JAWS不会读取这些项目。我试过在li, a, span甚至I元素上添加aria标签和标题属性,但它仍然没有阅读。我需要添加什么属性,以便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>
张贴解决方案,为我工作,我发现在这个链接- https://webaim.org/discussion/mail_thread?thread=6559
- 将tabindex ="0";,因为这应该处理键盘交互。
- 添加id和tabindex="-1">
- 添加aria-activedescendant到容器role=combobox,它应该被动态更新为指向被选中的对象。(我错过了这个特殊的点,为我解决了这个问题)
在父容器(<ul>
)上有aria-hidden="true"
。这将隐藏所有的孩子从屏幕阅读器和什么也不会宣布。试着把它去掉
。你们;ul id ="ddlSubReason_1SelectBoxItOptions"类="selectboxit-options selectboxit-list"tabindex ="1";角色="listbox">aria-hidden ="true"在