twitter-bootstrap 为什么 Bootstrap 标签有 role="presentation"？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31028008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why do Bootstrap tabs have role="presentation"?
提问by theJBRU
I'm working on a design system that's extending from the Bootstrap framework. One of the key goals is accessibility. When implementing Bootstrap tabs I see that they apply role="presentation"to the list items in their nav list.
我正在开发一个从 Bootstrap 框架扩展的设计系统。关键目标之一是可访问性。在实现 Bootstrap 选项卡时，我看到它们适用role="presentation"于导航列表中的列表项。
So I put together a little chunk of test HTML from the Bootstrap template:
所以我把 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>
The ARIA spec says that presentation is a role for which:
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,
预期用途是当元素用于更改页面外观但不具有元素类型所隐含的所有功能、交互或结构相关性时，
It seems to me that the <li>elements have a structural relevance to someone using an accessibility device as they tell you how many tabs are present. If you were to discover, for example, that the third tab held the information you were interested in, navigating to the list and knowing there are three tabs would let you get to what you want more quickly.
在我看来，这些<li>元素与使用无障碍设备的人具有结构相关性，因为它们会告诉您存在多少个选项卡。例如，如果您发现第三个选项卡包含您感兴趣的信息，导航到列表并知道有三个选项卡可以让您更快地找到所需的信息。
Also, when accessing that test HTML with ChromeVox, the lists are announced identically. So it seems that the roledoesn't have any practical effect.
此外，当使用 ChromeVox 访问该测试 HTML 时，列表的公布方式相同。所以似乎role没有任何实际效果。
I've Googled this question, but haven't found any discussion of it. So, does anyone know why this is part of the Bootstrap framework?
我在谷歌上搜索了这个问题，但没有找到任何关于它的讨论。那么，有谁知道为什么这是 Bootstrap 框架的一部分？
回答by peater
See the write up about accessible tabs by Marco at https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
请参阅 Marco 在https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ 上撰写的有关可访问选项卡的文章
His implementation has role="presentation"on the li to indicate "that the screen reader should ignore the list items themselves" and then adds the "tab" role on the links "mapping the roles to the intended screen-reader recognizable element type."
他的实现role="presentation"在 li 上指示“屏幕阅读器应该忽略列表项本身”，然后在链接上添加“选项卡”角色“将角色映射到预期的屏幕阅读器可识别元素类型”。
One point that was made in an issue in the bootstrap accessibility project (https://github.com/paypal/bootstrap-accessibility-plugin/issues/59) is that (right or wrong) tabs are fairly commonly used as navigation so it would be inappropriate to always include the roles tablist and tab. As Marco's article notes: "There are many circumstances where tabs are not the appropriate semantics."
在 bootstrap 可访问性项目 ( https://github.com/paypal/bootstrap-accessibility-plugin/issues/59)中的一个问题中提出的一点是（正确或错误）选项卡通常用作导航，因此它总是包含角色 tablist 和 tab 是不合适的。正如 Marco 的文章所指出的：“在很多情况下，制表符不是适当的语义。”
BTW our job isn't made any easier by the fact that individual combinations of screen readers and browsers fail to support this in the same way. (See this article for a write up on that: http://john.foliot.ca/aria-hidden/)
顺便说一句，我们的工作并没有因为屏幕阅读器和浏览器的单独组合无法以同样的方式支持这一事实而变得更容易。（请参阅这篇文章以了解相关内容：http: //john.foliot.ca/aria-hidden/）
回答by user2557504
It is mainly for accessibility purposes. http://john.foliot.ca/aria-hidden/. You can remove or change the "role"
它主要用于可访问性目的。http://john.foliot.ca/aria-hidden/。您可以删除或更改“角色”
回答by Hrvoje Golcic
It really depends whether you wanted to implement actual tabs (e.g. tab panels are toggled dynamically by a script) or a simple nav (e.g. links open a new page). In case of simple nav (even if it's styled as tabs by CSS) you should not implement any of the roles tablist, tab, tabpanel, presentation...
这实际上取决于您是要实现实际的选项卡（例如，选项卡面板由脚本动态切换）还是简单的导航（例如链接打开新页面）。在简单导航的情况下（即使它被 CSS 设置为选项卡），您不应该实现任何角色 tablist、tab、tabpanel、presentation...
In your case
role="presentation"on<li>element is not required. It would be required thought ifan implied role of a list element<ul>was changed e.g.<ul role="tablist">or<ul role="tree">etc. In that case<ul>element is not a list anymore and<li>elements do not have a list container which is illegal. Therefore the role of<li>elements can be set torole="presentation"which means simply "no role". In opposite to<ul>if arole="tablist"is set on a<div>element then the issue does not exists and there is no need forrole="presentation"
在您的情况下
role="presentation"，<li>不需要元素。这将需要想，如果一个列表元素的一个隐含的角色<ul>改变如<ul role="tablist">或<ul role="tree">等。在这种情况下，<ul>元素是不是一个列表了和<li>元素没有一个列表容器，它是非法的。因此<li>可以将元素的角色设置为role="presentation"“无角色”。与<ul>如果role="tablist"在<div>元素上设置 a相反，则问题不存在并且不需要role="presentation"
In Bootstrap 3.4 they still keep usingrole="presentation"https://getbootstrap.com/docs/3.4/javascript/#tabs-usage
在 Bootstrap 3.4 中，他们仍然继续使用role="presentation"https://getbootstrap.com/docs/3.4/javascript/#tabs-usage
In Bootstrap 4.3 they decided against usingrole="presentation"which I personally consider wrong
https://getbootstrap.com/docs/4.3/components/navs/
在 Bootstrap 4.3 中，他们决定不使用role="presentation"我个人认为错误的
https://getbootstrap.com/docs/4.3/components/navs/
Which is right?Please decide for yourself. I put my research arguments below.
哪个是对的？请自行决定。我把我的研究论据放在下面。
Arguments to use role="presentation"on tablists
用于role="presentation"选项卡列表的参数
- An example from w3.org explains exactly what is going on here (but note that role=tablist is required): https://www.w3.org/TR/wai-aria-practices/#presentation_role
- Last example from the actual ARIA specification https://www.w3.org/TR/wai-aria-1.1/#presentation
- Blog post by Marco, as mentioned in the answer from @peater https://marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/
- Paypal Accessibility plugin implements them too, which is the point how it got into Bootstrap 3.x https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#tab-panel
- w3.org 的一个例子解释了这里发生的事情（但请注意，role=tablist 是必需的）：https://www.w3.org/TR/wai-aria-practices/#presentation_role
- 来自实际 ARIA 规范的最后一个例子https://www.w3.org/TR/wai-aria-1.1/#presentation
- Marco 的博客文章，如@peater https://marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/的回答中所述
- Paypal Accessibility 插件也实现了它们，这就是它如何进入 Bootstrap 3.x https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#tab-panel
