HTML 时间元素的屏幕阅读器辅助功能-解网

问：

这是一个非常简单的问题，但很难找到任何资源。

基本上我有一个时间元素

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

如您所见，我尝试使用 on 元素来完成这项工作，但它读出时间元素中的时间，然后是文本元素中的时间，然后读取“到达时间结束”。aria-labeltime

我只是希望该元素显示为示例并读出，以便为用户提供该上下文。谁能帮我实现这一目标？15:00arrives at 15:00

谢谢

HTML 可访问性语义标记 WCAG

你想要实现的目标不是很清楚。许多屏幕阅读器仅在元素是交互式/可聚焦时才读取 aria-label。你不是，也不应该是可聚焦的。为了获得最大的兼容性，如果您只想为屏幕阅读器用户添加精度，我建议使用视觉上隐藏的文本。<time>

0赞 Sean 3/31/2023

视力正常的用户如何知道这是到达时间（而不是出发时间）？

答：

1赞 slugolicious 3/29/2023 #1

最好从语义 HTML 元素开始，例如 <time> 或 <abbr>但不幸的是，目前没有对这些元素的良好屏幕阅读器支持（没有双关语）。

注意：OP 中没有提到，而只是语义 HTML 的另一个示例，它没有良好的屏幕阅读器支持。<abbr>

这并不意味着你不应该使用这些元素，但现在你必须解决缺乏支持的问题。对于元素，屏幕阅读器通常可以正确读取它，尤其是在使用 datetime 属性时。<time>

但是，您最初的问题听起来不像时间本身是一个问题，而是您想添加额外的文本以供阅读，并且您目前正在通过 .我不建议为此目的。这种类型的问题经常出现，你可以看到我的想法（基于 w3.org 文档）关于这些类似问题的答案：aria-labelaria-labelaria-label

如果要为屏幕阅读器添加额外的文本，以便在页面上不可见，则可以使用“仅 sr”类型类。（“屏幕阅读器读出组...”中也提到了“仅 sr”类。上面的答案链接。

<span class="sr-only">Arrives at </span>
<time dateTime={arriveAt}>{value}</time>

HTML 时间元素的屏幕阅读器辅助功能