Поведение NVDA

Question

Я пытаюсь добавить поддержку живого региона на веб-странице, чтобы сделать NVDA доступной со страницей. Тем не менее, я видел совершенно другое поведение с атрибутами aria-live, чем ожидалось.

1. Я попытался добавить один живой регион, который скрыт, и я сваливать все сообщения (каждое сообщение, заключенный в тег <p>) в этой области, чтобы быть прочитан чтения с экрана. Он работает нормально, но единственная проблема заключается в том, что первое сообщение, вставленное в div div в реальном времени, никогда не считывается считывателем экрана NVDA. Последующие сообщения читаются отлично. Этот живой div div создается динамически, когда должно быть объявлено первое сообщение.

2. aria-live="assertive" действительно не прерывает текущий поток, чтобы сообщить об этом сообщении.

3. Я использую нокаут в веб-странице. Когда HTML div, который помечен как живая область, отображается на основе состояния нокаута, то он не обнаруживается устройством чтения с экрана. Например:

   <!-- ko if: $data --> 
   <div aria-live="polite" data-bind="text: $data"> 
   </div> 
   <!-- ko --> 
   

   При загрузке страницы первоначально, $ данных равна нулю. Так что живая область div отсутствует. Но когда данные извлекаются, что div вставлен. Однако NVDA не читает контент в добавленном div. Это ожидаемое поведение? Существует ли какое-либо обходное решение, чтобы исправить это поведение?

Answer 1

Быстрый ответ, нажатие на время.

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

Я откинул ручку и заработал ее в первой кнопке (через браузер произносит «XYZ» как «zeyes»). Это находится в режиме отладки, так что нет кода CodePen там вообще (ни кадров), чтобы приподнять его:

http://s.codepen.io/aardrian/debug/wgWqVm

режима неотладочного так что вы канистра видит код:

http://codepen.io/aardrian/pen/wgWqVm

Ваш код помещает aria-live на элемент, завернутый в Knockout ko if: заявление, поэтому не отображается на странице при нагрузке:

<p>Last name: 
    <!-- ko if: lastName --> 
    <strong aria-live="polite" data-bind="text: lastName"></strong> 
    <!-- /ko --> 
</p> 

Я подправил его поставить живую область вокруг ko if: проверки, и теперь оно будет объявлено, когда кнопка нажата:

<p>Last name: 
    <div aria-live="polite"> 
    <!-- ko if: lastName --> 
     <strong data-bind="text: lastName"></strong> 
    <!-- /ko --> 
    </div> 
</p> 

Да, я поставил <div> в <p>, но это только для демонстрации цели.

Протестировано в NVDA 2016.4/Firefox 50.1.1, и оно работает так, как я полагаю, вы намерены. Я вообще не касался второго.