Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

アクセシブルなタブを実装してみた


上のようなイメージのアクセシブルなタブを作ってみました。
今回は以下のことに気をつけてタブを実装しました。

  1. Voice Overにこれはタブだと認識させる
  2. Voice Overにタブパネルの情報を正確に認識させる
  3. キーボード操作でタブの切り替えができるようにする。

1. Voice Overにこれはタブだと認識させる

<ul role="tablist" class="tab-list">
    <li id="tab-item1" role="tab" aria-selected="true" aria-controls="tab-panel1" class="tab-item js-tab-item" tabindex="0"><a href="#tab-panel1">Animals</a></li>
    <li id="tab-item2" role="tab" aria-selected="false" aria-controls="tab-panel2" class="tab-item js-tab-item" tabindex="-1"><a href="#tab-panel2">Foods</a></li>
</ul>

Voice Overにタブだと認識させるにはrole属性にそれぞれ記述する必要があります。例えばul要素にはrole属性にtablist、li要素にはrole属性にtabを指定します。こうする事でVoice Overがこれは何番目のタブなのかという情報も以下のイメージのように読み上げてくれます。なのでulにtablistをrole属性で指定しておくこともとても大切です。


2. Voice Overにタブパネルの情報を正確に認識させる

<div id="tab-panel1" role="tabpanel" aria-hidden="false" aria-labelledby="tab-item1" class="tab-panel js-tab-panel">
	<input id="opt1" type="checkbox" name="animals" value="cats">
	<label for="opt1">cats</label>
	<input id="opt2" type="checkbox" name="animals" value="dogs">
	<label for="opt2">dogs</label>
</div>

またあるタブが選択された時に表示するタブパネルにもtabpanelと、role属性に指定しておく必要があります。また、Voice Overが無駄に見えていないタブパネルを読み上げる事を避けるために、表示されていないコンテンツはaria-hiddenをtrueに設定します。
またaria-labelledbyにそのタブパネルが属しているtabのIDを指定する事でtabについたラベル名をVoice Overが下記のように付与してくれます。
下の図では、タブパネルにフォーカスが当たっていますが、ちゃんと対応したタブ「Foods」がVoice Overによって読み上げられているのが分かるかと思います。


3. キーボード操作でタブの切り替えができるようにする。

最後にタブの切り替えをキーボードの十字キー操作で行えるようにする事も大切です。デスクトップが見えない環境で切り替えるためのタブがどこにあるのかを見つけ出すのはとてもたいへんだからです。
以下のようなソースコードでタブの切り替えを行っています。この際に、見えなくなったタブパネルのaria-hidden属性をtrueにすることを忘れないようにしましょう。
CSSと属性を結びつけておけばJavaScriptの処理のし忘れを防ぐ事が出来ます。

jQuery(function($){
	$.fn.tab = function(){
		var $links = $(this).find(".js-tab-item");
		var $panels = $(this).children(".js-tab-panel");
		var length = $links.length;
		$links.click(function(e){
			$(this).focus();
			$links.attr("aria-selected",false);
			$(this).attr("aria-selected",true);
			$panels.attr("aria-hidden",true);
			var $panel = $("#"+$(this).attr("aria-controls"));
			$panel.attr("aria-hidden",false);
			e.preventDefault();
		});
		$links.keydown(function(event) {
			var index = $links.index(this);
			if(event.keyCode == 37){
				index--;
			}else if(event.keyCode == 39){
				index++;
			}
			if(index < 0){
				index = length-1;
			}else if(index >= length){
				index = 0;
			}
			$links.get(index).click();
			$links.get(index).focus();
		});
	}
	$(".js-tab").tab();
});

デモ

上記の内容をふまえ今回デモのページを下記に用意しました。実際にアクセシブルなタブを体験して頂く事ができます。Voice Over等でお確かめ下さい。



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド