SPA&可访问的富Internet应用程序(ARIA)

时间:2018-03-19 18:24:14

标签: javascript angularjs html5 wai-aria

我有一个使用AngularJS构建的单页面Web应用程序(SPA),支持文本到语音转换(TTS)。在初始应用程序加载时,TTS可以正常工作。突出显示DOM元素,并播放描述DOM元素的音频。

问题是,只要通过fatal error: /folderB/file3.H: No such file or directory compilation terminated加载新视图,TTS就不再有效,并且之前的ng-view元素的突出显示仍保留在屏幕上。

我怀疑这是因为SPA如何处理导航,它是通过部分重新加载(换出ng-view)来完成的。

有关如何让ARIA和TTS在SPA中发挥出色的想法吗?

示例视图1:

ng-view

示例视图2:

<a href="some_link/videos">videos</a>
<a href="some_link/ratings">ratings</a>

加载视图1会提示TTS回复:

<a href="some_link/subscriptions">subscriptions</a>
<a href="some_link/playlist">playlist<

加载视图2​​应提示TTS回复:

// videos , link
// ratings, link

1 个答案:

答案 0 :(得分:2)

如果要使用新文本更新DOM,请查看aria-live属性。

https://www.w3.org/TR/wai-aria/#aria-live

例如,如果你有

<a href="some_link/videos">videos</a>

并且您正在使用JS来更改&#34;视频&#34;到&#34;订阅&#34;,然后你需要的只是aria-live="polite"链接:

<a href="some_link/videos" aria-live="polite">videos</a>

现在,如果您更改文本,屏幕阅读器将读取新文本。