Twitter bootstrap 为什么引导选项卡有role="；介绍；？

我正在开发一个从引导框架扩展而来的设计系统。关键目标之一是可访问性。在实现引导选项卡时，我看到它们将

role=“presentation”

应用于导航列表中的列表项

因此，我从引导模板中收集了一小块测试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规范指出，演示文稿是一个角色，其职责是：

预期用途是使用一个元素来更改图形的外观 页面，但不具有所有功能、交互或结构 元素类型所隐含的相关性

在我看来，

元素在结构上与使用辅助功能设备的人相关，因为它们告诉您有多少选项卡。例如，如果您发现第三个选项卡包含您感兴趣的信息，导航到列表并知道有三个选项卡可以让您更快地找到您想要的信息

此外，当使用ChromeVox访问该测试HTML时，列表以相同的方式公布。因此，

角色

似乎没有任何实际效果

---

我在谷歌上搜索了这个问题，但没有找到任何关于它的讨论。那么，有人知道为什么这是引导框架的一部分吗？

它主要用于可访问性目的。您可以删除或更改“角色”

请参阅Marco在

他的实现在li上有

role=“presentation”

，表示“屏幕阅读器应该忽略列表项本身”，然后在链接“将角色映射到预期屏幕阅读器可识别的元素类型”上添加“tab”角色

bootstrap accessibility project（）中的一个问题是，（正确或错误）选项卡通常用作导航，因此始终包含角色tablist和tab是不合适的。正如Marco的文章所指出的：“在很多情况下，制表符的语义并不合适。”

---

顺便说一句，我们的工作并没有因为屏幕阅读器和浏览器的单独组合不能以同样的方式支持这一点而变得简单。（关于这一点的评论，请参阅本文：）

角色=演示文稿
仅当
上也有
角色时才需要

这是因为
属于
，而不是
。这样的元素不再是
。它与现在的
相同-通过分配
角色
，它的语义发生了变化。您可以从Chrome开发工具运行辅助功能审计，在给定的示例中，您将得到警告“列表项（
）不包含在
或
父元素中。”。它将无效

我希望这能澄清问题

您是否需要
角色
？
这实际上取决于您想要实现的是实际选项卡（通过javascript动态切换选项卡）还是简单导航（例如，可以在新页面中添加书签和/或打开的标准链接）。从视觉上看，两者都可以设置为选项卡，但在结构上，如果是简单的nav，则不应实现tablist、tab、tabpanel、presentation等任何角色。。。让它们成为结构上带有链接的标准列表

在表格列表上使用
role=“presentation”
的参数

来自w3.org的一个示例准确地解释了这里发生的事情（但请注意，role=tablist是必需的）：

实际ARIA规范的最后一个示例
Marco的博客文章，如@peater的回答中所述
Paypal易访问性插件也实现了这些功能，这就是它进入Bootstrap3.x的原因


此外…

在Bootstrap3.4中，他们仍然继续使用
role=“presentation”

在Bootstrap 4.3中，<>强>反对使用>代码>角色=“演示”<代码> >，我个人认为这是错误的，而且它不通过Chrome DVS工具的可访问性审计。
如果没有，您可能需要检查。这里有一点——你不希望导航栏被宣布为“列表…”。另外，关于差异，您可能希望删除超链接，看看会发生什么-规范中说“role=presentation不会导致元素中包含的内容从可访问性树中删除”。我在ChromeVox中尝试了一组链接与列表，并听到了差异。我不确定屏幕阅读器的用户更喜欢哪种方法。在没有列表的情况下，这个角色似乎更不相关，因为ChromeVox在任何情况下都忽略了跨度。删除超链接会失去键盘的可访问性，因此这会适得其反。我同意@theJBRU的观点，这是没有意义的。由于tablist、tab和tabpane角色的存在，Bootstrap似乎决定以自己的方式处理一个在很大程度上被误解的角色（因为模糊的文档）。Bootstrap确实使用了tabpanel，文档说它应该和其他两个角色一起使用。Fwiw、
presentation
in和in。有一些用DOM标记的
presentation
和下面的措辞不会显示在屏幕阅读器中，这让我有点害怕。Bootstrap在这里使用它有点惊讶。提供的示例中的
标记缺少其片段标识符。通常情况下，
a
标签会被诱骗使用
href
中的
#
将它们按焦点顺序排列，但是，如果示例或多或少是从Bootstr复制的