ARIA: tabpanel ロール
ARIA tabpanel は、tab に関連付けられた階層化されたコンテンツのリソースのコンテナーです。
説明
tabpanel ロールは、要素が tab ロールに関連付けられたリソースのコンテナーであることを示します。各 tab は tablist に含まれています。
tabpanel はタブインターフェイスの一部であり、視覚的なタブのグループによって複数の階層化されたビュー間を素早く切り替えることができる一般的なユーザー体験パターンです。各タブは tab ロールで定義され、これらのタブは tablist ロールを持つ要素内に含まれます。tablist は通常、コンテンツ領域の上側または横側に視覚的に配置され、関連する tabpanel を含んでいます。tabpanel は、タブインターフェイスの tablist 内の対応する tab に関連付けられた各コンテンツペインのコンテナーのロールです。
多くのタブインターフェイスでは、一度に単一の tabpanel のみが表示されます。ただし、一部のインターフェイスでは複数のタブパネルを同時に表示する必要がある場合があります。このような場合、tablist には aria-multiselectable 属性が提供され、tab 要素は aria-expanded 属性を使用して、関連する tabpanel が表示されているかどうかを示します。タブの選択状態は、どのタブパネルが現在の「アクティブな」パネルであるかを示すために使用されます。例えば、これは複数選択可能な tablist 内のタブにフォーカスがある時に Tab キーを押した場合に、キーボードフォーカスがどのタブパネルに移動するかを示すことができます。
単一選択タブインターフェイスでは、現在選択されているタブに関連付けられた tabpanel のみが表示されます。選択されていないタブに関連付けられた他の全ての tabpanel 要素は、ユーザーから隠されている必要があります。そのため、タブの選択が変更されると、表示されるタブパネルも変更され、以前に表示されていたタブパネルは隠されるようになります。
複数選択タブインターフェイスでは、関連する tab 要素の展開状態に合わせて、複数の tabpanel 要素が表示される場合があります。
タブは個々のパネルへのアンカーリンクとして機能しません。アクティブ化されると、キーボードフォーカスは現在の tab 要素にとどまり、新しく表示された tabpanel に自動的に移動することはありません。タブインターフェイスが、関連するコンテンツセクションを指すページ内ハイパーリンクの基本マークアップパターンに基づいて段階的に拡張される場合があります。JavaScript を使用してこれらの要素をタブ付きインターフェイスに変更する場合、ハイパーリンクのデフォルト動作を防ぐ必要があります。理想的には、これは href 属性を削除または変更することで実現できます。これにより、要素のブラウザーコンテキストメニューからハイパーリンク固有のメニュー項目を削除するという追加の利点もあります。
キーボードフォーカスが tablist または tablist 内の tab にある場合、Tab キーは、フォーカスされているタブ（これは選択されているタブである場合もそうでない場合もあります）から、現在選択されているタブを表す tabpanel に移動するようにプログラムする必要があります。
tablist 内の各 tab は、対応する tabpanel のラベルとして機能できます。各 tab の id を、各 tabpanel の aria-labelledby 属性の値として含めてください。
また、オプションで、tabpanel の id を tab の aria-controls 属性の値として含めることで、各 tabpanel を関連する tab に関連付けることもできます。
タブ付きインターフェイスが初期化されると、1 つの tabpanel が表示され、関連する tab はアクティブであることを示すようにスタイルが設定され、そのプログラム的な状態を反映します。すべての非アクティブな tabpanel 要素は、すべてのユーザーから隠されている必要があります。これは最も一般的には CSS の display: none を使用して実現されます。
このロールの使用に関する詳細な情報については、 ARIA tab ロール の記事を参照してください。
tabpanel がページのキーボードフォーカス順序に含まれることなくフォーカスを受け取れるようにするために、 tabindex="-1" を含めてください。
キーボードユーザーがフォーカスの変更を認識し、現在フォーカスされているコンテンツを認識できるように、tabpanel がフォーカスを受け取った時のスタイルを定義してください。CSS の :focus 疑似クラスを使用するのが最適です。
このタブパターンを使用してカルーセルを作成できます。スライドピッカーコントロールは tablist 内の tabs としてマークアップでき、スライドは tabpanel 要素で表現されます。
関連するロールと属性
tabロール-
関連する
tabpanelの表示を制御します tablistロール-
tab要素のグループです。 aria-labelledby-
アクセシブル名を提供します。パネルを制御する
tab要素を参照します aria-expanded-
複数選択可能な
tablistが使用される場合、必要なtab要素で使用する必要があります。
キーボードインタラクション
tablist ロール定義の tablist キーボードインタラクション を参照してください。
例
tab ロール定義の tabpanel、tab、tablist の例 を参照してください。
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # tabpanel |
| Unknown specification |