辅助功能（JAWS） - jQuery选择库的下拉列表

这是我第一次在这里发帖，所以请接受我的道歉，如果这个问题已经以任何方式解决，或者我没有遵循正确的指导方针。辅助功能（JAWS） - jQuery选择库的下拉列表

我在使用JAWS屏幕阅读器时遇到了下拉列表无法访问盲人的问题。

我在JavaScript和jQuery方面的专业知识是非常基础的，所以我希望有一些帮助来解决这个问题。

没有屏幕阅读器，我可以完美地移动不同的选项（上下键）。但是，当JAWS处于活动状态时，我无法执行此操作。当按下向下键时，尽管JAWS读取下一个选项（我可以继续按下向下键并且JAWS每次都会读取下一个选项，但是这些都不会被选中 - 即在选项被选中后触及Intro不选择它）。

这是我的jsp下拉列表中的单行代码。

 <form:select id="searchAnimals" path="animals" data-placeholder="${animalsPlaceHolder}" class="animalsSelect"></form:select>

jQuery的选择库格式这导致以下：

<select id="searchAnimals" name="animals" data-placeholder="Select an animal..." class="animalsSelect" style="display: none;"> 
<option value="" selected="selected"></option> 
<option value="23">cat</option> 
<option value="4">dog</option> 
<option value="73">horse</option> 
<option value="3">duck</option> 
</select> 
<div class="chosen-container chosen-container-single" style="width: 180px;" title="" id="searchAnimals_chosen"> 
<a class="chosen-single chosen-default"><span>Select an animal...</span><div><b></b></div></a> 
<div class="chosen-drop"> 
<div class="chosen-search"> 
<input type="text" autocomplete="off"></div> 
<ul class="chosen-results"> 
<li class="active-result" data-option-array-index="1">cat</li> 
<li class="active-result" data-option-array-index="2">dog</li> 
<li class="active-result" data-option-array-index="3">horse</li> 
<li class="active-result" data-option-array-index="4">duck</li> 
</ul>

... 通常，在选择了选项时，它被包括在所选择的容器。 JAWS似乎不识别/阅读这些内容，而是继续阅读未显示的HTML列表。

有没有办法做到这一点？请注意，更改/修改所选库不太理想。

感谢， ˚F

来源

2017-08-29 Fithos

你有一个活动页面，我们可以测试这个？通常在jQuery设置中，有其他客户端脚本会触发您的粘贴代码无法在运行时环境中表示的代码。 – aardrian

这是很常见的问题，这是积极的，因为2011年我也遇到这个问题，实际上花了大量的时间来得到确切的答案，但最后我发现了什么。你需要与你的原始文件替换这些下列文件： https://github.com/harvesthq/chosen/files/343539/compiled-a11y-chosen-jquery-proto.zip

基本上有加样作用，ARIA标签等咏叹调属性的更多信息，请遵循：https://github.com/harvesthq/chosen/issues/264

注意：按照cooperfellows以上链接发布。 谢谢。

来源

2017-09-13 09:51:33

辅助功能（JAWS） - jQuery选择库的下拉列表

回答

相关问题