为什么引导选项卡具有角色=“演示”？ [英] Why do Bootstrap tabs have role="presentation"?

问题描述

我正在研究从Bootstrap框架扩展的设计系统。关键目标之一是可访问性。实施Bootstrap选项卡时，我看到它们将 role = presentation 应用于其导航列表中的列表项。

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模板中收集了一些测试HTML：

So I put together a little chunk of test HTML from the Bootstrap template:

<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 ARIA spec says that presentation is a role for which:

预期用途是当元素用于更改
页面的外观但不具有所有功能，交互或结构性的
相关性时

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> 元素与使用辅助功能设备的人员在结构上相关，因为它们告诉您存在多少个选项卡。例如，如果您发现第三个选项卡保存了您感兴趣的信息，请导航至列表，然后知道有三个选项卡可以让您更快地找到所需的信息。

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.

此外，当使用ChromeVox访问该测试HTML时，列表将以相同的方式声明。因此，看来角色没有任何实际作用。

Also, when accessing that test HTML with ChromeVox, the lists are announced identically. So it seems that the role doesn't have any practical effect.

我已经用Google搜索了这个问题，但是尚未找到任何讨论。那么，有谁知道为什么它是Bootstrap框架的一部分？

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?

推荐答案

请参阅Marco关于<的可访问选项卡的文章< a href = https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ rel = noreferrer> https：//www.marcozehe .de / 2013/02/02 / advanced-aria-tip-1-tabs-in-web-apps /

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/

他的实现具有<$ c li上的$ c> role = presentation 表示屏幕阅读器应忽略列表项本身，然后在将角色映射到预期目标的链接上添加 tab角色屏幕阅读器可识别的元素类型。

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."

引导程序可访问性项目中的一个问题中提出了一个要点（ https://github.com/paypal/bootstrap-accessibility-plugin/issues/59 ）是（对还是错）标签通常用作导航，因此始终包含角色标签列表和标签。正如Marco的文章所述：在许多情况下，制表符都不是适当的语义。

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."

顺便说一句，由于屏幕阅读器和浏览器无法以相同方式支持此功能。 （有关该内容的文章，请参见本文： http://john.foliot.ca/aria-hidden / ）

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/)

这篇关于为什么引导选项卡具有角色=“演示”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！