我正在开发一个从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框架的一部分？
答案 0 :(得分：7)
请参阅Marco在https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
撰写的关于可访问标签的文章他的实现在li上有role="presentation"表示“屏幕阅读器应该忽略列表项本身”，然后在链接上添加“tab”角色“将角色映射到可识别的屏幕阅读器元素类型。“
在引导程序可访问性项目（https://github.com/paypal/bootstrap-accessibility-plugin/issues/59）中的一个问题中提出的一点是（正确或错误）选项卡通常用作导航，因此始终包含角色选项卡列表和选项卡是不合适的。正如Marco的文章所指出的那样：“在许多情况下，标签不是合适的语义。”
BTW我们的工作并没有变得更容易，因为屏幕阅读器和浏览器的各个组合都不能以同样的方式支持这一点。 （请参阅此文章，了解相关内容：http://john.foliot.ca/aria-hidden/）答案 1 :(得分：2)
主要用于辅助功能。 http://john.foliot.ca/aria-hidden/。您可以删除或更改＆＃34;角色＆＃34;
答案 2 :(得分：0)
这实际上取决于您是要实现实际的选项卡（例如，脚本是通过脚本动态切换选项卡面板）还是简单的导航（例如，链接打开新页面）。如果是简单的导航（即使CSS将其导航为选项卡），则您也不应实现任何角色，包括tablist，tab，tabpanel，presentation ...
在您的情况下，不需要
role="presentation"元素上的<li>。 需要考虑是否更改了列表元素<ul>的隐式角色，例如<ul role="tablist">或<ul role="tree">等。在那种情况下，<ul>元素不再是列表，并且<li>元素没有非法的列表容器。因此，<li>元素的角色可以设置为role="presentation"，这意味着“无角色”。与<ul>相反，如果在role="tablist"元素上设置了<div>，则该问题不存在，并且不需要role="presentation"
在Bootstrap 3.4中，他们仍然继续使用 role="presentation"
https://getbootstrap.com/docs/3.4/javascript/#tabs-usage
在Bootstrap 4.3中，他们拒绝使用 role="presentation"，我个人认为这是错误的
https://getbootstrap.com/docs/4.3/components/navs/
哪个是对的？ 请自己决定。我把研究论点放在下面。
role="presentation"的参数