在进度条开始和停止时朗读（md-progress-linear）

Question

我需要使用 NVDA screen-reader 在出现带有进度条的对话框时阅读一些消息。

在进度条持续时间为 0% 时，我需要宣布： "Your received a timed message"

在进度条的 100% 持续时间： "The message expired"

使用的进度条是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>

我看到一些 working examples 滑块使用 aria-valuetext 属性并且 NVDA 正确读取这些文本。

我尝试在 md-progress-linear 元素中添加 aria-valuetext 属性，但不起作用。

当消息到达时，NVDA 发出 beep 声音，但不读取 aria-valuetext.

知道怎么做吗？

Answer 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="assertive" 或 aria-live="polite"

的空容器

aria-live="polite" 将等待屏幕 reader 在宣布新内容之前完成其声明。
aria-live="assertive" 将切屏 reader 以宣布新内容。

重要

容器必须在页面加载时出现（或者你必须在 aria-live 区域添加到 DOM 之后强制执行 JavaScript 延迟在将消息注入其中之前；500 毫秒通常就足够了，但您应该对其进行测试）。您无法加载其中已有消息的 aria-live 容器。

首先，容器必须也是空的。这是因为屏幕 readers 将在 aria-live 容器中寻找内容的变化。

行为

屏幕 readers 将在内容注入容器后宣布内容。

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>

在进度条开始和停止时朗读（md-progress-linear）

Read aloud at start and stop of progress bar (md-progress-linear)

angularjs

progress-bar

wai-aria

screen-readers

nvda

TL;DR

参考文献

详情

重要

行为