スタッフブログ

タブはなぜ難しい？

ウェブでよく使われるUIのひとつが「タブ」。
見た目はシンプルですが、実際にアクセシビリティ対応を行うと「ロールや属性の付与」「選択状態の管理」「キーボード操作」など考えることが多く、実装難度は意外と高めです。
タブをUIとして選択しないという手段もありますが、必要なケースもあります。

よくある惜しい実装例

• キーボード操作できない

• 現在地が伝わらない

• すべてtabindex="0"

こうした実装を避けるため、ここでは APG（ARIA Authoring Practices Guide） をベースにしつつ、利用シーンに合わせて調整できる実装方法を紹介します。
https://www.w3.org/WAI/ARIA/apg/patterns/

1) ロールと要素を正しく関連付ける

タブUIの基本は 「どことどこが結びついているか」を明示することです。
tablist・tab・tabpanel のロールを付与し、aria-controls・aria-labelledby で相互参照を作ります。参照IDは一意であることが必須です。

2) ロービングタブインデックスを理解

Tabキーで移動したときに、選択中のタブだけがフォーカス可能にするのが「ロービングタブインデックス」です。aria-selected とセットで更新するのがポイントです。
これにより、矢印キーやTabキーでの移動が直感的かつスムーズになります。

3) キーボード操作（矢印＋Home/End）

タブは キーボード操作のしやすさが大事です。
横型なら ←/→、縦型なら ↑/↓ を割り当て、Home/End で先頭・末尾に移動できるようにします。
循環移動（最後の次は最初へ）も実装すると操作性が上がります。
また、aria-orientationで 向きを明示することも大切です。
これにより、縦型タブでもスクリーンリーダー・キーボード操作の両方に正しく伝わります。

タブとスクリーンリーダー対応について

主要な支援技術での挙動は以下の通りです。
特に PC-Talker ユーザーにとっては「タブUIそのものが見えない」課題が残ります。

• NVDA（Windows）：○ タブを認識する

• VoiceOver（iOS / Mac）：○ タブを認識する

• TalkBack（Android）：○ タブを認識する

• PC-Talker（Windows）：△ タブを認識しない

PC-Talker向け改善案

他のスクリーンリーダーでは少し冗長になりますが、補助的にスクリーンリーダー用テキストなど用意することで改善できる場合があります。「現在は〇〇のタブを表示中です」といった短い一言を補足的に伝えるイメージです。
プロジェクトの性質や利用者層に応じて、採用してみてください。

まとめ

タブのアクセシビリティ実装は難しく見えますが、ポイントを押さえればシンプルです。

1. ロールや要素で関係を作る

2. 選択中だけtabindex=0とaria-selected="true"

3. 矢印キー操作を入れる

4. 向きをaria-orientationで伝える

この4つを押さえるだけで、支援技術ユーザーにとってぐっと快適になります。

告知

2025年10月3日（金）21:00 - 26:00 オンライン開催の「#朝までマークアップ 3（JS編）」に出演いたします。
当日は、アクセシビリティを考慮したUIの話をします。
この記事にご興味を持っていただけましたら、ぜひご参加ください！