VoiceOver盲文显示器聚焦时，视频currentTime动态更新失效问题求助

数据老陈

2026-7-12

解决方案：iOS Safari盲文显示器实时更新视频时间

针对iOS16 Safari中，盲文显示器聚焦时视频currentTime无法实时更新的问题，可通过以下两种方案解决：

方案一：结合`aria-atomic`与`aria-live`优化现有结构

你之前仅使用aria-live="polite"未生效，核心原因是缺少aria-atomic="true"——它会强制VoiceOver（包括盲文显示器）读取整个live区域的完整内容，而非仅变化部分。调整后的HTML结构如下：

<div class="p-2 flex-grow-1 align-self-center" role="text" aria-live="polite" aria-atomic="true">
  <time datetime="PT0M0S" data-video-container-target="currentTime">0:00</time>
  <span> / </span>
  <time data-video-container-target="duration">0:00</time>
</div>

关键说明：

aria-atomic="true"：确保每次内容更新时，盲文显示器重新读取整个时间行的内容，而非仅更新的currentTime部分
保留role="text"：维持盲文显示为单行的需求
JavaScript更新时，务必同时更新<time>的文本内容和datetime属性，保证语义完整性，这有助于VoiceOver识别内容变化

方案二：替换`role="text"`为动态`aria-label`（备选）

如果方案一仍不生效，可改用aria-label动态拼接时间字符串，让盲文直接读取拼接后的文本：

<div class="p-2 flex-grow-1 align-self-center" aria-live="polite" aria-atomic="true" id="time-container">
  <time datetime="PT0M0S" data-video-container-target="currentTime">0:00</time>
  <span> / </span>
  <time data-video-container-target="duration">0:00</time>
</div>

在JavaScript更新时间时，同步更新容器的aria-label：

// 假设currentTimeText和durationText是获取到的时间字符串
const timeContainer = document.getElementById('time-container');
timeContainer.setAttribute('aria-label', `${currentTimeText} / ${durationText}`);