Ajaxの動的更新を読み上げ

ライブリージョンを明示する「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は下記になります。

こんにちはさん。

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