Предоставить альтернативный текст для JAWS для

Question

Я знаю, что JAWS по умолчанию игнорирует теги <span/>. Моя команда обошла эту проблему. Однако теперь у нас есть некоторый контент, который отображается с помощью тегов <span/>, где текст, отображаемый для зрячих пользователей, не очень хорошо работает с JAWS, считывающим информацию. В нашем конкретном случае это будут международные номера банковских счетов, которые могут содержать буквы. В этом случае вместо чтения отдельных цифр JAWS пытается прочитать содержимое как слово, что приводит к предсказуемо плохому выводу.

Итак, пара вопросов:

1. Учитывая, чтоэто часть большой страницы, на которую у меня нет ни времени, ни разрешения на рефакторинг, есть ли способ заставить это работать в рамках ограничений, которые я описал?
2. Если бы вы написали такую ​​страницу, как этас нуля, какова лучшая практика для создания страницы так, чтобы у меня была возможность предоставлять «альтернативный» текст для неинтерактивного контента только для чтения?

Если это поможет, то результат яЯ предполагаю, что-то вроде этого:

<span id="some-label" aria-label="1 2 3 4 5 A">12345A</span>

Мы не смогли придумать какую-либо комбинацию методов, которые бы JAWS читал: «1 2 3 4 5 A» вместочитать "12345A" как одно слово.

Answer 1

Технический ответ всегда одинаков и повторялся много раз здесь и в других местах: aria-label не действует, если вы также не назначаете роль .

Сейчас, для большего количества опыта пользователя, я сам слепой, и я могу сказать Вам, это не было бы хорошей идеей навязывать заклинание каждой цифре индивидуально.

• Мы используем всгруппированные номера счетов, телефонов и т. д.
• Если мы хотим, чтобы каждая цифра была заклинанием отдельно, у Jaws есть функция: быстро вставлять + стрелку вверх дважды. Другие программы чтения с экрана имеют похожие ярлыки.
• Мой родной язык французский, а не английский. Хотя я нахожусь на английской странице, я, возможно, захочу, чтобы цифры говорили по-французски, потому что мне легче. Применяя ярлык, вы мешаете мне слышать номера на французском языке.
• И, возможно, лучший аргумент: что вы собираетесь сказать, если вы дадите номер своего счета по телефону? Будете ли вы сказать «один два три четыре пять», «двенадцать тысяч тридцатьсот двадцать один», «двенадцать тридцать четыре пять», что-то еще? Выполнение этого небольшого упражнения, вероятно, даст вам хороший ярлык, но несколько человек, вероятно, дадут вам разные ответы.

Answer 2

Квентин дал очень хороший ответ, который охватывает 99,9% всех сценариев.

Однако есть некоторые менее опытные пользователи программ чтения с экрана, которые могут извлечь выгоду из того, что они читают по буквам.

Это должно быть необязательным переключателем на поле.

Способ реализации буквенного считывания заключается в следующем, но , пожалуйста, используйтеЭто экономно и с учетом вышеупомянутых сценариев.

Хитрость заключается в том, чтобы использовать визуальный скрытый класс (только для чтения с экрана - vh в этом примере), чтобы добавить точки остановки между каждым элементом.

Удостоверьтесь, что все плотно упаковано, иначе у вас останутся ненужные пробелы из-за использования <span> s.

Прелесть этого способа, как сказал QuentiC, - некоторые люди используют другой язык и ARIA метки не всегда переводятся, цифры в приведенном ниже примере должны.

.vh { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<div>
A<span class="vh">.</span>1<span class="vh">.</span>C<span class="vh">.</span>
</div>