在进度条的开始和结束时大声朗读(md-progress-linear)

Cod*_*man 9 screen-readers wai-aria angularjs progress-bar nvda

当出现带有进度条的对话框时,我需要使用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>
Run Code Online (Sandbox Code Playgroud)

我看到一些滑块的工作示例,它使用aria-valuetext属性,NVDA正确读取这些文本.

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

当消息到达时,NVDA会发出蜂鸣声,但不会读取aria-valuetext.

有什么想法怎么做?

Sen*_*mit 8

TL; DR

您可以使用aria-liveregion来实现相同的目标

这是一个工作的codepen:输出:https://codepen.io/aimt/details/PaaKXM/

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


Refrences

有关详细信息,请访问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>