aria-activedescendantの値を変更するスクリプト[WAI-ARIA]

久しぶりのWAI-ARIAネタですが、WAI-ARIAのプロパティにaria-activedescendantというのがあるのですが、この値をJavaScriptで変更できるようにするというものです。

aria-activedescendant

aria-activedescendantは、仕様書から引用すると、

compositeウィジェットの現時点でアクティブな子孫を特定する。

というもので、下記図のような複数ならんだボタンなどでどれが現在アクティブであるかを示すためのプロパティです。

図:UIのイメージ

さらに仕様書を読むと、

ユーザーエージェントがaria-activedescendantを使用して、アクティブな子孫にフォーカスが置かれていることを支援技術に伝えることがある。

開発者は、支援技術またはユーザーエージェントが直接フォーカスを設定する場合に起き得るactivedescendant属性の変更を、把握すべきである。

というふうに書かれています。つまりこれって、アクティブになった要素を把握するためにactivedescendant属性の値を変更しなければならないってことですよね。まー値の変更ぐらいなので、jQuery使えば簡単にできてしまうのが恐ろしい(謎)ですね。

上の図のようなUIとしてHTMLは下記のような感じにしています。

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="toolbar">
  <span role="button" id="button1" tabindex="1">ボタン1</span>
  <span role="button" id="button2" tabindex="1">ボタン2</span>
  <span role="button" id="button3" tabindex="1">ボタン3</span>
</div>

jQueryの処理ですが、"ボタンが押されたときにspan要素のid属性の値をとってきて、それをaria-activedescendantの値にする"という感じになります。

ボタンを押すなので イベントタイプは、"click"のみ指定しがちですが、キーボードでも操作できるように、"keypress"も指定します。そして、イベントタイプごとの同じ処理を書くのもメンドーなので、複数のイベントタイプをセットできる"bind"を使用します。(jQuery1.7を使うのであれば"on"のほうがよいのかしら?) ※アクティブなボタンのスタイルを変えたり、ボタンが画像のときに、画像を差し替えたりするのに便利なので、activeというクラスを付くようにしています。

$(function(){
	$("#toolbar span").bind("click keypress", function(){
		$("#toolbar span").removeClass("active");
		$(this).addClass("active");
		var flagment = $(this).attr("id");
		$("#toolbar").attr("aria-activedescendant",flagment)
	});
});

これで、aria-activedescendantの値が変更できます。スクリプト自体は至ってシンプルですが、ARIAは知れば知るほど複雑な感がありますね。複雑なので、本当に広まるのかしらと思う今日この頃です。【謎】