単一ページのアプリは、ビューの変更を伝達することになると、アクセシビリティに重大な課題をもたらします。ページを更新しないと、スクリーンリーダーは、これらの重要なUIの変更を認識せず、視覚障害のあるユーザーを混乱させ、気付かないままにします。
1つの解決策は、ページタイトルに基づいてメッセージを作成し、ARIAライブリージョンを活用して、役立つメッセージを介して、新しいビューが読み込まれたことを明示的に通知することです。まず、viewContentが更新されたときに呼び出される関数を作成します。 AngularJSは、この目的のために$ viewContentLoadedイベントを提供します。コントローラコードで、イベントをリッスンし、関数を呼び出します（CoffeeScriptで）。
app.controller’PageController ’、（$ scope、$ location、$ http）-> $ scope。$ on’ $ viewContentLoaded ’、announce_view_loaded
announce_view_loaded関数で、ページタイトルを更新し、メッセージをアナウンスします。単一ページフレームワークはページタイトルを自動的に更新しませんが、ページタイトルを現在のビューと同期させておくと、ユーザーのビューの理解が向上します。
これを行う1つの方法は、ビューのどこかにデータ属性を使用して、ビューのタイトルを格納することです。
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は、オースティンのRazorfishのWebUIテクノロジーディレクターです。 この記事はもともとネットマガジンの271号に掲載されました。
これが好きですか？これらを読んでください！
- デジタルアクセシビリティに関するデザイナーガイド
- 最高の無料スクリプトフォント
- 無料のグラフィティフォントの選択
