【发布时间】：2015-06-24 13:30:24
【问题描述】：
我正在开发一个从 Bootstrap 框架扩展而来的设计系统。关键目标之一是可访问性。在实现 Bootstrap 选项卡时，我看到它们将 role="presentation" 应用于其导航列表中的列表项。
所以我从 Bootstrap 模板中整理了一小块测试 HTML：
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
ARIA 规范说演示文稿是一个角色：
预期用途是当一个元素被用来改变外观 页面但不具备所有功能性、交互性或结构性 元素类型暗示的相关性，
在我看来，<li> 元素与使用无障碍设备的人具有结构相关性，因为它们会告诉您存在多少个选项卡。例如，如果您发现第三个选项卡包含您感兴趣的信息，则导航到列表并知道有三个选项卡可以让您更快地找到您想要的信息。
此外，当使用 ChromeVox 访问该测试 HTML 时，列表的公布方式相同。所以看来role并没有什么实际作用。
我已经用谷歌搜索过这个问题，但没有找到任何关于它的讨论。那么，有谁知道为什么这是 Bootstrap 框架的一部分？
【问题讨论】：
-
如果您还没有，您可能需要查看css-tricks.com/navigation-in-lists-to-be-or-not-to-be。有一点 - 你不希望导航栏被宣布为“...列表”。此外，关于差异，您可能想要删除超链接并查看会发生什么 - 规范。表示“role=presentation 不会导致 元素中包含的内容从可访问性树中删除。”
-
我在 ChromeVox 中尝试了一组链接与一个列表，并且可以听到不同之处。我不确定屏幕阅读器的用户更喜欢哪种方法。如果没有列表，该角色似乎更不相关，因为 ChromeVox 在任何情况下都会忽略跨度。删除超链接会失去键盘可访问性，因此会适得其反。
-
我同意@theJBRU 的观点，即这没有意义。随着角色 tablist、tab 和 tabpane 的存在，Bootstrap 似乎决定以自己的方式使用一个在很大程度上被误解的角色（因为文档模糊）。 Bootstrap 确实使用了 tabpanel，文档说应该与其他 2 个角色一起使用。
-
Fwiw、all WAI-ARIA roles listed here、
presentation在draft for 1.1 here 和1.0 here 中。屏幕阅读器中不会显示标记为presentation及以下的DOM，这让我有点害怕。有点惊讶 Bootstrap 在这里使用它。 -
所提供示例中的
<a>标记缺少其片段标识符。通常a标签被哄骗在href中使用#将它们放在焦点顺序中，但是，如果该示例或多或少是从 Bootstrap 文档中复制的，则可能是他们使用演示角色来隐藏辅助功能 API 的后代锚点，以提供更易于访问的文档。
标签： twitter-bootstrap accessibility wai-aria