工具提示的实现：悬停与聚焦状态下的无障碍信息

工具提示（Tooltip）是一种小型的、上下文相关的帮助信息，当用户将鼠标指针悬停在某个元素上或聚焦于该元素时出现。它们可以提供额外信息、阐明元素用途或提供功能使用提示。然而，如果实现不当，工具提示很容易成为无障碍性的噩梦。本指南概述了创建对包括残障人士在内的所有人都可用的工具提示的最佳实践。

为何工具提示的无障碍性至关重要

无障碍性不仅关乎合规，更关乎为每个人创造更好的用户体验。当工具提示不具备无障碍性时，可能会将依赖屏幕阅读器、键盘导航或语音输入等辅助技术的用户排除在外。请思考以下场景：

• 屏幕阅读器用户：如果工具提示没有被正确标记，屏幕阅读器可能不会播报其存在或内容。
• 键盘用户：如果工具提示仅在悬停时出现，键盘用户将无法访问它。
• 有运动障碍的用户：悬停交互所需的精确鼠标移动可能具有挑战性，甚至无法完成。
• 有认知障碍的用户：时机不当或令人困惑的工具提示会造成挫败感并妨碍理解。

通过遵循无障碍性最佳实践，我们可以确保工具提示是增强而非损害所有用户的体验。

无障碍工具提示的关键原则

以下原则对于创建无障碍工具提示至关重要：

1. 提供替代访问方式：确保工具提示可通过悬停和键盘聚焦两种方式访问。
2. 使用 ARIA 属性：使用 ARIA（Accessible Rich Internet Applications）属性来向辅助技术正确识别和描述工具提示。
3. 管理焦点：控制工具提示显示和隐藏时焦点的去向。
4. 确保足够的对比度：在工具提示文本和背景之间提供足够的颜色对比度。
5. 留出足够的时间：给用户足够的时间来阅读工具提示内容。
6. 使其可关闭：提供一种明确的方式来关闭工具提示。
7. 避免过度使用：谨慎使用工具提示，仅在必要时使用。

实现技术

1. 使用悬停和聚焦

无障碍工具提示最关键的一点是确保它们对鼠标和键盘用户都可用。这意味着工具提示应该在元素悬停和接收焦点时都能出现。

HTML：

<a href="#" aria-describedby="tooltip-example">示例链接</a>
<div id="tooltip-example" role="tooltip" style="display: none;">这是一个示例工具提示。</div>

CSS：

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* 确保工具提示在顶层 */
}

解释：

• aria-describedby：此属性使用其 ID 将链接与工具提示元素关联起来。这会告知辅助技术，该工具提示为链接提供了额外信息。
• role="tooltip"：此 ARIA 角色将元素标识为工具提示。
• CSS 使用相邻兄弟选择器（+）在链接被悬停或聚焦时显示工具提示。

JavaScript（高级控制 - 可选）：

虽然 CSS 可以处理简单的显示/隐藏，但 JavaScript 允许进行更强大的控制，尤其是在工具提示是动态生成或需要更复杂行为时。

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. 使用 ARIA 属性

ARIA 属性对于向辅助技术提供语义信息至关重要。以下是关键属性的分解：

• aria-describedby：如前所述，此属性建立触发元素和工具提示元素之间的关系。
• role="tooltip"：此属性明确将元素定义为工具提示。
• aria-hidden="true"/aria-hidden="false"： 使用这些来指示工具提示当前是否对辅助技术可见。当工具提示隐藏时，设置 aria-hidden="true"。当它可见时，设置 aria-hidden="false"。这在使用 JavaScript 控制工具提示的可见性时尤其重要。

示例：

<button aria-describedby="help-tooltip">提交</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">点击此处提交表单。</div>

JavaScript（用于 aria-hidden）：

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. 管理焦点

当工具提示出现时，它通常*不应该*从触发元素上窃取焦点。焦点应保留在触发工具提示的元素上。这确保了键盘用户可以继续浏览页面而不会受到意外干扰。

然而，在某些情况下，您可能*希望*将焦点移动到工具提示上，特别是当工具提示包含交互式元素（例如链接、按钮）时。在这种情况下，请确保：

• 工具提示在视觉上是独特的，以表明它获得了焦点。
• 有一种明确的方法将焦点返回到原始触发元素（例如，工具提示内的关闭按钮）。

在大多数情况下，为了简单和可用性，最好避免在工具提示本身内部进行焦点管理。

4. 确保足够的对比度

颜色对比度对于可读性至关重要。请确保工具提示中的文本颜色与背景颜色有足够的对比度。《网页内容无障碍指南》（WCAG）建议，正常文本的对比度至少为 4.5:1，大号文本（18pt 或 14pt 粗体）的对比度至少为 3:1。

使用在线对比度检查器来验证您的颜色选择是否符合无障碍标准。对比度检查器的示例如下：

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

示例（良好对比度）：

.tooltip {
  background-color: #000;
  color: #fff;
}

示例（不良对比度）：

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. 留出足够的时间

用户需要足够的时间来阅读工具提示内容。避免工具提示过快消失。虽然没有一个固定的神奇数字，但目标是至少显示几秒钟。此外，只要用户悬停在或聚焦于触发元素上，工具提示就应该保持可见。如果由于其他事件需要关闭工具提示，请提供一个指示器，表明工具提示即将关闭。

如果工具提示内容很长，可以考虑提供一种方式让用户手动关闭工具提示（例如，一个关闭按钮或按 Escape 键）。

6. 使其可关闭

虽然当用户将鼠标移开或移除焦点时，工具提示通常会自动消失，但提供一种明确的手动关闭方式是一个好习惯，特别是对于内容较长的工具提示或包含交互元素的工具提示。

关闭工具提示的方法：

• 关闭按钮：在工具提示内包含一个视觉上突出的关闭按钮。
• Escape 键：允许用户通过按 Escape 键来关闭工具提示。
• 点击外部：当用户点击工具提示和触发元素之外的任何地方时，关闭工具提示。（请谨慎使用，因为它可能会造成干扰）。

示例（关闭按钮）：

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  这是我的工具提示内容。
  <button onclick="hideTooltip()">关闭</button>
</div>

示例（Escape 键）：

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // 替换为您的实际隐藏工具提示函数
  }
});

7. 避免过度使用

工具提示应谨慎使用，并且仅在它们提供真正有用的信息时才使用。过度使用工具提示会使界面混乱，分散用户注意力，并造成令人沮丧的体验。

工具提示的替代方案：

• 清晰的标签：为表单字段、按钮和链接使用清晰且描述性的标签。
• 上下文帮助：直接在界面中相关元素附近提供帮助文本。
• 帮助文档：链接到全面的帮助文档以获取更复杂的功能说明。

高级注意事项

动态内容

如果您的工具提示内容是动态生成的（例如，从 API 加载或根据用户输入更新），请确保相应地更新 aria-describedby 属性和工具提示的可见性。使用 JavaScript 来管理这些更新。

定位

仔细考虑工具提示的定位。避免将它们放置在遮挡重要内容或导致布局变化的位置。注意不同的屏幕尺寸和分辨率，并使用 CSS 确保工具提示始终在视口内可见。

移动设备

传统上，工具提示依赖于悬停交互，这在触摸设备上是不可用的。对于移动设备，请考虑使用替代的交互方法，例如：

• 轻触：当用户轻触元素时显示工具提示。
• 长按：当用户长按元素时显示工具提示。
• 聚焦时显示：当元素接收到焦点时显示。这可以通过 JavaScript 实现，检查是否支持触摸（例如，('ontouchstart' in window)）并相应地改变显示行为。

测试您的工具提示

彻底测试您的工具提示，以确保它们对所有用户都是无障碍的。结合使用手动测试和自动化无障碍测试工具。

测试方法：

• 键盘导航：验证工具提示是否可以使用键盘访问。
• 屏幕阅读器测试：使用屏幕阅读器确保工具提示被正确播报。
• 颜色对比度分析：使用颜色对比度检查器验证足够的对比度。
• 移动端测试：在不同的移动设备和屏幕尺寸上测试工具提示。
• 自动化无障碍测试：使用像 axe DevTools、WAVE 或 Lighthouse 这样的工具来识别潜在的无障碍问题。

国际化 (i18n) 和本地化 (l10n)

在为全球受众开发工具提示时，请牢记国际化和本地化：

• 文本方向：支持从左到右（LTR）和从右到左（RTL）两种文本方向。布局时使用 CSS 逻辑属性（例如，margin-inline-start, margin-inline-end）而不是物理属性（例如，margin-left, margin-right）。
• 特定语言的翻译：为不同语言提供工具提示内容的翻译。
• 日期和时间格式：根据用户的区域设置调整日期和时间格式。
• 数字格式：为不同地区使用适当的数字格式（例如，小数点分隔符、千位分隔符）。

结论

实现无障碍的工具提示需要仔细的规划和对细节的关注。通过遵循本指南中概述的原则和技术，您可以创建出每个人，无论其能力如何，都能使用的工具提示。请记住，无障碍是一个持续的过程，因此请继续测试和完善您的工具提示，以确保它们满足所有用户的需求。

资源

• ARIA 创作实践指南 (APG) - 工具提示
• 网页内容无障碍指南 (WCAG) 2.1
• MDN Web 文档 - ARIA