如何在表單中標記自定義列表下拉列表

Question

我目前正在開發一個必須符合AA輔助功能標準的網站。我有一個定製的下拉菜單是表單的一部分，無法弄清如何爲屏幕閱讀器添加標籤。令人遺憾的是，我不能使用本地選擇下拉菜單（儘管可訪問，網站設計比較沉重，並且它是應用自定義樣式的最佳方式），所以不能使用常規標籤標籤。到目前爲止，我已經使用了下面的內容，但我認爲這不是正確的方法。

<form> 
    (...) other inputs 
    <ul class="dropdown" role="listbox" aria-labelledby="location" aria-multiselectable="false" aria-expanded="false" tabindex="0"> 
     <li class="first" aria-labelledby="location"> 
      <span>Location</span> 
     </li> 
     <li tabindex="-1" role="option" aria-selected="false">Location1</li> 
     <li tabindex="-1" role="option" aria-selected="false">Location2</li> 
     <li tabindex="-1" role="option" aria-selected="false">Location3</li> 
    </ul> 
</form> 

只是爲了描述的行爲 - 這是一個普通的下拉，只有li.first初始可見（上點擊/輸入所有領域成爲可見的，可以選擇的值）。選擇一個選項後，選擇的詠歎調設置爲true，該值將替換位置中的文本。

任何人都可以提出更好的解決方案嗎？目前我最關心的可能是對aria-labelledby的錯誤使用，但我不知道什麼應該是正確的選擇。

謝謝， E.

編輯：JS + jQuery的

$('.dropdown').on('click', function() { 
    $(this).toggleClass('opened'); 
    if ($(this).attr('aria-expanded') === 'false') { 
     $(this).attr('aria-expanded', 'true'); 
    } else { 
     $(this).attr('aria-expanded', 'false'); 
    } 
}) 

$('.dropdown li').on('click', function() { 
    if (!$(this).hasClass('first')) { 
     var text_drop = $(this).html(); 
     $(this).parent().find('span').html(text_drop); 
     $(this).parent().children().not('.first').attr('aria-selected', 'false') 
     $(this).attr('aria-selected', true); 
     $('.dropdown').animate({scrollTop: 0}, 200); 
    } 
}); 

Answer 1

的aria-labelledby應提及的現有元素的id。您的標籤存在於對象本身中時出現問題。類似下面的東西會更有意義。

<form> 
(...) other inputs 
<div id="location" aria-expanded="false" aria-owns="listchoices">Location</div> 
<ul class="dropdown" role="listbox" aria-labelledby="location" 
    aria-multiselectable="false" tabindex="0"> 
    <li tabindex="-1" role="option" aria-selected="false">Location1</li> 
    <li tabindex="-1" role="option" aria-selected="false">Location2</li> 
    <li tabindex="-1" role="option" aria-selected="false">Location3</li> 
</ul> 
</form> 

沒有JavaScript的一部分，我不能給你更多的幫助