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 element и его 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 --> 

Answer 2

Семантически, вы должны использовать элемент <abbr> с атрибутом title. Проблема в том, что экранные считыватели по умолчанию не считывают аббревиатуру.

Чтобы обойти эту проблему, вы можете использовать комбинацию из 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>