ウェブアクセシビリティ支援
アクセシビリティに対応したタブ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からタブを開けるように修正
