HTML time元素的屏幕阅读器无障碍优化问题求助

问题出在<time>作为可见元素时，屏幕阅读器会同时读取它的文本内容和你设置的aria-label，导致重复播报。要实现仅读取“arrives at 15:00”，可以通过以下方式修改代码：

{(value: string) => (
  <time dateTime={arriveAt} aria-label={`Arrives at ${value}`}>
    <span aria-hidden="true">{value}</span>
  </time>
)}

原理说明 #

• aria-label：提供屏幕阅读器需要播报的完整上下文文本。
• aria-hidden="true"：包裹显示的时间文本，让屏幕阅读器忽略这部分内容，避免重复读取。
• 保留dateTime属性：确保时间语义正确，屏幕阅读器仍能识别这是一个时间元素（但不会额外播报冗余内容）。

另外注意，dateTime的取值要符合ISO 8601标准（比如"2024-05-20T15:00:00"），这样时间语义的解析会更准确。

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