アクセシビリティを意識したタブUI

はじめに

タブUIを初めて制作するにあたってインプットの量が初学者の自分にとって多くまた複雑でした。

そのため、今回理解に時間がかかったところを未来の自分にもう一度思い出せるためタイムカプセルとして記録しておきます。

つまずきポイント1 ｜　タブとパネルの紐付け

それぞれ役割の説明

-タブの仕事はタブパネルを制御する役割。
-パネルはどのタブの内容なのか示す役割。
それをaria-ほにゃららとidでそれぞれ紐付ける必要があります。

要点は以下の通りです。

・タブの”id”はパネルの”aria-labelledby”　🌕🌕🌕
・パネルの”id”はタブの”aria-controls”　⭐️⭐️⭐️

test.py

        <button
          id="tabA"　🌕🌕🌕
          role="tab"
          aria-controls="panelA"　⭐️⭐️⭐️
          aria-selected="true"
          tabindex="0">
        タブ1
        </button>
        
        <div 
        id="panelA" ⭐️⭐️⭐️
        role="tabpanel" 
        aria-labelledby="tabA" 🌕🌕🌕
        tabindex="0">
        <p>パネルAの表示</p>
      </div>

aria-以降のほにゃららは一旦置いてるので意味はわからない。

つまずきポイント2 | 親要素地獄

タブをクリックした時参照する要素がおじいちゃんまで出てきます。
ただでさえおじいちゃんの年齢も忘れるのにこれはややこしい事案です。

コードを見ていきましょう。

test.py

window.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const tabList = document.querySelector('[role="tablist"]');

  tabs.forEach((tab) => {
    tab.addEventListener("click", changeTabs);
  });
});
function changeTabs(e) {
  const target = e.target; //クリックしたタブ
  const parent = target.parentNode; //タブの親要素
  const grandparent = parent.parentNode; //タブの親の親要素

  //tablistの中のタブのaria-selectedをfalseにする
  parent
    .querySelectorAll('[aria-selected="true"]')
    .forEach((t) => t.setAttribute("aria-selected", "false"));

  //クリックしたタブのaria-selectedをtrueにする
  target.setAttribute("aria-selected", true);

  //tabpanelの中のhiddenをtrueにする
  grandparent
    .querySelectorAll('[role="tabpanel"]')
    .forEach((p) => p.setAttribute("hidden", "true"));

  //クリックしたタブのtabpanelのhiddenをfalseにする
  grandparent
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");
}

タブをクリックしたらどう動くか順番に書いていきます
登場人物
👴おじいちゃん...tabクラス
👨お父さん......tablistクラス
😃自分.........role="tab" クリックした自分

-タブ編-
1.クリックしたタブ😃の親要素.tablist👨にアクセスしてお父さんの属性を変更してあげます。
2.お父さんはaria-selected要素を持っています
3.初期状態だと😃はaria-selected="true"と"false"の２種類あるので一旦全部falseにします。理由はタブをクリックしたら前にクリックしたタブはtrueになっているので一度地ならしする必要があるためです。
4.クリックしたタブに😃aria-selected="true"をセットします。
-これでクリックしたタブはtureになり選択状態にcssのスタイルが当たります。

-パネル編-
1.クリックしたタブ😃のおじいちゃん要素.tab👴までアクセスしてその中にあるタブパネルの属性を変更していきます。
2.タブと同様一度、地ならしをするためにp要素にアクセスしてタブパネルを全てhiddenにします。
3.クリックしたタブ😃のおじいちゃん要素.tab👴までアクセスしてその中にあるaria-controlsの値からhiddenを取り除きます。
-これでクリックしたタブパネルからhiddenは取り除かれ表示されます。

test.css

button[role="tab"] {
  border: none;
  background-color: #576066;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  padding: 12px 24px;
  font-weight: bold;
}
button[role="tab"][aria-selected="true"] {
  background-color: #fff;
}

button[role="tab"][aria-selected="false"]:hover {
  background-color: #fff;
  cursor: pointer;
}
div[role="tabpanel"] {
  background-color: #fff;
  border-radius: 0 8px 8px 8px;
  padding: 32px 16px;
}

今回参照した記事はこちら
もっと具体的でわかりやすいです
https://qiita.com/degudegu2510/items/a4a06d52623f89236506