ウェブアクセシビリティ支援


サンプル



説明

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

使用方法

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

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

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

設定オプション

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

data-tab="〇〇"
説明: タブにユニークな識別子を追加します。からの場合はランダムな英数が入ります。
使用例: data-tab="tab1"

?tab-area=〇〇
説明: URLに「?tab-area=タブボタンID」が指定されていると該当タブを開いた状態になる
注意:data-tabを指定していない場合はランダムな英数になるためdata-tabを指定する必要がある
使用例:
https://masizime.com/page/?tab-area="tab1-2"
タブを識別するためにdata-tab="tab1"などを指定する
ボタンIDは自動で先頭から1,2,3,4となるので2番目を指定したい場合は「tab1-2」となる
値: タブボタンのID

その他

スクリーンリーダー用に挿入される要素には.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: 初期リリース
[2025-01-16] 1.1.0
-URLからタブを開けるように修正


ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから