タブコンポーネント: :checkedハックとJSの比較

タブコンポーネントには、アクティブなタブの視覚的なインジケーター、選択時に表示・非表示が切り替わる対応パネル、タブ間のキーボード操作、アクセシブルな ARIA 属性が必要です。これらは :checked ハックを使って CSS だけで実現することも、アクセシビリティを高めるために JavaScript を使うこともできます。

非表示のラジオボタン入力を状態管理に使います。各タブはラジオボタン入力に紐付いた <label> です。ラジオボタンが checked になると、CSS の兄弟コンビネータによって対応するパネルが表示され、アクティブなタブのラベルにスタイルが適用されます。JavaScript は一切必要ありません。

ラジオボタン入力、すべてのラベル（タブ）、すべてのパネルを同じコンテナ内にこの順序で配置します。一般兄弟コンビネータ（~）を使って、checked 状態のラジオボタンと対応するパネルを結び付けます。パネルのデフォルトは display: none にし、一致するパネルには display: block を設定します。

:checked ハックでは ARIA 属性（aria-selected、aria-controls）を更新できず、タブ間の矢印キー操作も有効にできません。また、DOM の順序を入力要素より前にパネルが来ないようにする必要があるため、視覚的なデザイン要件と衝突する場合があります。これらの制約により、真のアクセシビリティには限界があります。

JavaScript のタブコンポーネントは、タブボタンの click イベントを監視し、アクティブなタブに aria-selected を設定し、パネルの aria-hidden を更新して、フォーカスを管理します。この方法なら、ARIA Authoring Practices に沿った完全な ARIA 対応とキーボード操作パターンを実現できます。

コンテナに role="tablist" を、各タブボタンに role="tab" と aria-selected、aria-controls を、各パネルに role="tabpanel" と aria-labelledby を指定します。スクリーンリーダーは、タブの数、位置、選択状態を読み上げます。

タブに対する ARIA Authoring Practices は次のとおりです。Tab キーで tablist に入り、アクティブなタブにフォーカスします。Left/Right 矢印キーでタブ間を移動します。Home/End で最初または最後のタブに移動します。矢印キーで移動するたびに、フォーカスされたタブをアクティブにします（自動アクティベーションパターン）。

[aria-selected="true"] セレクターを使い、下ボーダーや背景色の変更でアクティブなタブをスタイル設定します。これは JavaScript 方式と :checked 方式の両方で機能します。ARIA の状態属性と CSS を同期させられるため、状態を二重に管理する必要がありません。

アニメーションするタブインジケーターは、タブ間をスライドします。インジケーター要素を絶対配置し、JavaScriptでアクティブなタブの寸法に合わせて左位置と幅を設定し、transition: left 200ms ease, width 200ms easeでアニメーションさせます。

小さな画面でタブがコンテナーからあふれる場合は、横方向のスクロール（overflow-x: auto; scrollbar-width: none）を使用するか、モバイルではセレクトドロップダウンにまとめます。セレクト方式では、ネイティブのセレクトとタブパネルの表示状態を同期するためにJSが必要です。

アクセシビリティが重要な制約にならない、単純で重要度の低いUIには:checkedハックを使用します。キーボードユーザーやスクリーンリーダーユーザー向けの本番インターフェース、または監査や法的要件でARIA準拠が求められるアプリケーションには、JavaScriptタブを使用します。

タブにおけるCSSの:checkedハックの主なアクセシビリティ上の制限は何ですか？

:checkedハックは、ラジオ入力と兄弟コンビネーターを使用してCSSだけでタブを切り替えられますが、ARIA対応とキーボードアクセシビリティに欠けます。ARIAロール（tablist、tab、tabpanel）、aria-selectedの管理、Arrowキーの処理を備えたJavaScriptタブによって、本番コンポーネントに必要な、完全でアクセシブルな操作体験を提供できます。