NVDA屏幕阅读器忽略time元素问题求助

核心问题分析 #

• NVDA默认不会自动播报<time>的datetime属性内容，仅读取元素内的可见文本；
• 文本中的Fr.存在语义歧义，被NVDA误识别为瑞士法郎（Franc）的缩写，而非德语语境中周五（Freitag）的缩写。

无需ARIA的解决方案 #

1. 消除文本歧义，优化可见内容 #

将易混淆的缩写格式调整为无歧义写法，同时保留视觉上的缩写样式：

<time datetime="2023-02-13T00:00:00+0100">
  Fr 13. 00:00 Uhr
</time>

去掉Fr.后的句点，避免NVDA将其关联为货币单位。若必须保留句点，可用<span>拆分文本切断歧义关联：

<time datetime="2023-02-13T00:00:00+0100">
  <span>Fr</span>. 13. 00:00 Uhr
</time>

2. 视觉隐藏完整日期文本（兼顾视觉缩写与屏幕阅读器准确播报） #

如果需要保留视觉缩写格式，同时让屏幕阅读器读取完整无歧义的日期，可使用CSS视觉隐藏类添加完整文本（不依赖ARIA）：
首先定义视觉隐藏样式：

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

对应的HTML结构：

<time datetime="2023-02-13T00:00:00+0100">
  <span class="sr-only">Freitag, 13. Februar 2023, 00:00 Uhr</span>
  Fr. 13. 00:00 Uhr
</time>

视觉上仍显示缩写，屏幕阅读器会优先读取视觉隐藏的完整文本，同时<time>的语义属性也能被辅助技术正确识别。

3. 确保NVDA与浏览器的兼容性 #

• 使用最新版本的NVDA（2023.1及以上）和现代浏览器（Chrome 100+/Firefox 90+），旧版本对<time>元素的语义支持不完善；
• 切换到NVDA的文档结构浏览模式（按Insert + F7），可查看页面中的语义元素，确认<time>是否被正确识别。

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