单页应用程序在传达视图更改时提出了巨大的可访问性挑战。如果不刷新页面，屏幕阅读器将无法获取这些重要的UI更改，从而使视力受损的用户感到困惑和不知所措。
一种解决方案是创建基于页面标题的消息，并利用ARIA实时区域通过有用的消息显式宣布已加载新视图。首先创建一个在更新viewContent时调用的函数。 AngularJS为此提供了一个$ viewContentLoaded事件。在控制器代码中，侦听事件并调用一个函数（在CoffeeScript中）：
app.controller“ PageController”，（$ scope，$ location，$ http）-> $ scope。$ on“ $ viewContentLoaded”上，announce_view_loaded
在announce_view_loaded函数中，更新页面标题并宣布消息。虽然单页面框架不会自动更新页面标题，但保持页面标题与当前视图同步可以提高用户对视图的理解。
一种方法是在视图中的某处使用data属性存储视图标题：
document.title = $（'[data-viewtitle]'）。data‘viewtitle’
现在，使用更新后的页面标题创建一条消息，并将其宣布：
$ .announce（document.title +’，查看已加载’）
$ .announce（）是一个jQuery函数，它使用单个不可见的实时区域来声明内容。与实时区域的临时使用相比，此方法有助于简化代码和调试工作。但是，有一些最佳实践要记住。
首先，在页面中创建一个“播音员”直播区域，以使用aria-live =“ polite | assertive”宣布内容。请勿使用任何其他实时区域，包括实时区域角色（例如role =“ alert | timer | log”）。实时区域示例：
div aria-live =“ polite” id =“ announcer”>（在此处添加或更新的文本将被宣布）/ div>
其次，在更新内容后立即清除活动区域的内容。这样可以防止用户绊倒旧消息。
最后，与任何可访问性技术一样，明智地使用$ .announce（）。它仅应用于传达重要的UI更新。
字：帕特里克·福克斯（Patrick Fox）
帕特里克·福克斯（Patrick Fox）是位于奥斯丁的Razorfish的Web UI技术总监。 本文最初出现在网络杂志的第271期。
喜欢这个吗？阅读这些！
- 设计师数字无障碍指南
- 最好的免费脚本字体
- 免费涂鸦字体选择
