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

Я знаю, что 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» как одно слово.


html accessibility jaws-screen-reader
person mbm29414    schedule 24.10.2019    source источник
comment
Знаки препинания пробовали? У меня нет доступа к JAWS, но в прошлом это помогало другим читателям.   -  person Phix    schedule 24.10.2019

Ответы (2)


arrow_upward
4
arrow_downward

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

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

  • Мы привыкли группировать номера счетов, телефонов и т. д.
  • ЕСЛИ мы хотим заклинание из каждой цифры отдельно, у Челюстей есть функция: быстро вставить + стрелка вверх дважды. Другие программы чтения с экрана имеют аналогичные ярлыки.
  • Мой родной язык французский, а не английский. Хотя я нахожусь на английской странице, я могу захотеть, чтобы числа произносились по-французски, потому что для меня это проще. Навязывая ярлык, вы мешаете мне слышать цифры на французском языке.
  • И, пожалуй, лучший аргумент: что вы скажете, если по телефону назовете номер своего счета? Скажете ли вы «один два три четыре пять», «двенадцать тысяч тридцать двадцать один», «двенадцать тридцать четыре пять», еще что-нибудь? Выполнение этого небольшого упражнения, вероятно, даст вам хороший ярлык, но несколько человек, вероятно, дадут вам разные ответы.
person QuentinC    schedule 24.10.2019
comment
Это должен быть принятый ответ, перестаньте пытаться изменить опыт, просто предоставьте людям необходимые инструменты, мой ответ предназначен исключительно для крайних случаев. - person Graham Ritchie; 25.10.2019
comment
Судя по вашему ответу, вы не совсем поняли мой вопрос. Чтобы ответить на ваш третий пункт: если вместо 123456789012345AB атрибут aria-label говорит 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 A B (с пробелами между каждым символом), как это заставит английский язык вместо французского? Чтобы ответить на ваш 4-й пункт: если я просто вставлю пробелы между каждой буквой, меня не заставят преобразовывать числа в слова; Я могу оставить их как отдельные цифры. Чтобы еще раз задать мой главный вопрос: как лучше всего предоставить альтернативный текст для контента, предназначенного только для чтения? - person mbm29414; 28.10.2019
comment
Точно, если вы сделаете так, как вы здесь говорите, это не помешает мне читать числа по-французски. У меня в голове, когда я писал ответ, вы обязательно писали цифры словами. Остальное остается и особенно первая информация: элемент должен иметь роль, чтобы aria-label работал, иначе он игнорируется. - person QuentinC; 29.10.2019
comment
Я почти уверен, что числительные объявляются на языке, заданном атрибутом lang, который вы не забудете вставить в свой открывающий тег <html>. (При условии, что синтезатор речи, к которому подключена ваша программа чтения с экрана, поддерживает этот язык.) Синтезаторы речи, безусловно, различаются тем, как они обрабатывают цифры. - person brennanyoung; 31.10.2019

arrow_upward
0
arrow_downward

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

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

Это необязательный переключатель в поле.

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

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

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

Прелесть этого способа в том, что, как сказал 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>

person Graham Ritchie    schedule 25.10.2019