Читайте вслух при запуске и остановке индикатора выполнения (md-progress-linear) - PullRequest
0 голосов
/ 13 июня 2018

Мне нужно использовать программу чтения с экрана 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 *Атрибут 1021 * и NVDA правильно читает эти тексты.

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

Когда приходит сообщение, NVDA издает звуковые сигналы звуков, но не читает aria-valuetext .

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

1 Ответ

0 голосов
/ 23 июня 2018

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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...