APG パターン
タブパターン
タブは、コンテンツのセクションを一度に1つだけ表示するインターフェースパターンです。タブリスト内のタブを選択すると対応するパネルが表示されます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | アクティブなタブにフォーカス移動。タブ内では対応するタブパネルにフォーカス移動 |
| →（右矢印） | 次のタブをアクティブにしてフォーカスを移動（最後の場合は最初に戻る） |
| ←（左矢印） | 前のタブをアクティブにしてフォーカスを移動（最初の場合は最後に移動） |
| Home | 最初のタブをアクティブにしてフォーカスを移動 |
| End | 最後のタブをアクティブにしてフォーカスを移動 |
必要な ARIA
タブリストコンテナ
role="tablist"タブのグループであることを示すaria-labelタブリストのアクセシブルな名前各タブ
role="tab"要素がタブであることを示すaria-selected現在選択されているタブかどうか（true/false）aria-controls対応するタブパネルのIDtabindex選択中のタブは0、それ以外は-1（ロービングタブインデックス）タブパネル
role="tabpanel"タブパネルであることを示すaria-labelledby対応するタブ要素のIDtabindex="0"パネル自体にフォーカス可能にするライブデモ
Tabでタブリストにフォーカスし、←→でタブを切り替え、再度Tabでパネルに移動します。
HTML（HyperText Markup Language）はウェブページの構造を定義するマークアップ言語です。セマンティックなHTML要素を使用することで、アクセシビリティの基盤を作ります。見出し、リスト、フォーム要素などの適切な使用が重要です。
CSS（Cascading Style Sheets）はウェブページの見た目を制御します。アクセシビリティの観点では、十分なコントラスト比、フォーカスインジケーターの表示、レスポンシブデザイン、prefers-reduced-motionへの対応などが重要です。
JavaScriptはインタラクティブな機能を追加しますが、キーボード操作、フォーカス管理、ARIA属性の動的更新、ライブリージョンの通知など、アクセシビリティに配慮した実装が必要です。
ロービングタブインデックス
タブパターンでは「ロービングタブインデックス」を使用します。 選択中のタブだけが tabindex="0" で、 他のタブは tabindex="-1" にします。
<div role="tablist"> <button role="tab" aria-selected="true" tabindex="0">タブ1</button> <button role="tab" aria-selected="false" tabindex="-1">タブ2</button> <button role="tab" aria-selected="false" tabindex="-1">タブ3</button> </div>
よくある間違い
- tablistにrole="tablist"を設定していない
- タブにaria-selectedを設定せず、どのタブが選択中か不明
- ロービングタブインデックスを実装せず、すべてのタブがTab順に含まれる
- 矢印キーによるタブ間の移動が実装されていない
- タブパネルにrole="tabpanel"を設定していない
- タブとタブパネルのaria-controls/aria-labelledbyの関連付けがない
タブパターンでは矢印キーによるタブ切り替えが重要です。 Tabキーはタブリスト全体をスキップして次のフォーカス可能な要素（タブパネル）に移動します。