裕樹Tweet動的更新が起こりうる個所(ライブリージョン)Ajaxが一般的になり、JavaScriptを使用して、一度表示されたHTMLに対して、更新や削除をしたり、またはまったく新しい要素の追加をするといった手法が非常によく用いられるようになりました。このようにして動的に更新が発生する領域を、「ライブリージョン」と呼びます。ライブリージョンは、ユーザー自身によるアクション(クリックなど)で発生するものだけでなく、Ajax化したチャットサイトや、株価情報サイト、スポーツのスコア情報のような現実社会の情報をリアルタイムに発信するWebサイト内でも見られます。これまで、とりわけスクリーンリーダーや読み上げブラウザなどの支援技術は、このライブリージョンを検知し読み上げることはできませんでした。このため、Ajaxのアクセシビリティを実現する上での大きな課題となっていました。スクリーンリーダーが正しく読み上げを行うためには、特に「どの個所が動的に変更されるか?」「変更個所をどう処理すべきか?」の情報が重要なります。WAI-ARIAはプロパティとしてこれらの情報の明示の仕方を定義しています。Webサイト作成者がこれらのプロパティのルールに従ってWebサイトを作成しておけば、ライブリージョンに対応しているスクリーンリーダーを使ってアクセスした際、ライブリージョンの読み上げが可能になります。記事の続きが動的に表示されるケースの読み上げのサンプルライブリージョンのプロパティの書き方や、読み上げのされ方を理解するために、図1の動画をご覧ください。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)」を使って読み上げさせています。VOXはオープンソースソフトウエアでGPLで配布されています。「ドキュメントトーカ無料お試し版(AquesTalk版)」は、読み上げをさせていると、一定時間おきに、「この音声はドキュメントトーカ日本語音声合成エンジンのフリーソフト版です」という音声が流れますが、それ以外は特に利用制限なく無料で利用できます。このサンプルには、短い文章と、「続きを表示」というリンクがあります。「続きを表示」をクリックすると次のような処理が行われます。下記のタグの内容として、続きのコンテンツをセットこのタグにはライブリージョンを読み上げさせるための「live」プロパティ(http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#live)が使用されています。これにより、読み上げブラウザは自動的に下記のように読み上げを行っています。「New、このような動的更新が起こりうる個所を、『ライブリージョン』と呼びます。「New」はライブリージョンの中に、新しく要素が追加された、という意味です。次のページでは、liveプロパティについて詳しく説明します。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。Railsなどの記事執筆も行っている。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。IT(シンクイット)エラーサイトに予期せぬエラーが起こりました。たってから再度お試しください。