Читайте вслух при запуске и остановке индикатора выполнения (md-progress-linear)

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

При продолжительности индикатора выполнения 0% мне нужно объявить: «Вы получили сообщение с задержкой».

При 100% продолжительности индикатора выполнения: «Срок действия сообщения истек».

Используется индикатор выполнения md-progress-linear.

Код HTML выглядит следующим образом:

<md-dialog>
    <md-progress-linear tabindex="0" ng-if="displayProgressIndicator || timeoutValue > 0" md-mode="determinate" class="promptProgressBar" value="{{progressValue}}"></md-progress-linear>
    <md-content class="md-title dialogTitle">
        {{messageTitle}}
    </md-content>
    <md-content class="md-dialog-content">
        {{messageText}}
    </md-content>
    <div class="md-dialog-actions">
        <md-button ng-style="theme.SecondaryButton" ng-click="OnClose()" class="md-primary right">
            {{primaryActionText}}
        </md-button>
        <md-button ng-style="theme.SecondaryButton" ng-if="secondaryActionText.length > 0" ng-click="OnCancel()" class="md-primary right">
            {{secondaryActionText}}
        </md-button>
    </div>
</md-dialog>

Я видел несколько рабочих примеров для слайдера, который использует атрибут aria-valuetext, и NVDA правильно читает эти тексты.

Я попытался добавить атрибут aria-valuetext в элемент md-progress-linear, но не работал.

При получении сообщения NVDA издает звуковой сигнал, но не читает текст aria-value.

Есть идеи, как это сделать?


person Coding man    schedule 13.06.2018    source источник


Ответы (1)


TL;DR

Вы можете использовать aria-live регион для достижения того же

Вот рабочий код: Вывод: https://codepen.io/aimt/details/PaaKXM/

Код: https://codepen.io/aimt/pen/PaaKXM/


Ссылки

Более подробная информация доступна на mdn https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

и https://www.w3.org/TR/wai-aria-1.1/#aria-live

Подробности

Добавьте <div aria-live="polite" id="livePolite"></div> на свою страницу

Aria-live - это пустой контейнер с aria-live = "напористый" или aria-live = "вежливый".

  • aria-live = "вежливый" будет ждать, пока программа чтения с экрана закончит свое утверждение, прежде чем объявлять о новом содержании.
  • aria-live = "assertive" отключит программу чтения с экрана, чтобы сообщать о новом содержании.

Важный

Контейнер ДОЛЖЕН присутствовать при загрузке страницы (или вы должны применить задержку JavaScript после добавления области aria-live в DOM, прежде чем вставлять в нее сообщение; 500 миллисекунд обычно достаточно, но вы должны Попробуй это). Вы не можете загрузить контейнер aria-live, в котором уже есть сообщение.

Контейнер ДОЛЖЕН быть для начала пустым. Это связано с тем, что программы чтения с экрана будут искать изменения в содержимом контейнера aria-live.

Поведение

Программы чтения с экрана сообщат о содержимом, когда содержимое было введено в контейнер.

o Раньше: <div aria-live="polite" id="livePolite"></div>

o После: <div aria-live="polite" id="livePolite">Paused Video</div>

Я всегда храню их в верхней части своей веб-страницы и при необходимости заполняю

<p aria-live="polite" id="livePolite"></p> <p aria-live="assertive" id="liveAssertive"></p>

person Sengupta Amit    schedule 23.06.2018
comment
Спасибо за решение. Демо работает идеально, как я и ожидал. Следовательно, принято. Но при интеграции в мой проект NVDA меняет текст региона aria-live, но не объявляет об этом. Он просто пищит. К вашему сведению, диалог появляется динамически. Что-нибудь еще делать? Это приложение для Windows, использующее браузер Chrome. Может это проблема с индексом вкладок? - person Coding man; 28.06.2018
comment
Является ли ваш aria-live <p> частью веб-страницы или частью диалога? Если это часть диалога, возможно, он не сможет прочитать живую область до того, как текст был введен. Если это часть веб-страницы, убедитесь, что область aria-live находится вне фона, я видел много фонов, добавляющих aria-hidden = true, чтобы программы чтения с экрана не читали элементы, расположенные за модальным окном. - person Sengupta Amit; 28.06.2018