タブ

サンプル

buttonロール+aria-pressedを使用する場合

tabロールを使用する場合

SP等でタブを横方向にスクロールさせる場合

使用の前に

非表示のタブ内に含まれるテキストはページ内検索で見つけることができず、ユーザビリティを損なう場合があります。タブ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)）

参考リンク

• タブ型 UI について考える | Accessible & Usable
• タブUIのキーボード操作はユーザーに理解できるのか? | 水無月ばけらのえび日記
• なぜ「タブ」はスクリーンリーダーで読めない？ タブをアクセシブルにする | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い | Web担当者Forum