Açılır bileşen için erişilebilirlik

Question

Açılır bileşenin erişilebilirliğini uygulıyorum, açılır penceremdeki özel özellik, açılır menü açılırken açılır menüde yalnızca derleme açılırken, açılır menüde değerleri derlerken seçenekler menüsündeki değerleri doldurur. Odak yüzden #selectedValue geldiğinde benim #dropdownMenu #dropdown tıklamasıyla üzerinde oluşturulan alır gibi ben iki sorun

1. karşı karşıyayım

   Dropdown HTML: 
   
   <div id="dropdown" ng-click="openDropdown()"> 
       <div id="selectedValue" role="listbox" tabindex="0" aria-label="{{selectedVal}}" aria-owns="dropDownMenu">{{selectedVal}}</div> 
   </div> 
   
   DropDown Menu template(which gets compiled and polpulated after clicking dropdown above) : 
   
   <div id="dropDownMenu"> 
       <li ng-click="selectItem()" role="option">item1</li> 
       <li ng-click="selectItem()" role="option">item2</li> 
   </div> 
   

   (dinamik şablon üretimi) çeneler #dropdownMenu erişimi yok Tipik bir seçim kutusu gibi seçeneklerin sayısını bildirmez.

2. aria-label = "{{selectedVal}}" için #selectedValue veriyorum, bu yüzden ok tuşlarının tıklanması için javascript seçiliVal'i güncellemekle ilgilenir. #dropdownMenu açık olmasa da, selectedVal değerinin değiştirilemediği açıklanır. jaws 16.0 tarafından, sadece ilk kez kullanıcı sekmeleri olarak bunu duyurur. Bu, 14.0 jaws içinde iyi çalışır. Bazı çözümler için bekliyorum

....

Answer 1

1. ekleme arya-canlı = kibar Bunu düzeltmek gerekir.
2. Standart bir seçim kutusu kullanıp seçenek öğelerini dinamik içeriğinizle doldurmanın bir nedeni var mı? Bu ekran okuyucuları kendileri bulacak gibi, bir aria özelliği güncel seçeneği ile güncelleme ihtiyacını ortadan kaldıracaktır. Ayrıca, aria etiketi, seçilen seçeneğinin değil, seçim kutusunun (veya amacının) adı olmalıdır. Eğer bir HTML seçkisiyle seçenekler seçtiyseniz, tabindex ve aria-live'i de kaldırabilirsiniz, çünkü yerel form girişleri varsayılan olarak tam klavye ve ekran okuyucu desteğine sahiptir.