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.
有什么想法怎么做?
您可以使用aria-liveregion来实现相同的目标
这是一个工作的codepen:输出: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区域添加到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>
| 归档时间: |
|
| 查看次数: |
421 次 |
| 最近记录: |