Скажите программе чтения с экрана, что страница изменилась в однострочном приложении Backbone/Angular

Представьте, что у вас есть простое одностраничное приложение - независимо от того, было ли оно написано с использованием Backbone, Angular, Ember или чего-то еще.

Как вы можете показать читателю экрана, что мы изменили "страницу", когда маршрут соблюден?

В классическом приложении, когда я перемещаюсь от /index.html до /about.html, программа чтения с экрана явно обнаруживает изменение страницы и перечитывает, как вы ожидали.

В моем приложении "Магистраль", хотя, когда я следую по маршруту, я не могу понять, как вызвать "перечитать". Я попытался запустить событие focus, которое я видел где-то, но это не работает.

Примечание. В настоящее время я тестирую NVDA/Chrome.

Ответ 1

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

Мой опыт был с angular.js(как человек доступности, а не разработчиком), и наш общий подход заключался в том, чтобы управлять фокусом, а не инициировать повторное чтение. (Мы проводим обширное тестирование доступности.)

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

В этом случае подходящим местом для размещения фокуса будет верхняя часть области содержимого страницы "страница", надеюсь, <h1>.

Для того, чтобы это работать, целевой элемент должен быть сфокусирован с помощью script, поэтому, вероятно, требуется tabindex, если это не ссылка или форма управления:

<h1 id="test" tabindex="-1">

-1 означает, что он не находится в порядке табуляции по умолчанию, но сфокусирован с помощью script. См. Больше в авторских практиках WAI-ARIA.

Затем в конце функции, загружающей новый контент, включая атрибут tabindex, добавьте что-то вроде:

$('#test').attr('tabindex', '-1').css('outline', 'none');
$('#test').focus();

При динамическом добавлении tabindex лучше всего делать это в строке перед функцией focus(), иначе она может не работать (я помню, что от тестирования с помощью JAWS).

Чтобы проверить это, я бы использовал либо:

NVDA и Firefox, Windows
Челюсти и IE, Windows

Также хорошо протестировать с VoiceOver в Safari/OSX, но это работает по-разному и может не затрагивать те же проблемы, что и экранный ридер на экране.

Вы столкнетесь с множеством проблем с Chrome/NVDA, поскольку это не очень хорошо поддерживается, и конечные пользователи вряд ли смогут это использовать. IE в порядке с NVDA, но Firefox лучше всего.

В целом, стоит ознакомиться с методами создания WAI-ARIA, в частности Использование ARIA в HTML. Несмотря на то, что вы используете JS-приложение, браузер (и, следовательно, программа чтения с экрана) интерпретирует полученный HTML-код, поэтому совет по-прежнему имеет значение.

Наконец, если вы обновляете содержимое страницы без, пользователь нажимает пробел/вводит для активации чего-либо, вы можете обнаружить, что JAWS/NVDA не знают о новом контенте, так как их "виртуальный буфер" имеет не обновляется. В этом случае вам может понадобиться добавить JS-прокладку, чтобы обновить их, но только если вы столкнулись с проблемами при тестировании, это не должно быть глобальным патчем.

Ответ 2

Принимая ответ от @AlastairC и комментарии ниже. Я взял это немного дальше и собираюсь с этим, поскольку мое решение идет вперед:

Мое решение для переходов

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

Добавить полезный, описательный текст на страницу

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

<p class="screenreader-summary" tabindex="-1">
  The <strong>Dashboard</strong> page is now on-screen.
  It contains several widgets for summarizing your data.
</p>

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

Скрыть его вне экрана (необязательно, требуется только в том случае, если он нарушит ваш дизайн/читаемость)

Затем это связано с CSS для перемещения этого элемента за пределы экрана:

.screenreader-summary {
  position: absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  outline: none; /* Important, don't show an outline on-focus */
}

Сфокусируйте этот элемент, когда новая страница отображается на экране

Наконец, в коде JavaScript, который показывает вашу страницу на экране (например, в MarionetteJS с использованием события onShow или show):

$yourViewEl.find('.screenreader-summary').focus();

Результат

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

Ответ 3

В случае angular изменяется URL-адрес. Если кто-то ДЕЙСТВИТЕЛЬНО должен перечитать все (как и я из-за требований), для чего это было трюк:

$(window).on('hashchange', function () {
    location.reload();
});

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