PR

Ajaxの動的更新を読み上げ

2008年9月11日(木)
志田 裕樹

ライブリージョンを明示する「live」プロパティ

 「live」プロパティを使用することで、その要素がライブリージョンであることを明示することができます。

 liveプロパティが取りうる値は次の4通りです。

・off
・polite
・assertive
・rude

 「off」を指定した場合、その要素がライブリージョンではないことを明示します。

 「polite」「assertive」「rude」はいずれも、指定された要素がライブリージョンであることを明示するものですが、支援技術が処理を行う際の優先順位が異なります。

 Fire VOXでの処理のされ方は次の通りです。

 「polite」を指定した場合、ライブリージョンに更新が起こった時点で、すでに別の文章を読み上げている最中ならば、ライブリージョンでの更新内容は無視されます。

 「assertive」を指定した場合、ライブリージョンに更新が起こった時点で、すでに別の文章を読み上げている最中ならば、その読み上げが完了した後に、ライブリージョンでの更新内容が読み上げられます。

 「rude」を指定した場合、ライブリージョンに更新が起こった時点で、すでに別の文章を読み上げている最中であっても、その読み上げを中止し、ライブリージョンでの更新内容を読み上げます。

更新個所を含む文章全体を読み上げ直すケースの解説

 では、次のサンプルの動画「更新個所を含む文章全体を読み上げ直すケース」を見てみましょう。今度のサンプルは「名前」の入力欄があります。ユーザーが「名前」の入力欄に文字を入力中、入力文字列が7文字を超えると、即座にエラーメッセージが表示されます。

 このエラーメッセージは、下記のように「live」プロパティに「rude」が設定されているため、自動的にすぐ読み上げされます。

名前は7文字以内にしてください

 7文字以内で名前を入力しエンターキーを押すと、あらかじめ「display: none;」(非表示状態)で用意しておいた、占い結果のHTMLは下記になります。



 上記に対して、下記の処理を行います。

・「display: block;」にセット(非表示状態から表示状態へ変更)
・ライブリージョンであるにタグ内に、入力された「名前」をセット

 結果的に占い結果のHTMLは下記のようになります。


こんにちはライブさん。

あなたの今日の運勢は大吉です。



 通常は、ライブリージョンの中身だけが読み上げられますので、下記のように読み上げられるはずです。

「New、ライブ」

 ですが、ここで使っている「atomic」プロパティ(http://www.hitachi.co.jp/universaldesign/wai-aria/ED_20080514/#atomic)の働きにより、下記のように文章全体が読み上げられました。

「New、こんにちはライブさん。」
「あなたの今日の運勢は大吉です。」

 スクリーンリーダーはライブリージョン内に何らかの変更を検知したら、その要素の親要素をたどります。そして、「aria-atomic="true"」がセットされている要素がないかをチェックします。もし、そのような要素が見つかったら、スクリーンリーダーはその要素に含まれる全要素を読み上げます。

 このような仕組みがあるため、文章の一部しか変更されていないのに、文章全体を読み上げさせることができます。
株式会社アークウェブ
取締役 CTO。2004年1月より株式会社アークウェブの創業スタッフとして勤務。SEとしてさまざまなWebシステムの構築に従事。オープンソースコミュニティーZen Cart.JPにてコミッターの役割を務め、Zen Cart、Ajax、Ruby on Railsなどの記事執筆も行っている。http://www.ark-web.jp/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています