ARIA：tooltip 角色

描述

Tooltips 在拥有元素获得焦点或鼠标悬停但页面上又未显示时，提供关于该元素的上下文信息。Tooltip 会在短暂延迟后自动显示；用户不会主动请求它。虽然 tooltip 可以放置在任何内容上，但它们通常是工具或控件的提示，例如为具有简短标签（或完全没有标签，这是不便于访问的！）的图标提供额外内容。

Tooltip 通常会在短暂延迟（一般为一到五秒）后，响应鼠标悬停或在拥有元素获得键盘焦点后变得可见。正如它会在没有用户请求的情况下自动打开一样，它也会在焦点丢失或鼠标移出时自动关闭。当鼠标悬停在 tooltip 本身时，它必须保持打开状态，并且当用户按下 Escape 键时也应该关闭。

由于 tooltip 本身永远不会获得焦点，并且不在可选项卡排序中，因此 tooltip 不能包含链接、输入框或按钮等交互式元素。

对于“i”信息图标 ⓘ，tooltip 角色并不适用。Tooltip 直接与拥有元素相关联。ⓘ 并不是被详细信息“描述”的对象；工具或控件才是。

ARIA tooltip 角色的使用是对浏览器默认 tooltip 行为的补充。原生浏览器 tooltip 的一个例子是某些浏览器在鼠标长按悬停时显示元素的 title 属性。无法通过键盘焦点或触摸交互来激活此功能，这使得该功能无法访问。如果信息足够重要，需要包含在 tooltip 或 title 中，请考虑将其包含在可见文本中。

具有 tooltip 角色的元素应在 tooltip 显示之前或显示时，通过使用 aria-describedby 进行引用。aria-describedby 属性位于拥有元素上，而不是 tooltip 上。

从拥有元素的 aria-haspopup 属性的角度来看，tooltip 不被视为弹出窗口，这就是我们在介绍性定义中使用“文本气泡”的原因。

尽管 tooltip 可能会出现和消失，但由于其出现是自动的，而非用户故意控制，因此 aria-expanded 角色不受支持。

Tooltip 的可访问名称可以来自其内容。虽然理论上可以来自 aria-label 或 aria-labelledby，但在大多数情况下，不建议使用 ARIA 属性为 tooltip 提供可访问名称。

Tooltip 提供额外信息，通常不与 tooltip 本身直接交互。它们通常通过将 id 引用给主元素来与它们定义的（corresponding）内容相关联。因此，如果 tooltip 有一个显式设置的可访问名称，该名称将被公开为主元素的描述，而不是 tooltip 的内容，这意味着屏幕阅读器用户可能永远无法发现 tooltip 的内容。

关联的 WAI-ARIA 角色、状态和属性

作为 tooltip 容器的元素设置了 role="tooltip"。
触发 tooltip 的元素使用 aria-describedby 引用 tooltip 元素。

键盘交互

Escape: 关闭 tooltip

Tooltip 应在获得焦点或元素被悬停时出现，无需额外交互。当拥有元素的焦点丢失或鼠标移出拥有元素和 tooltip 时，它应自动消失。虽然 tooltip 不获得焦点，但如果已打开，按下 Escape 键应关闭它。

所需的 JavaScript 功能

Tooltip 通过键盘焦点和焦点移除，以及鼠标事件（鼠标悬停和鼠标移出）来显示和消失。
Tooltip 永远不会获得焦点。焦点始终保留在拥有元素上。
可以使用 Escape 键隐藏 tooltip。
鼠标悬停时 tooltip 保持打开状态。
Tooltip 只能通过 JavaScript 和 CSS 选择器隐藏。如果 JavaScript 不可用，tooltip 将显示。

示例

html

<label for="password">Password:</label>
<input aria-describedby="passwordrules" id="password" type="password" />
<div role="tooltip" id="passwordrules">
  <p>Password Rules:</p>
  <ul>
    <li>Minimum of 8 characters</li>
    <li>
      Include at least one lowercase letter, one uppercase letter, one number
      and one special character
    </li>
    <li>Unique to this website</li>
  </ul>
</div>

可以使用 CSS 来实例化 tooltip。通过 JavaScript 更改类名，当用户按下 Escape 键时，可以将其更改为隐藏 tooltip 的类。

css

[role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  /* Give some time before hiding so mouse can exit the input
  and enter the tooltip */
  transition: visibility 0.5s;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"],
[role="tooltip"]:hover,
[role="tooltip"]:focus {
  visibility: visible;
}

上述代码在默认状态下或通过 JavaScript 添加了 hide-tooltip 类（当用户按下 Escape 键时）后，使用 CSS 隐藏了 tooltip，并具有高特异性以确保 tooltip 不显示。当拥有元素获得焦点时，它会被相对定位，tooltip 变得可见。我们保持 tooltip 在鼠标悬停在 tooltip 本身时可见，这与 WCAG 1.4.13 一致。这里，我们允许光标从输入框移到 tooltip 而后者不会消失，通过在两者之间等待 0.5 秒来实现；还有其他方法可以实现这一点，例如用一个透明元素填充间隙，该元素在悬停时也保持 tooltip 可见。