JAWS / Web-Aim 有没有办法将文本指定为屏幕阅读器的"时间"？

Question

如果JAWS在我的页面中遇到这样的时间:

<div>
  <span>20:15</span> <!-- either of these times -->
  <span>04:15</span> <!-- either of these times -->
</div>

然后它读取它们为"20:15"，这听起来不像一个时间。有什么方法可以指明这是一个时间点吗?

也许将普通用户无法阅读但无法看到的文本设置为"Twenty: fifteen o'clock"或其他可能可行的答案

Answer 1

是否有办法指定这是一个时间?

HTML5提供了time元素和它的datetime属性。

我不能测试JAWS是否能识别它，但如果不能，那就太可惜了(他们当然应该修复这个问题)。

对于时间"20:15"，标记可以是:

<time>20:15</time> 
<!-- because "20:15" is a valid time string -->
<time datetime="20:15">20:15</time>
<!-- the datetime attribute is not needed here -->
<time datetime="20:15">…</time>
<!-- could have any content, as long as the datetime attribute contains a valid time string -->

Answer 2

在语义上，您应该使用带有title属性的<abbr>元素。问题是屏幕阅读器默认不读出缩写。

要解决这个问题，您可以结合使用aria-hidden和屏幕外技术，例如:

  <span aria-hidden="true">20:15</span>
  <span class="offscreen">Twenty colon fifteen o'clock</span>

屏幕外为:

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

根据ARIA规范，这些技术也应该可以工作，但是(与所有ARIA一样)您需要测试它们以查看它们在实践中是否实际工作

<span aria-label="twenty hours and fifteen o'clock"><span aria-hidden="true">20:15</span></span>

和

<abbr title="twenty hours and fifteen o'clock" aria-label="twenty hours and fifteen o'clock">20:15</abbr>