タブ間を矢印キーで移動する
キーボードでタブを移動できるようにします。
「タブ間を矢印キーで移動する」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
タブはクリックするだけではない
正しいタブセットは、マウスだけでなくキーボードで操作できる必要があります。APGパターンでは、矢印キーでタブ間を移動できることが求められます。
tablistは1つのTab停止位置
Tabを押すと、各タブで停止するのではなく、タブセット全体に1回だけ到達するべきです。tablist全体が、ページの移動順序における1つの停止位置として動作します。
Tab移動できるタブは1つだけ
アクティブなタブにはtabindex="0"を設定し、それ以外のタブにはtabindex="-1"を設定します。これがroving tabindexであり、Tabですべてのタブに移動するのを防ぎます。
<button role="tab" tabindex="0">Profile</button>矢印キーでフォーカスを移動する
横方向のtablistでは、Right and Left arrowsでタブ間のフォーカスを移動します。これにより、キーボードユーザーがタブセットを操作できます。
縦方向のタブには上下キーを使う
タブを縦に並べる場合は、代わりにUp and Down arrowsを使います。aria-orientation="vertical"を設定して、レイアウトを支援技術に知らせてください。
<div role="tablist" aria-orientation="vertical">...</div>端で先頭と末尾をつなぐ
最後のタブにフォーカスがある状態で、次の矢印キーが押されたら、最初のタブへwrapさせます。ループさせることで、予測しやすくスムーズに移動できます。
HomeとEndで大きく移動する
ショートカットを2つ追加します。Homeで最初のタブにフォーカスを移し、Endで最後のタブに移します。タブが多い場合でも、すばやく移動できるようになります。
ロービングインデックスを移動する
矢印キーでフォーカスを移動したら、tabindexを更新します。新しくフォーカスされたタブを0に、元のタブを-1に設定してから、そのタブにフォーカスを移します。
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();自動アクティベーション
自動アクティベーションでは、タブにフォーカスを移すと、そのタブが選択されてパネルも表示されます。すぐに反応する一方、パネルの表示にコストがかかる場合は負荷が大きくなることがあります。
手動アクティベーション
手動アクティベーションでは、矢印キーはフォーカスだけを移動し、選択するにはEnterまたはSpaceを押します。パネルの表示にコストがかかる場合はこちらを優先してください。
これが重要な理由
矢印キーに対応していないと、キーボード利用者はすべてのタブとパネルをTabキーで順番に移動しなければなりません。適切なキー操作によって、ウィジェットは単に到達できるだけでなく、効率的に使えるようになります。
簡単な確認
横方向のtablist内のタブにフォーカスがあります。ユーザーが右矢印キーを押すと、どうなるべきでしょうか。
まとめ：矢印キーによるナビゲーション
タブでは、矢印キーに加えてHomeとEndを使い、ロービングtabindexを利用することを学びました。パネルの表示コストに応じて、自動アクティベーションか手動アクティベーションを選択します。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「タブ間を矢印キーで移動する」レッスンは無料ですか？
はい。「タブ間を矢印キーで移動する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「タブ間を矢印キーで移動する」で何を学びますか？
キーボードでタブを移動できるようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「タブ間を矢印キーで移動する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。