Программы чтения с экрана и Javascript

Я создаю веб-сайт службы чтения для слепых и слабовидящих и использую JavaScript (с jQuery) для печати некоторых на некоторые страницы после загрузки.

Будет ли программа чтения с экрана читать содержимое, которое печатается на странице с помощью jquery после загрузки страницы?

С этой страницы - «Как правило, [программы чтения с экрана] получают доступ к DOM (объектной модели документа ), и они используют API-интерфейсы браузера (интерфейсы прикладного программирования) для получения необходимой информации ».

и мы знаем, что jQuery - это библиотека для работы с DOM.

Возникает вопрос ... берут ли программы чтения с экрана копию всей модели DOM, а затем разбирают ее и читают? Или они читают DOM, тот самый, над которым работает jQuery?

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

<div id="now-playing-div"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector);
});

</script>

Итак, как вы можете видеть, если программа чтения с экрана не читает то, что javascript / jquery печатает в # now-plays-div, тогда она ничего не читает. Затем мы начали получать несколько электронных писем от сбитых с толку слушателей, которые задавались вопросом, что случилось со ссылкой «Сейчас играет».

Итак, сегодня утром я добавил это:

<div id='no-js'>Please enable JavaScript to receive this content.</div>

<script>
$( document ).ready( function() {
  $('#no-js').toggle();
});

</script>

Но если проблема не в том, что необходимо включить JavaScript (недавний опрос показывает, что 99% программ чтения с экрана у пользователей включен JavaScript), проблема не решена и усугубляется тем, что теперь пользователь программы чтения с экрана может подумать, что JavaScript не включен.

Что делать??


person Dan Mantyla    schedule 25.05.2016    source источник
comment
Вам нужно будет проконсультироваться с конкретным поставщиком программ чтения с экрана. на это невозможно ответить - они ДОЛЖНЫ опрашивать live dom и, следовательно, видеть какие-либо изменения. Но если конкретный запрашивает один раз и кеширует, то его, вероятно, не следует использовать. статические страницы на самом деле больше не существуют, и работа с немедленно мертвой / бесполезной / устаревшей копией страницы чрезвычайно бессмысленна / глупа.   -  person Marc B    schedule 25.05.2016
comment
Есть хороший способ сначала проверить это - установить NVDA, бесплатную программу чтения с экрана для Windows. Если у вас Mac, попробуйте VoiceOver. Вы также можете загрузить и запустить пробную версию JAWS. Получите видеообзор NVDA или сочетания клавиш для всех. После этого изучите живые регионы ARIA .   -  person aardrian    schedule 25.05.2016


Ответы (3)


Вы можете проверить это, не зная, как программы чтения с экрана анализируют DOM. Я предлагаю этот ответ в первую очередь потому, что вы не предложили никакого кода для тестирования («кое-что на некоторых страницах» не является кодом для тестирования), а ваш пример не обеспечивает достаточного контекста.

  • Установите NVDA, бесплатную программу чтения с экрана для Windows.
  • На Mac включите VoiceOver.
  • Если вы используете Ubuntu / Gnome, установите Orca
  • Загрузите и запустите пробную версию JAWS.
  • Если на iOS, включите VoiceOver.
  • Если на Android, включите TalkBack.
  • Черт возьми, попробуйте Экранный диктор в Windows.

Есть множество руководств, которые помогут вам начать работу. Вот парочка:

Затем, если вы обнаружите, что ваш сценарий изменяет DOM после того, как программа чтения с экрана уже проанализировала его, изучите живые регионы ARIA, а затем просмотрите поддержка браузера.

Наконец, приведенный выше пример определения того, включен ли скрипт, на самом деле не требует скрипта для работы, если вы используете элемент <noscript>:

<noscript>
 <p>
 Please enable JavaScript to receive this content.
 </p>
</noscript>

Если в браузере включен сценарий, он не будет отображаться (что хорошо). Однако это не касается случаев, когда блок сценария, который вы хотите показать, не работает по другим причинам (задержка сети, ошибки и т. Д.). Подробнее о <noscript>

Поскольку вы говорите, что «создаете веб-сайт для службы чтения для слепых и слабовидящих», вы действительно должны изучить инструменты и способы их использования.

person aardrian    schedule 25.05.2016
comment
Извините, это не было моим намерением (хотя теперь я вижу, что это звучит немного дурацко). Отчасти проблема в том, что это движущаяся цель, поэтому сложно дать простой ответ. - person aardrian; 26.05.2016

«Обычно [программы чтения с экрана] обращаются к DOM (объектной модели документа) и используют API-интерфейсы браузера (интерфейсы прикладного программирования) для получения необходимой информации».

Современные программы чтения с экрана используют API специальных возможностей. Им не нужно ничего знать о Javascript или о реальных DOM и HTML (за единственным исключением ChromeVox).

По этой причине тот же экранный ридер будет использоваться для доступа к Интернету с помощью вашего любимого браузера, для написания почты с помощью вашей любимой программы (Thunderbird, Outlook, ...) или для игры в flash player, поскольку до тех пор, пока эти программы предоставляют правильную информацию своему API доступности. Они анализируют не HTML напрямую, а доступное древовидное представление документа.

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

Теперь, очевидно, если ваш экранный ридер прочитает контент до того, как он был изменен с помощью javascript, он не будет иметь никакого представления об изменениях, сделанных javascript. В этом случае вы можете использовать атрибут aria-live.

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

person Adam    schedule 27.05.2016

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

Это делается с помощью атрибутов ARIA.

Я добавил aria-live="polite" в свой html. Параметр «Вежливо» сообщает программе чтения с экрана, что она должна прочитать новое содержимое, но не прерывать то, что в настоящее время говорится. IIRC другие настройки off и assertive.

<div id="now-playing-div" aria-live="polite"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector); // the callback will append HTML to the element via jquery with the selector as the query term
});

</script>

Прямо сейчас у меня есть парень, который ничего не видит, тестирует веб-сайт, он раньше мог видеть и научился пользоваться компьютерами, прежде чем потерял зрение. К сожалению, у него проблемы с сайтом. Проблема в том, что когда он попадает на страницу, чтобы послушать звук, он использует свои сочетания клавиш для поиска кнопки воспроизведения, но кнопки воспроизведения нет, потому что кнопка воспроизведения (jplayer) находится во всплывающем окне, которое появляется после нажатия ссылка. Он расстроен, и звонок окончен :(

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

person Dan Mantyla    schedule 08.11.2017