タブ
サンプル
buttonロール+aria-pressedを使用する場合
1つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
2つ目のタブです。
3つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
tabロールを使用する場合
※タブは矢印キーで切り替えられます。
1つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
2つ目のタブです。
3つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
SP等でタブを横方向にスクロールさせる場合
※タブは矢印キーで切り替えられます。
1つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
2つ目のタブです。
3つ目のタブです。ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
4つ目のタブです。
5つ目のタブです。
6つ目のタブです。
使用の前に
非表示のタブ内に含まれるテキストはページ内検索で見つけることができず、ユーザビリティを損なう場合があります。タブUIを使用する前に、以下のような選択肢も検討してください。
- 非表示にせずアンカーリンクで遷移させる
- スペースの省略のためであれば、アコーディオンコンポーネントを使用する
- 情報量が多い場合は別ページに分ける
デザイン上の考慮事項
- タブを横スクロールさせる場合は、横スクロールが存在することがわかるようなデザインにすることを推奨します。
実装上の考慮事項
-
button要素を使用する場合、基本的にtype="button"を指定します(type属性のデフォルトはsubmitであるため) -
正しく
id属性、aria-labelledby属性、aria-controls属性を設定して、タブとタブパネルを紐づけてください。 -
(推奨)
aria-labelledby属性を用いて、tablistが何についてのタブなのかを紐づけてください。 -
タブの切り替え方法について
- 「矢印(←→)キーで操作する」パターンと、「Tabキーで操作する」パターンの2種類を用意しています。
-
「タブの移動の操作は矢印キーで行う」ということを、デザイン等でユーザーに伝えられそうであれば、「矢印キー操作」パターンを採用してください(上記サンプルでは注釈を入れています)。
それが難しい場合は、「Tabキー操作」パターンを使用してください。 -
タブ(
role="tab")の操作は矢印キーで行うことが一般的ですが、キーボード操作に慣れていないユーザーは、矢印キーで操作できることに気づけないリスクがあるためです。
-
クエリストリングを設定しています。
.tabs要素にidを指定してください。タブを選択した際に、URLに[タブUIのid]=[選択しているタブパネルのid]の形でパラメータがつきます。 -
タブの数が多い場合などは、セレクトボックス形式のタブUIの使用を検討してください。
その際、「使用の前に」セクションに記載してあるような表現方法も検討してください。
アクセシビリティ上の考慮事項
- キーボードでも操作できることを確認してください(達成基準 2.1.1 キーボード (レベル A))。
-
フォーカスインジケータが正しく表示されることを確認してください(達成基準 2.4.7 フォーカスの可視化 (レベル AA))。(特に
overflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります) -
タブUIであることを
role属性を用いて伝えるようにしてください(達成基準 4.1.2 名前 (name)・役割 (role) 及び値 (value) (レベル A))