セレクトボックス形式のタブ

サンプル

表示したい内容を選択してください

1つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

使用の前に

非表示のタブ内に含まれるテキストはページ内検索で見つけることができず、ユーザビリティを損なう場合があります。タブUIを使用する前に、以下のような選択肢も検討してください。

非表示にせずアンカーリンクで遷移させる
スペースの省略のためであれば、アコーディオンコンポーネントを使用する
情報量が多い場合は別ページに分ける

デザイン上の考慮事項

特になし。

実装上の考慮事項

クエリストリングを設定しています。.tabs-select要素にidを指定してください。タブを選択した際に、URLに[タブUIのid]=[選択しているタブパネルのid]の形でパラメータがつきます。

アクセシビリティ上の考慮事項

キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
フォーカスインジケータが正しく表示されることを確認してください（達成基準 2.4.7 フォーカスの可視化 (レベル AA)）。（特にoverflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります）
タブパネルの切り替えを実行する際に、セレクトボックスでの選択に加えてボタン操作も使用してください
（達成基準 3.2.2 入力時 (レベル A)内のH84: アクションを実行するために、select 要素とともにボタンを使用する）。