JAWS/Web-Aim 有什么方法可以为屏幕阅读器指定文本 "a time" 吗？

Question

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

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

然后它将它们读作 "Twenty colon fifteen"，这听起来不像一个时间。有没有办法指定这是一个时间？

也许将普通用户阅读但看不到的文本作为 "Twenty colon fifteen o'clock" 或其他可能是可行的答案。

Answer 1

从语义上讲，您应该使用带有 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>

Answer 2

Is there any way to specify that this is a time?

HTML5 提供 time element and its datetime attribute。

我无法测试 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 -->

JAWS/Web-Aim 有什么方法可以为屏幕阅读器指定文本 "a time" 吗？

JAWS / Web-Aim Is there any way to specify text as "a time" for screen readers?

html

accessibility

wai-aria

jaws-screen-reader