angularjs - 在进度条的开始和停止处大声朗读(md-progress-linear)

Question

当出现带有进度条的对话框时，我需要使用 NVDA 屏幕阅读器来读取一些消息。

在进度条持续时间为 0% 时，我需要宣布: “您收到一条定时消息”

进度条持续 100% 时: “消息已过期”

使用的进度条是md-progress-线性。

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 属性的 slider ，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 后，在将消息注入(inject)其中之前，您必须强制执行 JavaScript 延迟；500 毫秒通常就足够了，但你应该测试一下)。您无法加载已包含消息的 aria-live 容器。

首先，容器必须也是空的。这是因为屏幕阅读器将寻找 aria-live 容器中内容的更改。

行为

当内容被注入(inject)容器时，屏幕阅读器将宣布内容。

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>