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

Question

我的团队在识别视障人士使用的屏幕阅读器时，遇到了一些关于 bootstrap 3 下拉列表（http://getbootstrap.com/components/#dropdowns）的问题。因此我很好奇，Bootstrap 3 是否与 508 合规部分（http://www.section508.gov/）兼容？

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

- Aliaksei Maniuk

---

如果它与涵盖类似事物的欧盟规则类似，我会感到惊讶，但这似乎在很大程度上有助于解决问题：https://github.com/paypal/bootstrap-accessibility-plugin - user527892

他们在无障碍性部分（http://getbootstrap.com/getting-started/#accessibility）没有明确说明他们符合508合规标准，但是他们确实概述了内置资源以及如何确定无障碍问题并用最小的努力解决它们的链接。 - Robert

Answer 1

根据http://achecker.ca/checker/index.php和http://webaim.org/standards/508/checklist的检查表，似乎Bootstrap 3在508合规性方面没有任何重大问题。但是，不幸的是，即使使用https://github.com/paypal/bootstrap-accessibility-plugin，Bootstrap下拉菜单也无法像读者对待选择标签一样被屏幕阅读器读取。因此，对于视力受损的人来说，在长列表中选择某些值（例如选择国家列表）可能会有些困难。

- Aliaksei Maniuk

Answer 2

我使用NVDA测试了Bootstrap下拉菜单，假设它们被正确标记，则可以正常工作。您需要确保用于下拉“按钮”的元素是可以聚焦的项目，不能是div或span，并且ul需要具有role =“menu”。

例如，要使用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>

- Mary Wheeler