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>

当组合框处于焦点状态（集中在按钮上）时，它现在可以正确地将其读取为组合框及其标签。继续进行操作后，似乎无法识别列表中的元素。我尝试在li元素中添加aria-labeledby，但是没有运气。

我还在输入上使用aria-owns，当您打开组合框时焦点将移至该组合框，以使其与列表链接。

由于它是一个插件，因此我无法对此HTML进行很多改动，而我只是想添加属性并使之可访问。有建议吗？

如何使此可搜索的组合框可访问？

0 个答案: