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区域来实现相同的目的

这是一个有效的Codepen：输出：https://codepen.io/aimt/details/PaaKXM/

代码：https://codepen.io/aimt/pen/PaaKXM/

详细信息

将<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容器中寻找内容的更改。

行为

屏幕阅读器将在内容已注入到容器中时宣布内容。

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）

1 个答案:

TL; DR

推荐

详细信息

重要

行为