logo标签列表

为什么Bootstrap标签页具有role="presentation"属性？

twitter-bootstrapaccessibilitywai-aria
27

我正在设计一个基于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规范指出：呈现（presentation）是一种角色，适用于元素改变页面外观但没有与元素类型暗示的所有功能、交互或结构相关性的情况。
在我看来，li元素对于使用辅助功能设备的人来说具有结构相关性，因为它们告诉您有多少个选项卡存在。例如，如果您发现第三个选项卡包含您感兴趣的信息，导航到列表并知道有三个选项卡将使您更快地找到所需内容。
此外，使用ChromeVox访问该测试HTML时，列表的公告相同。因此，该角色似乎没有任何实际效果。
我已经在谷歌上搜索了这个问题，但没有找到任何讨论。那么，有人知道这是Bootstrap框架的一部分原因吗？
如果您还没有查看，请访问 https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/。那里有一个观点-您不希望将导航栏宣布为“列表”。此外，关于差异，您可能希望删除超链接并查看会发生什么 - 规范指出，“role = presentation不会导致元素内包含的内容从可访问性树中移除。” - potatopeelings
我在ChromeVox中尝试了一组链接和一个列表，可以听到它们之间的区别。我不确定屏幕阅读器用户更喜欢哪种方法。如果没有列表，角色似乎变得更不相关，因为无论如何ChromeVox都会忽略span。删除超链接会导致键盘无法访问，这是适得其反的。 - theJBRU
1
我同意@theJBRU的观点，这没有任何意义。由于角色tablist、tab和tabpane的存在，Bootstrap似乎已经决定用一种被广泛误解的角色来做事情（因为文档不够明确）。Bootstrap确实使用tabpanel，文档中说应该与其他两个角色一起使用。 - Jason
值得一提的是，此处列出的所有WAI-ARIA角色，在1.1版本的草案中中包括presentation，以及在1.0版本中。有些措辞标记为presentation和以下内容将不会在屏幕阅读器中显示，这让我有点担心。Bootstrap在这里使用它有点令人惊讶。 - ruffin
提供的示例中，<a> 标签缺少其片段标识符。通常情况下，a 标签会被强制使用 # 在 href 中以便将它们放入焦点顺序中，但如果示例基本上是从 Bootstrap 文档中复制而来，则可能是它们正在使用演示角色来隐藏后代锚点，以便为更易访问的文档提供无障碍性 API。 - vhs
3个回答
10
请查看Marco关于可访问标签的文章https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/。
他的实现在li上使用role =“presentation”，以指示“屏幕阅读器应忽略列表项”，然后在链接上添加“tab”角色，“将角色映射到预期的屏幕阅读器可识别元素类型”。
在bootstrap可访问性项目（https://github.com/paypal/bootstrap-accessibility-plugin/issues/59）中提出的一个观点是（正确或错误），选项卡通常用作导航，因此总是包括tablist和tab角色是不合适的。正如Marco的文章所指出的：“有许多情况下选项卡不是适当的语义。”

顺便说一下，由于不同屏幕阅读器和浏览器的组合方式不支持此功能，我们的工作变得更加困难。（请参见此文章以了解详情：http://john.foliot.ca/aria-hidden/）

2

role=presentation在<li>上只有在<ul>上也有role时才需要，例如<ul role="tablist">。

这是因为<li>属于<ul>而不属于<ul role="tablist">。这样的元素不再是<ul>了。现在它与<div role="tablist">相同-通过分配role来更改其语义。您可以从Chrome Dev Tools运行无障碍审核，您将收到警告“列表项（<li>）未包含在给定示例中的<ul>或<ol>父元素内。” 它将无效。

我希望这能澄清问题。

您是否需要role？

这要看你想要实现的是实际选项卡（选项卡通过JavaScript动态切换）还是一个简单的导航（例如可以被收藏夹保存和/或在新页面中打开的标准链接）。在视觉上，两者都可以被样式化为选项卡，但在结构上，在简单的导航情况下，你不应该实现任何tablist、tab、tabpanel、presentation等角色...只需让它们成为带有链接的标准列表结构。

在tablists上使用 role ="presentation"的参数

此外...

在Bootstrap 3.4中，他们仍然继续使用role="presentation"。https://getbootstrap.com/docs/3.4/javascript/#tabs-usage 在Bootstrap 4.3中，他们决定不再使用role="presentation"，我个人认为这是错误的，并且它未通过Chrome Dev Tools的辅助功能审核。https://getbootstrap.com/docs/4.3/components/navs/
2
7
我理解为什么要使用role=presentation，但我不明白为什么它默认被应用于Bootstrap框架中。从我的测试结果来看，它似乎没有预期的效果。目前我已经将其移除，但会继续研究。 - theJBRU
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接