第2回 Ajaxの動的更新を読み上げ

動的更新が起こりうる個所（ライブリージョン）

　Ajaxが一般的になり、JavaScriptを使用して、一度表示されたHTMLに対して、更新や削除をしたり、またはまったく新しい要素の追加をするといった手法が非常によく用いられるようになりました。

　このようにして動的に更新が発生する領域を、「ライブリージョン」と呼びます。ライブリージョンは、ユーザー自身によるアクション（クリックなど）で発生するものだけでなく、Ajax化したチャットサイトや、株価情報サイト、スポーツのスコア情報のような現実社会の情報をリアルタイムに発信するWebサイト内でも見られます。

　これまで、とりわけスクリーンリーダーや読み上げブラウザなどの支援技術は、このライブリージョンを検知し読み上げることはできませんでした。このため、Ajaxのアクセシビリティを実現する上での大きな課題となっていました。

　スクリーンリーダーが正しく読み上げを行うためには、特に「どの個所が動的に変更されるか？」「変更個所をどう処理すべきか？」の情報が重要なります。

　WAI-ARIAはプロパティとしてこれらの情報の明示の仕方を定義しています。Webサイト作成者がこれらのプロパティのルールに従ってWebサイトを作成しておけば、ライブリージョンに対応しているスクリーンリーダーを使ってアクセスした際、ライブリージョンの読み上げが可能になります。

記事の続きが動的に表示されるケースの読み上げのサンプル

　ライブリージョンのプロパティの書き方や、読み上げのされ方を理解するために、図1の動画をご覧ください。

　このサンプルでは、FireFoxを読み上げブラウザにするエクステンション「Fire Vox（http://firevox.clcworld.net/）」と「ドキュメントトーカ日本語音声合成エンジン無料お試し版（AquesTalk版）（http://www.createsystem.co.jp/DTalkerSapi1.html#%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%83%88%E3%83%BC%E3%82%AB%20PlusV2%E3%81%AE%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89）」を使って読み上げさせています。

　Fire VOXはオープンソースソフトウエアでGPLで配布されています。「ドキュメントトーカ無料お試し版（AquesTalk版）」は、読み上げをさせていると、一定時間おきに、「この音声はドキュメントトーカ日本語音声合成エンジンのフリーソフト版です」という音声が流れますが、それ以外は特に利用制限なく無料で利用できます。

　このサンプルには、短い文章と、「続きを表示」というリンクがあります。「続きを表示」をクリックすると次のような処理が行われます。

1. Ajaxで続きのコンテンツを取得
2. 下記のタグの内容として、続きのコンテンツをセット

<p id='more' aria-live="assertive"></p>

　この<p>タグにはライブリージョンを読み上げさせるための「live」プロパティ（http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#live）が使用されています。

　これにより、読み上げブラウザは自動的に下記のように読み上げを行っています。

「New、このような動的更新が起こりうる個所を、『ライブリージョン』と呼びます。」

　「New」はライブリージョンの中に、新しく要素が追加された、という意味です。

　次のページでは、liveプロパティについて詳しく説明します。