ライブリージョンを明示する「live」プロパティ
ライブリージョンを明示する「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"」がセットされている要素がないかをチェックします。もし、そのような要素が見つかったら、スクリーンリーダーはその要素に含まれる全要素を読み上げます。
このような仕組みがあるため、文章の一部しか変更されていないのに、文章全体を読み上げさせることができます。
- この記事のキーワード
この記事をシェアしてください
関連記事
バックナンバー
この記事の筆者
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
