html - 如何使这个可搜索的组合框可访问？

Question

我正在修复创建这个可搜索组合框的这段代码。我正在使用一个名为 bootstrap select 的 jQuery 插件，我只是想添加一些 HTML 元素，以便屏幕阅读器可以正确读取它（使用 Mac VoiceOver）。

我已经使用 aria 属性、角色等进行了多次迭代。以下代码是它的最佳迭代。

<div class="btn-group bootstrap-select form-control input-sm uif-multiSelectControl required validChar-document.developmentProposal.ownedByUnitNumber0 advanced_select" aria-required="true">
    <button type="button" class="btn dropdown-toggle selectpicker btn-default" data-toggle="dropdown" data-id="uk9itrp_control" title="select" role="combobox" aria-label="Lead Unit" aria-haspopup="true"><span class="filter-option pull-left">select</span>&nbsp;<span class="caret"></span></button>
    <div class="dropdown-menu open" style="max-height: 221px; overflow: hidden; min-height: 40px;">
        <div class="bootstrap-select-searchbox">
            <input id="to_fix_krad_bug" name="to_fix_krad_bug" type="text" class="input-block-level form-control valid dirty" role="combobox" aria-owns="results_jx1xgk">
        </div>
        <ul class="dropdown-menu inner selectpicker" role="combobox" id="results_jx1xgk" style="max-height: 169px; overflow-y: auto; min-height: 0px;">
            <li rel="0" class="selected hide" role="option"><a tabindex="0" class="" style=""><span class="text">select</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            <li rel="1" role="option" class=""><a tabindex="0" class="" style=""><span class="text">000001 - University</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            <li rel="2" role="option" class="hide"><a tabindex="0" class="" style=""><span class="text">AA-AAAA - Unit A/span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
            <li rel="3" role="option" class="hide"><a tabindex="0" class="" style=""><span class="text">BB-BBBB - Unit B</span><i class="glyphicon glyphicon-ok icon-ok check-mark"></i></a></li>
        </ul>
    </div>
</div>

当组合框被聚焦（聚焦在按钮上）时，它现在可以正确地将其读取为组合框及其标签。一旦你继续这样做，它似乎就无法识别列表中的元素。我尝试将 aria-labelledby 添加到 li 元素，但没有任何运气。

我还在打开组合框时焦点所在的输入上使用 aria-owns，以便它与列表链接。

我不能移动很多这个 html，因为它是一个插件，我只是想添加属性并使其易于访问。建议？

标签： htmlaccessibility