HOME
HTML
aria属性を使ってタブを実装してみた
HTML

aria属性を使ってタブを実装してみた

目次

    前から興味のあった「WAI-ARIA」。
    業務に余裕があったので調べてみました。

    調べれは今は参考となる記事がたくさん。本当に助かります。
    調べただけで終わらないように、タブに実装してみました。

    タブの実装

    いつもであればclassやdata属性を使い切り替え、表示・非表示にアニメーションを加えたいのであればfadeInやfadeOutのjQueryのメソッドを使っています。
    今回は「WAI-ARIA」のrole属性とaria属性を使い切り替え、アニメーションをCSS3で行いたいと思います。

    role属性とaria属性

    まずはこの２つの違い。
    簡単に言えば以下のような感じです。

    • role属性：コンテンツの役割を表す
    • aria属性：コンテンツの状態や性質を表す

    この辺に関してはいずれ勉強した者をまとめたいと思いますが、今回は簡単に上記を覚えてコードを見て頂けたらと思います。

    マークアップ

    role属性とaria属性を使用したHTMLソースは以下になります。

    


<ul role="tablist">
	<li id="tabList01" aria-controls="tab01" aria-selected="true" role="tab">タブ01</li>
	<li id="tabList02" aria-controls="tab02" aria-selected="false" role="tab">タブ02</li>
	<li id="tabList03" aria-controls="tab03" aria-selected="false" role="tab">タブ03</li>
</ul>
<section id="tab01" aria-hidden="false" aria-labelledby="tabList01" role="tabpanel">
コンテンツ01
</section>
<section id="tab02" aria-hidden="true" aria-labelledby="tabList02" role="tabpanel">
コンテンツ02
</section>
<section id="tab03" aria-hidden="true" aria-labelledby="tabList03" role="tabpanel">
コンテンツ03
</section>

    roleはタブはどれに当たるのか、それぞれどういう役割なのか、
    ariaは「true/false」をつかってどういう状態か、idを使ってどれと関連つけられているのか教えてくれます。

    それぞれどういうものがあるか覚えるのは大変ですが、調べれば出てきますし、
    role属性とaria属性がどういうものかわかるとと凄くわかりやすく思います。

    CSS

    ブラウザでの表示・非表示の状態を設定します。
    属性を使ってしまえばCSSでも指定がわかりやすくなりそうです。

    //タブの通常状態
[role="tab"] {
	color: #111;
	//アクティブ状態
	&[aria-selected="true"] {
		color: red;
	}
}

//コンテンツの通常状態
[role="tabpanel"] {
	display: none;

	//表示状態
	[aria-hidden="false"] {
		display: block;
	}
}

    jQuery

    あとはJSで切り替えるだけ。
    各属性を取得し、「true/false」を切り替えるだけなので簡単ですね。

    $(function(){
	var tab = $('[role="tab"]'),
		tabpanel = $('[role="tabpanel"]');

	tab.stop().on('click', function() {
		var _self = $(this),
			select = _self.attr('aria-selected'),
			id = _self.attr('aria-controls'),
			id_body = $('#' + id);

		if (select === 'true') {
			return false;
		}

		tabpanel.attr('aria-hidden', true);
		id_body.attr('aria-hidden', false);

		tab.attr('aria-selected', false);
		_self.attr('aria-selected', true);
	});
});

    完成ソース

    完成したものが下記になります。

    See the Pen aria属性を使ったタブを実装 by zunda_mochi (@zunda_mochi) on CodePen.

    表示・非表示にアニメーションを加える

    表示・非表示をCSSのdisplayを使ってやっていますが、fadeIn・Outさせたい人もいると思います。
    そういうときはopacityを使います。

    ただ注意としては下記では動きません。

    //コンテンツの通常状態
[role="tabpanel"] {
	display: none;
	opacity: 0;
	transition: opacity .5s ease;

	//表示状態
	[aria-hidden="false"] {
		display: block;
		opacity: 1;
	}
}

    参考サイト

    display: none; のDOMに対してtransitionを使う際の注意

    display: block;を付与して初めて生成されるためらしいです。
    上記だとtransitionの時間を遅らせてもダメでした。
    スライダーとかdisplay: none;した要素に効かないですし、見えないのではなく要素が無い状態なんですね。

    そういうときはanimationを使い対応します。

    //コンテンツの通常状態
[role="tabpanel"] {
	display: none;
	&[aria-hidden="false"] {
		display: block;
		animation: fade_ani 1s ease 0s;
	}
}

@keyframes fade_ani {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

    これで解決！
    勉強になりました(*^○^*)

    完成

    以上で「WAI-ARIA」によるタブの実装になります。
    使わなくてもタブは実装できますが、id属性、class属性、data属性、role属性とaria属性、タグ専用のタグとたくさんの属性がありますが、その目的はHTMLをよりわかりやすく伝えるようにするためのものだと思います。
    覚えるのは大変ですが、技術的にもHTML5より前にあったものですし、フロントエンドエンジニアを目指すのであればより積極的に使用し学んで行く必要があるのではと思いました。 今回は軽く調べて見た程度なのでコーディングの際は意識して取り入れたいと思います。

    コメント一覧