公開日:2020-03-21 更新日:2020-09-17

WAI-ARIAに対応したタブを作ってみた（作成方法）【ES6】

最近業務でタブを久々に実装することがあったのでWAI-ARIAに対応ものを作成してみました。

この記事ではその作成したタブをご紹介します。

WAI-ARIAに対応したタブを作ってみた【ES6】

実装するのも

WAI-ARIAに対応
複数タブの設置に対応

デモ

<br /> See the Pen <a href='https://codepen.io/tanukichi5/pen/zYGKENa'>WAI-ARIA対応タブ JavaScript class構文</a> by ssk<br /> (<a href='https://codepen.io/tanukichi5'>@tanukichi5</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

以下、ソースコードの紹介になります。

HTML

<ul class="js-tab-list tab-list" role="tab-list">
  <li class="tab-list__item">
    <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-1" aria-selected="true">
      タブ1
    </button>
  </li>
  <li class="tab-list__item">
    <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-2" aria-selected="false">
      タブ2
    </button>
  </li>
  <li class="tab-list__item">
    <button class="js-tab-button tab-button" type="button" role="tab" aria-controls="tab-panel-3" aria-selected="false">
      タブ3
    </button>
  </li>
</ul><!-- tab-list -->

<div class="js-tab-panel-wrapper tab-content">
  <div id="tab-panel-1" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="false">
    <p>タブ1の内容が入ります。</p>
  </div>
  <div id="tab-panel-2" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="true">
    <p>タブ2の内容が表示されます。</p>
  </div>
  <div id="tab-panel-3" class="js-tab-panel tab-panel" role="tab-panel" aria-hidden="true">
    <p>タブ３の内容です。</p>
  </div>
</div>

role属性とaria属性を使用します。

タブのボタンエリアを.tab-list

タブの内容を表示するエリアを.tab-content

.tab-listにタブのリストと分かるようにrole="tab-list"

タブのボタンにはタブ本体と分かるようにrole="tab"

タブとタブ内容を紐付けるためにaria-controls="tab-panel-1"とタブ内容のidを指定

タブが選択状態にあるかを示すためにaria-selected="true"未選択ならaria-selected="false"

タブ内容にはrole="tab-panel"

そのタブ内容が表示状態にあるかを示すためにaria-hidden="false"非表示ならaria-hidden="true"

CSS（SCSS）

//タブ ボタン
.tab-list {
  display: flex;
}

.tab-list__item {
  flex: 1;
  &:not(:first-child) {
    margin-left: 5px;
  }
}

.tab-button {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #eee;
  cursor: pointer;
  &[aria-selected="true"] {
    background: #3ac8ff;
  }
}
//===============タブ ボタン

//タブ パネル
.tab-content {
  margin-top: 20px;
}

.tab-panel {
  padding: 20px 15px;
  border: 1px solid #eee;
  &[aria-hidden="true"] {
    display: none;
  }
}
//===============タブ パネル

スタイルはサンプル用ですがポイントは以下です

aria-selected属性とaria-hidden属性で表示・非表示状態のスタイルを切り替えます。

JavaScript

class Tab {
  constructor() {
    this.tab_button = document.querySelectorAll('.js-tab-button');
  }

  init() {
    this.attachEvent();
  }

  attachEvent() {
    for(const button of this.tab_button) {
      button.addEventListener('click', (e) => {
        let id = button.getAttribute('aria-controls');
        this.hideContents(id, e);
        this.showContent(id, e);
      });
    }
  }

  hideContents(id, e) {
    //クリックしたタブ、パネルの親を取得
    let button_parent = e.target.closest('.js-tab-list');
    let panel_parent = document.querySelector(`#${id}`).closest('.js-tab-panel-wrapper');

    //表示状態のボタン、パネルの状態を取得
    let active_button = button_parent.querySelector('.js-tab-button[aria-selected="true"]');
    let active_panel = panel_parent.querySelector('.js-tab-panel[aria-hidden="false"]');

    //タブボタン
    active_button.setAttribute('aria-selected', 'false');
    //タブパネル
    active_panel.setAttribute('aria-hidden', 'true');
  }

  showContent(id, e) {
    //タブボタン
    e.target.closest('.js-tab-button').setAttribute('aria-selected', 'true');
    //タブパネル
    document.querySelector(`#${id}`).setAttribute('aria-hidden', 'false');
  }

}

const tab = new Tab();
tab.init();

class構文で記述しています。

少々長いですが、ポイントは以下となります。