role="tooltip" 仅为语义标记，需配合 aria-describedby 关联、显式显示控制（非仅 :hover）、可访问dom状态及触发器的可访问名称（如 aria-label）才能生效。
role="tooltip" 本身不触发悬停提示
HTML 中 role="tooltip" 只是语义标记，告诉辅助技术“这个元素是 tooltip”，但浏览器不会自动显示它，也不会监听鼠标悬停、键盘焦点或屏幕阅读器交互。它必须配合显式控制逻辑（如 aria-describedby + 目标元素关联）和可见性管理（CSS 或 JS 控制显示/隐藏）才能起作用。
- 常见错误：只写
<div role="tooltip">保存成功</div>，没关联到按钮，也没控制显示，结果对所有人（包括屏幕阅读器用户）都不可见 - 正确做法：tooltip 元素需通过
aria-describedby指向按钮的id，且该 tooltip 必须在 DOM 中与按钮存在可访问的关联（不能 display: none 或 aria-hidden="true"） - 悬停（hover）不是无障碍必需行为——键盘用户靠 focus，触摸设备靠 tap，所以必须同时支持
:focus-within、aria-expanded或 JS 的 focus/blur 事件
图标按钮必须有明确的可访问名称
纯图标按钮（如 <button><svg>...</svg></button>）没有文字内容，屏幕阅读器无法读出功能。仅靠 role="tooltip" 不提供名称，它只是补充说明，不是替代方案。
- 优先用
aria-label：例如<button aria-label="删除项目"><svg>...</svg></button> - 若 tooltip 内容就是按钮功能描述，可复用：用
aria-label提供名称，再用aria-describedby指向 tooltip 元素作额外说明（如“删除项目，确认后不可恢复”） - 避免仅靠
title属性——它不被所有屏幕阅读器可靠支持，且无键盘触发机制
tooltip 元素必须满足可访问性基础条件
即使写了 role="tooltip"，如果元素本身不可访问，辅助技术仍会忽略它。关键约束有三个：
- 不能有
aria-hidden="true"—— 否则屏幕阅读器直接跳过 - 不能用
display: none或visibility: hidden—— 这会让元素脱离可访问树；推荐用opacity: 0; pointer-events: none;+transform配合过渡动画 - 必须有明确的
id，且被目标按钮的aria-describedby引用，例如：<button aria-describedby="save-tooltip">?</button><div id="save-tooltip" role="tooltip">点击保存当前设置</div>
不要依赖 CSS :hover 实现无障碍 tooltip
仅用 :hover 显示 tooltip 在键盘或触摸设备上完全失效。真实可用的方案必须结合 JavaScript 或原生 HTML 行为。
- 最简健壮方案：用
details/summary模拟（支持 keyboard + screen reader），但样式受限 - 推荐 JS 方案：监听按钮的
focus、blur、mouseenter、mouseleave，统一控制 tooltip 的aria-hidden和 CSS class；同时确保 tooltip 元素在焦点顺序中可 tab 到（加tabindex="-1"） - 注意延迟：鼠标移入立即显示易误触，建议加 300ms 延迟；但键盘 focus 应立刻显示，无需延迟
role="tooltip" 生效的，不是加个属性，而是补全整个可访问链路：可命名的触发器 + 显式关联 + 可感知的显示控制 + 键盘友好生命周期。漏掉任意一环，对残障用户就等于不存在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
