Ajaxで動的に更新されるコンテンツにWAI-ARIAのLive Regions(ライブリージョン)を実装してみる

このエントリーはjQuery Advent Calendar 2013向けに書いたものです。

しかし、タイトルからしてjQueryとは関係のないものになりそうですが気にしない。

Live Regions(ライブリージョン)とは

WAI-ARIAにはライブリージョンと呼ばれる仕様があります。
コンテンツによっては、JavaScript等で動的に更新されるものがありますが、こういったコンテンツに対して、スクリーンリーダーなどの支援技術を使っているユーザーは更新情報を知ることができません。
しかし、WAI-ARIAのライブリージョンを使うことでそういった動的に更新されるコンテンツに対して、スクリーンリーダーなどの支援技術を使っているユーザーもその更新を把握できるようになります。

ライブリージョンの使用例

有名なサイトでは、すでに実装されていたりします。

Facebook

Facebookでは「いいね!」されたことを通知するために実装されています。

Google

Googleのトップにあるベルのようなアイコンがありますが、ここはGoogle+などで何かのアクションがあった場合などの通知エリアとなっています。何かの通知があったことを知らせるために実装されています。

ライブリージョンのプロパティ

上記ででてきたライブリージョンのプロパティについて説明します。(といっても、aria-liveだけなのですが・・・)

aria-live

aria-liveは、ライブリージョンの基本的なプロパティで、更新があった場合にその更新をユーザーへの知らせ方(off、polite、assertive)を指定します。aria-liveの値は以下のとおりです。

aria-live="off"
「off」デフォルト設定で、「off」の場合は、何も通知されません。
aria-live="polite"
「polite」は、ユーザーがPC等でなにか操作を終えた場合や何も操作をしていない場合、また、音声読み上げが現在の読み上げている内容が終了した場合に通知されます。仕様書にもlive="polite" should be used in most situations involving live regionsとあるように、基本的には「polite」を指定しておけばよいでしょう。
aria-live="assertive"
「assertive」は、更新内容が重要性が高いので、すぐユーザーに通知されます。"assertive" must be used if there is information that a user must know about right away, for example, warning messages in a form that does validation on the fly.とあるように、フォームの警告メッセージなど更新内容が重要性が高い場合に使用します。

Special Case Live Regions

aria-liveは、ライブリージョンの基本的なところになります。動的に変化するブロックに指定します。しかし、WAI-ARIAの仕様には、aria-liveを使わなくても、暗示的にaria-liveが適用されるrole属性(Special Case Live Regions)があります。

role="log"
メッセージングの履歴、エラーログなどのroleです。aria-liveはpoliteの値を持ちます。
role="status"
ステータスを提供するためのroleです。aria-liveはpoliteの値を持ちます。
role="alert"
何かが起こったことをユーザーに通知するためのroleです。aria-liveはassertiveの値を持ちます。
role="marquee"
頻繁に内容が変更されるティッカーなどのroleです。aria-liveはoffの値を持ちます。
role="timer"
数値カウンタのroleです。aria-liveはoffの値を持ちます。

他のライブリージョンの機能を使った例

ライブリージョン = aria-live ではないので、他のライブリージョンの機能をAjaxでXMLやらJSONやらを取得して、何かのログ的なものを表示するというものを例に挙げていきます。

デモ

ちなみに、デモ用で作ったjQueryのソースコードは以下です。

$(function(){

	var $elem = $('#live-regions-block');
	var val, logHtml;

	$('#btn').click(function(e){

		e.preventDefault();
		//選択された日付の値を取得
		val = $('select option:selected').val();

		$.ajax({
			url : 'json/' +val+ '.json',
			dataType: "json"
		}).done(function(jsonData) {
			logHtml = "";
			$.each(jsonData, function(i, data) {
				var title = data.TITLE;
				var desc = data.DESCRIPTION;
				//JSONのデータをHTMLに反映
				logHtml += '<dt>' +title+ '</dt>' +
				       '<dd>' +desc+ '</dd>';
			});
			//取得したJSONの内容を表示
			$elem.append('<dl>' + logHtml + '</dl>');
		}).fail(function() {
			//Ajax通信は失敗した時に表示
			$elem.append('<p>取得に失敗しました。</p>');
		});// End of $.ajax

	});

	//日付を再選択時に要素を削除
	$('select').change(function(){
		$elem.children().remove();
	})

});

jQueryで行っているのは、セレクトメニューで日付を選ぶと、option要素の値を取得し、その値と同じJSONファイルを取得し、該当エリアにその日のログのようなものが表示されるようにしています。

該当エリアのHTMLは以下のようにしています。

<div
    id="live-regions-block"
    aria-live="polite"
    aria-atomic="false"
    aria-relevant="additions">
 </div>

このHTMLで指定しているaria-*属性はすべてライブリージョンのためのプロパティです。 aria-live以外のaria-*属性の説明は次の通りです。

aria-atomic

変更がブロック全体か変更された部分のみかを通知します。

aria-atomic="false"
「false」はデフォルトの値で、ユーザーには、変更点のみを伝え、変更のない箇所は無視します。
aria-atomic="true"
「true」は、変更点だけでなく、aria-atomicを指定しているブロック全体を読み上げます。

aria-relevant

DOMにノードやテキストコンテンツが追加や削除されたことを通知します。

aria-relevant="additions"
DOMにノードが追加されると通知されます。
aria-relevant="removals"
DOMからノードが削除されます。
aria-relevant="text"
テキストコンテンツがDOMに追加、削除されると通知されます。 テキストコンテンツには、画像にの代替テキストも含まれます。
aria-relevant="all"
additions、removals、textの値と等価仕様書には

仕様書には、removalsallの値は、削除されるコンテンツが重要な場合のみに使うべきで多用すべきではないと記載されています。

今回のデモでは使用していませんが、ライブリージョンの属性には、上の3つ以外に更新が終了したかどうかを示すaria-busyというステートがあります。

aria-busy="true"
更新中を示します。更新が終了したら、この属性を削除するか値をfalseに変更しなければなりません。
aria-busy="false"
デフォルト値。更新が無い、または更新が終了の場合の値です。

VoiceOverで確認

下記のキャプチャは、MacのVoiceOverで確認したものです。

aria-liveの指定無し

ライブリージョンを指定していなければ取得したデータは読み上げてくれませんでした。

aria-liveの指定有り

ライブリージョンを指定していると「表示ボタン」を押すと取得したデータを読み上げてくれました。

ライブリージョンのサポート状況

Web applications and ARIA FAQを見る限り、主要ブラウザはライブリージョンをサポートしており、また、主要なスクリーンリーダーもライブリージョンに対応しているようです。
しかし、海外の情報なので、あくまでも個人的な推測ですが日本語版のほうは少し対応具合が異なりそうです。また、日本でシェアが一番高いであろうPC-talkerのライブリージョンのサポートは現時点ではされていないでしょう。

最後に

以上が今回のネタでした。jQuery Advent Calendarなのに、jQueryのネタが一切無く、jQueryは何も関係がないという感じになって申し訳ありませんでした。