twitter-bootstrap – 为什么Bootstrap标签有role =“presentation”？

我正在从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时,列表将被相同地声明.所以似乎这个角色没有任何实际的效果.

我已经google了这个问题,但没有发现任何讨论.那么有没有人知道为什么这是Bootstrap框架的一部分？

解决方法

请参阅marco在 https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/的可访问标签

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

在引导辅助功能项目(https://github.com/paypal/bootstrap-accessibility-plugin/issues/59)中的一个问题中提到的一点是(正确或错误)选项卡通常用作导航,因此总是包含角色选项卡列表和选项卡是不合适的.正如marco的文章所指出的：“在很多情况下,选项卡不是适当的语义.

由于屏幕阅读器和浏览器的单独组合不能以相同的方式支持这一点,所以我们的工作并不容易. (见这篇文章写：http://john.foliot.ca/aria-hidden/)