Accessibility (JAWS) - Dropdown list with jQuery chosen library

Question

It's the first time I post here so please accept my apologies if this question has already been addressed in any way or I'm not following the correct guidelines.

I am facing an issue with dropdown list not being accessible to blind people when using JAWS Screen Reader.

My expertise around Javascript and jQuery is quite basic so I would appreciate some help to sort this out.

Without a screen reader, I can perfectly move across the different options (up-down keys). However, when JAWS is active, I can't perform this action. When hitting the down key, the options are not being selected although JAWS reads the next option (I can keep hitting the down key and JAWS will read the next option every time, but these are never selected - hitting Intro after a option is spoke is not selecting it either).

This is the single line of code in my jsp for the drop-down list.

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

jQuery chosen library formats this resulting in the following:

<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>

... Normally, when an option is selected, it's included in the chosen-container. JAWS doesn't seem to recognise/read these and instead keeps reading the non-displayed HTML list.

Is there any way of doing this? Please note that changing/amending the chosen library would not be ideal.

Thanks, F

Answer 1

This is very common issue which was active since 2011. I too faced this issue and actually it took lots of time to get the exact answer but finally I found something. You need to replace these following files with your original files: https://github.com/harvesthq/chosen/files/343539/compiled-a11y-chosen-jquery-proto.zip

Basically there are aria attributes added like role, aria-label etc. For more information please follow : https://github.com/harvesthq/chosen/issues/264

Note: Follow cooperfellows post for above link. Thank you.