§05-11Search & Navigation

tab bar

横並びのタブで表示内容を切り替える。

同じ対象の異なる側面を一画面内で切り替えて見せる。設定や詳細ページで情報を分けつつ、移動の感覚を軽くしたいときに使う。

実装のポイント

role=「tablist」と aria-selected を付け、左右キーでタブ間を移動するロービングフォーカスにする。選択中のタブは URL に反映すると共有できる。