0

C'est la première fois que je poste ici donc s'il vous plaît accepter mes excuses si cette question a déjà été adressée de quelque façon ou je ne suis pas les directives correctes.Accessibilité (JAWS) - Liste déroulante avec la bibliothèque choisie de jQuery

Je suis confronté à un problème avec la liste déroulante ne pas être accessible aux personnes aveugles lors de l'utilisation de JAWS Screen Reader.

Mon expertise autour de Javascript et jQuery est assez basique, donc j'apprécierais de l'aide pour résoudre ce problème.

Sans lecteur d'écran, je peux parfaitement passer d'une option à l'autre (touches haut-bas). Cependant, lorsque JAWS est actif, je ne peux pas effectuer cette action. Lorsque vous appuyez sur la touche enfoncée, les options ne sont pas sélectionnées bien que JAWS lise l'option suivante (je peux continuer à appuyer sur la touche enfoncée et JAWS lira l'option suivante à chaque fois, mais celles-ci ne seront jamais sélectionnées. ne pas le sélectionner non plus).

Ceci est la seule ligne de code dans mon jsp pour la liste déroulante.

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

formats de bibliothèque choisie jquery ce résultat dans les domaines suivants:

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

... Normalement, lorsqu'une option est sélectionnée, il est inclus dans le conteneur choisi. JAWS ne semble pas les reconnaître/lire et continue à lire la liste HTML non affichée.

Y at-il un moyen de le faire? Veuillez noter que changer/modifier la bibliothèque choisie ne serait pas idéal.

Merci, F

+0

Avez-vous une page en live où nous pouvons tester cela? Généralement, dans un paramètre jQuery, il existe d'autres déclenchements de script côté client que votre code collé ne peut pas représenter dans un environnement d'exécution. – aardrian

Répondre

0

Ceci est très courant de question qui était actif depuis 2011. Moi aussi fait face à ce problème et en fait il a fallu beaucoup de temps pour obtenir la réponse exacte, mais finalement je trouve quelque chose. Vous devez remplacer ces fichiers suivants avec vos fichiers d'origine: https://github.com/harvesthq/chosen/files/343539/compiled-a11y-chosen-jquery-proto.zip

Fondamentalement, il existe des attributs aria ajoutés comme rôle, aria label etc. Pour plus d'informations s'il vous plaît suivre: https://github.com/harvesthq/chosen/issues/264

Note: Suivez cooperfellows poster pour le lien ci-dessus. Merci.