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

Question

当出现带有进度条的对话框时，我需要使用 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>

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

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

当消息到达时，NVDA 会发出 哔声 声音，但不会读取 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" 将等待屏幕阅读器完成其声明，然后再宣布新内容。
• aria-live="assertive" 将关闭屏幕阅读器以宣布新内容。

重要

容器必须在页面加载时出现（或者您必须在将 aria-live 区域添加到 DOM 之后强制 JavaScript 延迟，然后再将消息注入其中；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>