タブ

シンプルなタブ（HTML+CSSのみ）

  • HTML
  • CSS

JavaScriptなしで完結するチェックボックス/ラジオボタンを使った簡易タイプです。アクセシビリティ（A11y）には非対応なのでデモ向けです。

See the Pen 【タブ】HTML＋CSSのみ by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 後続兄弟結合子『~』を使用した方法で、該当のラジオボタンにチェックが入った場合の弟妹要素が対象と表示の切り替えを行っています。
  2. 対象は、チェックが入った以降の .tab__contents 内の .tab__content となりますが、:nth-child() を使用して1番目か2番目かなどを判断しています。

シンプルなタブ

  • HTML
  • CSS
  • JS

HTMLとCSSとJavascriptを組み合わせたシンプルな構成のタブになります。

See the Pen Untitled by 早稲田電子IT教育センター (@wit-it)on CodePen.

  1. タブをクリックすると、内容と連動するコンテンツの表示を切り替えます。
  2. クリックされた対象を Javascript で取得し、連動させる該当コンテンツに is--active クラスを設定し表示させます。

アクセシビリティ（A11y）対応

  • HTML
  • CSS
  • JS

hidden 属性を使用して制御する、WAI-ARIA と整合したタブになります。

See the Pen アクセシビリティ（A11y）対応 2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. 表示制御は hidden 属性を使用し、CSS は状態表現、ARIA は状態の説明役となり、Javascript は状態同期として利用しています。
  2. hidden 属性を使用した場合、視覚的にもスクリーンリーダー的にもフォーカス的にも「存在しないもの」として扱われます。