SPA 和可访问的富互联网应用程序 (ARIA)

Question

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

问题是，一旦通过 ng-view 加载了新视图，TTS 就不再有效，之前的 ng-view 元素的高亮显示仍然在屏幕上。

我怀疑这是因为 SPA 处理导航的方式，它是通过部分重新加载（换出 ng-view）完成的。

关于如何让 ARIA 和 TTS 在 SPA 中发挥出色的任何想法？

示例视图 1：

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

示例视图 2：

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

加载视图 1 会提示 TTS 响应：

// videos , link
// ratings, link

加载视图 2 应提示 TTS 响应：

// subscriptions, link
// playlist, link

Answer 1

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

例如，如果您有

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

并且您正在使用 JS 将 "videos" 更改为 "subscriptions"，那么您只需要 link:

上的 aria-live="polite"

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

现在，如果您更改文本，屏幕 reader 将读取新文本。

SPA & Accessible Rich Internet Applications (ARIA)