JAWS / Web-Aim Есть ли способ указать текст как "время" для программ чтения с экрана?

Question

Если JAWS встречает время на моей странице, вот так:

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

Затем он читается как "Двадцать двоеточие пятнадцать", что на самом деле не похоже на время. Есть ли способ указать, что это время?

Возможно, поместите текст, который читается, но не воспринимается средним пользователем как "Двадцать двоеточие пятнадцать часов", или что-то может быть жизнеспособным ответом.

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

Семантически, вы должны использовать <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>