今回は料金表や求人内容の説明などで使われているタブメニューの作り方を解説します。
自分用になのでコピペして使えますが、まずは出来上がりを確認してください。
その後、それぞれ解説しているので必要な方はご確認してください。
タブメニューの全体像
まずは出来上がりを確認してください。
See the Pen Untitled by UCHINO (@UCHINO-web-service) on CodePen.
雛形として作成しましたが、特に HTML や CSS の部分は色々カスタマイズしていただければと思います。
タブメニューの解説
タブメニュー部分の解説
<div class="tab">
<ul class="tab__list" role="tablist">
<li
id="tab1"
class="tab__item"
role="tab"
aria-controls="panel1"
aria-selected="true"
>
タブメニュー1
</li>
以下省略
ここは切り替えスイッチの役割ですが、ulタグとliタグにあるrole="tablist"とrole="tab"で、タブメニューのリストとタブであることなどをスクリーンリーダーに示しています。
クラス名 .tab__itemにそれぞれ個別のIDを与えていますが、これはどのコンテンツと紐づいているかを示すために書いています。
あと、role属性など他の属性についてですが、スクリーンリーダーに役割を伝えるためのものです。
aria-controls="panel1"どのコンテンツと紐づいているか、aria-selected="true" と "false"はどのタブが選択されているかを状態を確認し知らせるためのものです。
タブコンテンツ部分の解説
<dl
id="panel4"
class="tab-menu__list"
role="tabpanel"
aria-labelledby="tab4"
hidden
>
<div class="tab-menu__item">
<dt>タブメニュー4-1のタイトル</dt>
<dd>タブメニュー4-1の内容はここに記入してください。</dd>
</div>
以下省略role="tabpanel"こちらはrole="tab"とセットで表示･非表示などを伝えることができます。
aria-labelledby="tab1" どのタブと紐づいているかを確認できます。
hidden非表示になっていることを伝えています。
JavaScriptについて
document.addEventListener("DOMContentLoaded", function() {
const tabItems = document.querySelectorAll('.tab__item');
const tabContents = document.querySelectorAll('.tab-menu__list');
// タブクリックイベント
tabItems.forEach((tabItem) => {
tabItem.addEventListener('click', function() {
// aria-selected属性の切り替え
tabItems.forEach(item => {
item.setAttribute('aria-selected', 'false');
});
this.setAttribute('aria-selected', 'true');
// hidden属性の切り替え
tabContents.forEach(content => {
content.setAttribute('hidden', 'true');
});
const targetPanel = document.getElementById(this.getAttribute('aria-controls'));
if (targetPanel) {
targetPanel.removeAttribute('hidden');
}
});
});
});コメントにも書いてありますが、クリックすることで aria-selected 属性と hidden 属性の切り替えを行い
後は CSS で見た目を変更しているという流れです。
まとめ
今回は主にHTMLに焦点をあてて記事を作成しました。ぜひ参考になさってください。
