要让屏幕阅读器在用户悬停（或键盘聚焦）时朗读转换后的时间文本，核心是利用ARIA属性结合可访问的交互设计，下面是具体的标准实现方案：

1. 基础实现：结合title与键盘可聚焦性 #

默认情况下，<div>元素无法通过键盘聚焦，而屏幕阅读器用户可能依赖键盘导航。所以我们需要先让元素支持键盘交互，再通过title属性提供转换后的文本：

<div class="whatever" tabindex="0" title="17分钟3秒">17:03</div>

• tabindex="0"：让这个div可以被Tab键选中，确保键盘用户也能触发提示朗读
• title属性：大多数主流屏幕阅读器（如NVDA、VoiceOver）在鼠标悬停或元素获得焦点时，会自动朗读title中的文本内容

2. 增强兼容性：使用ARIA提示属性 #

如果需要更明确的语义提示，可以搭配aria-describedby和隐藏的描述元素，这种方式对部分特殊场景的屏幕阅读器支持更稳定：

<div class="whatever" tabindex="0" aria-describedby="time-desc">17:03</div>
<span id="time-desc" class="sr-only">17分钟3秒</span>

这里的.sr-only是一个用于视觉隐藏但仍被屏幕阅读器识别的样式类，样式代码如下：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

• aria-describedby：关联到隐藏的描述元素，屏幕阅读器在元素获得焦点或悬停时，会朗读该描述的内容
• 视觉隐藏的描述元素：避免干扰视觉用户，同时保证屏幕阅读器能读取到转换后的文本

3. 关键注意事项 #

• 不要只依赖鼠标悬停：必须支持键盘聚焦，因为很多屏幕阅读器用户并不使用鼠标操作
• 语义化优先：尽量使用标准的HTML属性和ARIA规范，避免自定义JavaScript事件（除非必要），原生属性的兼容性更可靠
• 测试兼容性：不同屏幕阅读器（VoiceOver、NVDA、JAWS）对属性的处理略有差异，建议在目标环境中测试验证

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