twitter-bootstrap - 为什么 Bootstrap 选项卡具有角色 ="presentation"？

Question

我正在开发一个从 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 规范说演示文稿是一个角色:

The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type,

在我看来 <li>元素与使用无障碍设备的人具有结构相关性，因为它们会告诉您存在多少个选项卡。例如，如果您发现第三个选项卡包含您感兴趣的信息，则导航到列表并知道有三个选项卡可以让您更快地找到您想要的信息。

此外，当使用 ChromeVox 访问该测试 HTML 时，列表的公布方式相同。所以看来 role没有任何实际效果。

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

Answer 1

请参阅 Marco 在 https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ 上撰写的关于可访问标签的文章。

他的实现有role="presentation"在 li 上表示“屏幕阅读器应忽略列表项本身”，然后在链接上添加“选项卡”角色“将角色映射到预期的屏幕阅读器可识别元素类型”。

在 Bootstrap 可访问性项目 (https://github.com/paypal/bootstrap-accessibility-plugin/issues/59) 中的一个问题中提出的一点是(正确或错误)选项卡通常用作导航，因此始终包含角色选项卡列表和选项卡是不合适的。正如 Marco 的文章所指出的:“在许多情况下，选项卡不是适当的语义。”

顺便说一句，我们的工作并没有因为屏幕阅读器和浏览器的个别组合无法以同样的方式支持这一事实而变得更容易。 (有关这方面的文章，请参阅这篇文章:http://john.foliot.ca/aria-hidden/)