如何在表单中标记自定义列表下拉列表

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的一部分，我不能给你更多的帮助