Question

我的团队面临一些问题，即屏幕阅读器为视障人士识别 bootstrap 3 下拉列表（http://getbootstrap.com/components/#dropdowns）。所以我很好奇，如果bootstrap 3与 508合规部分（http://www.section508.gov/）兼容吗？

如果不是，是否有任何引导插件，使其与508部分兼容？

Answer 1

我使用NVDA测试了bootstrap下拉菜单，并且它们正常工作，假设它们已正确标记。您需要确保用于下拉菜单的元素＆＃34;按钮＆＃34;是一个可以聚焦的项目，它不能是div或span，而ul需要有一个角色=＆＃34; menu＆＃34;。

要使用NVDA的下拉列表，您可以使用↑和↓进行导航，然后按Enter键打开菜单。

代码应如下所示：

<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Menu Button <span class="fa fa-caret-down">&nbsp; </span></a>

<ul class="dropdown-menu" role="menu">
    <li><a href="https://www.google.com/" target="_blank" title="Link to Google">Link to Google</a></li>
    <li>Just some Text</li>
    <li><a href="http://www.stackoverlow.com/" target="_blank" title="Stack Overflow">Stack Overflow</a></li>
</ul>

Answer 2

根据http://achecker.ca/checker/index.php和http://webaim.org/standards/508/checklist的核对清单，似乎bootstrap 3与508合规部分没有任何重大问题。

但是，不幸的是，屏幕阅读器无法读取引导下拉，就像读者对选择标签一样，即使使用https://github.com/paypal/bootstrap-accessibility-plugin也是如此。因此，视障人士在长列表中选择某些值可能有点困难，例如：选择国家/地区列表。

Bootstrap 3是否与508合规部分兼容？

2 个答案: