为什么Bootstrap选项卡有role ="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规范说,演示文稿的作用是:

预期用途是当元素用于更改页面外观但没有元素类型隐含的所有功能,交互或结构相关性时,

在我看来,这些<li>元素与使用辅助功能设备的人具有结构相关性,因为它们会告诉您存在多少个选项卡.例如,如果您发现第三个选项卡保存了您感兴趣的信息,导航到列表并知道有三个选项卡可以让您更快地获得所需内容.

此外,当使用ChromeVox访问该测试HTML时,列表会以相同的方式发布.所以似乎role没有任何实际效果.

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

Answer 1

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

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

在bootstrap辅助功能项目(https://github.com/paypal/bootstrap-accessibility-plugin/issues/59)中的一个问题中提出的一点是(正确或错误)选项卡相当常用作导航,因此它总是包含角色选项卡和选项卡是不合适的.正如Marco的文章所指出的那样:"在许多情况下,标签不是合适的语义."

顺便说一句,屏幕阅读器和浏览器的各个组合都不能以同样的方式支持这一点,我们的工作变得更轻松了.(请参阅此文章以了解该文章:http://john.foliot.ca/aria-hidden/)

Answer 2

它主要是为了可访问性目的。http://john.foliot.ca/aria-hidden/。您可以删除或更改“角色”