内联tooltip的正确无障碍实现方式是哪种？

你给出的两种方案都不完全满足WCAG无障碍要求，先分别说明问题，再给对应场景的正确实现：

两种现有方案的问题 #

• 方案1（title属性+JS替换自定义tooltip）
  原生title属性本身的无障碍适配缺陷非常明显：键盘聚焦到元素时不会触发提示、屏幕阅读器对非交互元素上的title读取逻辑极不统一（大部分默认不会播报）、触屏设备完全无法触发原生title提示。就算用JS替换成自定义浮层，来回切换title属性的逻辑很容易出现状态不同步的bug，也没有补上键盘、触屏、屏幕阅读器的适配缺口。
  对应示例代码：

  <p>For here am I sitting in a <span title="A spaceship">tin can</span> far above the world planet earth...</p>
  

  这段代码里的span是非交互元素，普通键盘用户根本没法聚焦到它，屏幕阅读器也不会主动播报title里的内容。
• 方案2（aria-label搭配role="tooltip"）
  首先代码里存在笔误，正确属性名是aria-label不是aria=label；其次role="tooltip"是给弹出的提示浮层元素用的角色，绝对不能加在触发提示的元素上。另外非交互元素上添加的aria-label，绝大多数屏幕阅读器默认不会读取，加了也等于无效。
  对应错误示例：

  <!-- 错误写法：role="tooltip"错加在触发元素上，非交互元素的aria-label不会被播报 -->
  <p>For here am I sitting in a <span aria-label="A spaceship" role="tooltip">tin can</span> far above the world planet earth...</p>
  

内联场景的正确实现 #

针对你提到的「提示文本存储在触发元素自身属性、tooltip与触发元素不分离」的内联场景，满足无障碍要求的实现要覆盖几个核心规则：

• 如果触发提示的是正文里的词汇这类非交互元素，要给它加tabindex="0"，让键盘用户可以通过Tab键聚焦到元素，触发提示；
• role="tooltip"只能加在弹出的提示内容容器上，不要加在触发元素上；如果提示内容直接嵌套在触发元素内部，甚至不需要额外加这个role，屏幕阅读器可以自然识别内部文本；
• 触发逻辑要同时覆盖三种操作：鼠标悬停、键盘聚焦、触屏长按，提示消失要留至少1-2秒的延迟，避免用户鼠标轻微偏移就看不到内容；
• 提示文本和背景的颜色对比度要满足4.5:1的WCAG标准，字号不要小于正文的90%。

拿你举的"tin can"注释为"A spaceship"的场景举例，最简单的合规写法如下：

<p>For here am I sitting in a 
  <span tabindex="0" class="inline-tooltip-trigger">tin can
    <span class="inline-tooltip-content">A spaceship</span>
  </span> 
  far above the world planet earth...</p>

配套CSS写好交互：默认隐藏.inline-tooltip-content，当父级trigger触发hover、focus、long-press状态时显示提示层即可，不需要额外加冗余的ARIA属性，因为提示内容本身就在触发元素内部，屏幕阅读器可以正常播报所有内容。

内容的提问来源于stack exchange，提问作者CyberJ