ウェブアクセシビリティに対応した タブUI

サンプル

説明

アクセシビリティに対応したタブUIです。
フォーカスによってタブの切り替えボタンが表示します。
キーボード操作、スクリーンリーダーに対応しています

使用方法

タブの設定
タブの外枠にdata-tab属性を追加します。
オプションを指定したい場合は、このdata-tab属性を持つタグにオプションを追加します。

トリガーの設定
トリガー要素にdata-ac-marks属性を追加します。

コンテンツの設定
コンテンツ要素にdata-ac-body属性を追加します。
コンテンツ要素にdata-tab-panel-label=""属性を追加し、識別用のラベルを指定します。

設定オプション

data-tab-title
説明: スクリーンリーダーで表示するタイトルを指定します。
使用例: data-tab-title="タブのタイトル"
値: タイトルとなるテキスト

その他

スクリーンリーダー用に挿入される要素には.visually-focus ​が付与されます。
次のような装飾を指定してください。

.visually-focus {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  position: absolute;
}

変更履歴

[2024-06-28] 1.0.0
-NEW: 初期リリース