ARIA：工具提示角色

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

工具提示通常会在鼠标悬停后的一两秒延迟后变得可见，或者在拥有元素收到键盘焦点后。就像它是在没有用户请求的情况下自动打开的一样，它也会在失去焦点或鼠标移出时自动关闭。当鼠标移到工具提示本身时，它必须保持打开状态，并且还应该在用户按下 Escape 键时关闭。

由于工具提示本身永远不会收到焦点，也不在选项卡顺序中，因此工具提示不能包含交互式元素，例如链接、输入或按钮。

工具提示不是“i”图标ⓘ的更详细信息的合适角色。工具提示与拥有元素直接相关。ⓘ 不是“由”详细的信息“描述”的；工具或控件是。

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

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

在拥有元素上的 aria-haspopup 属性方面，工具提示不被认为是弹出窗口，这就是我们在介绍性定义中使用“文本气泡”的原因。

虽然工具提示可能会出现和消失，但由于它的出现是自动的，而不是由用户有意控制的，因此不支持 aria-expanded 角色。

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

工具提示提供额外信息，通常不会对工具提示本身进行直接交互。它们通常通过 aria-describedby 与其定义的内容关联，该属性与主元素的 id 相连。因此，如果工具提示显式设置了可访问名称，则该名称将作为主元素的描述公开，而不是工具提示的内容，这意味着屏幕阅读器用户可能永远无法发现工具提示内容。

• 用作工具提示容器的元素设置了 role="tooltip"。
• 触发工具提示的元素使用 aria-describedby 引用工具提示元素。

Escape

关闭工具提示

工具提示应该在获得焦点或元素悬停时出现，无需额外交互。当拥有元素的焦点丢失或鼠标移出拥有元素和工具提示时，它应该自动消失。虽然工具提示不会获得焦点，但如果工具提示已打开，则 Escape 应该将其关闭。

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

<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 实例化工具提示。使用 JavaScript 将类名更改为一个隐藏工具提示的类（当用户按下 Escape 键时）。

[role="tooltip"],
.hidetooltip.hidetooltip.hidetooltip + [role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"] {
  visibility: visible;
}

以上代码使用 CSS 在默认状态或如果使用 JavaScript 添加了 hidetooltip 类（当用户按下 Escape 键时）隐藏工具提示，具有很高的特异性以确保工具提示不会显示。当拥有元素获得焦点时，它将获得相对定位，并且工具提示将变得可见。

如果信息足够重要到需要使用工具提示，那么它是否也足够重要到需要始终可见？

工具提示在悬停时必须保持打开状态，即使这在技术上意味着鼠标移出了拥有元素。由于在悬停时出现的內容可能难以或无法感知（如果用户需要将鼠标指针保持在触发器上），WCAG 1.4.13 规定，可见的內容应该是持久的，这意味着它不应该在没有用户操作的情况下消失。

请考虑撰写清晰、简洁且始终可见的描述，而不是使用工具提示隐藏重要信息。如果您有空间，请不要使用工具提示或切换提示。只需提供清晰的标签和足够的正文内容。

• dialog 角色
• CSS：:focus 伪类
• 工具提示和切换提示 由 Heydon Pickering 撰写
• 理解 SC 1.4.13：悬停或聚焦时的内容（WCAG AA 级别）