Frontend Academy · レッスン

キーボード操作とフォーカス管理

すべてのインタラクティブ要素に Tab キーで到達できるようにし、ダイアログやルーティングでプログラムからフォーカスを管理し、視認できるフォーカスインジケーターを作成します。

レッスン 4/414 ステップ

「キーボード操作とフォーカス管理」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

キーボード操作が重要な理由

マウスを使えない利用者は多くいます。運動機能に障害のある利用者、スクリーンリーダーの利用者、キーボードを好む熟練者などです。アプリがキーボードで操作できなければ、こうした利用者にとって機能しません。

TabとShift+Tab

Tabは次のインタラクティブ要素にフォーカスを移します。Shift+Tabは前の要素に移します。順序はデフォルトでDOMの順序に従います。これに逆らわず、DOMをタブ順序として使ってください。

デフォルトでフォーカス可能な要素

ネイティブのインタラクティブ要素はフォーカス可能です。a[href]、button、input、select、textarea、summaryなどです。カスタム要素にはtabindexが必要です。

tabindexの値

tabindex="0"：DOM上の位置でタブ順序に含まれます。tabindex="-1"：JavaScript経由でのみフォーカス可能です（スクリプトによるフォーカスであり、Tabでは移動できません）。tabindex=">0"：アンチパターンです。分かりにくいフォーカス順序を作るため、決して使わないでください。

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

フォーカスインジケーターを表示する

代替手段を用意せずにフォーカスのアウトラインを削除してはいけません。WCAGでは、フォーカス可能なすべての要素に視認できるインジケーターを表示することが求められています。

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

:focus-visible擬似クラスは、マウスクリックではなくキーボード操作によってフォーカスが移った場合にだけ適用されます。マウス操作時はすっきりしたスタイルを保ちながら、キーボード操作時にはフォーカスを表示できます。

スキップリンク

最初にフォーカス可能な要素はスキップリンクにします。キーボード利用者がヘッダーのナビゲーションを飛ばして、メインコンテンツへ直接移動できるようにするためです。

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

モーダル内でフォーカスを閉じ込める

モーダルを開いたら、フォーカスを内部に閉じ込めます。最後の要素からTabを押すと最初の要素に戻り、最初の要素からShift+Tabを押すと最後の要素に戻るようにします。Escapeキーでモーダルを閉じます。

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

dialog要素を使う

HTMLのネイティブな<dialog>は、フォーカストラップ、Escapeキーによる閉じる操作、モーダルの背景領域を自動的に処理します。

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

ルート変更後のフォーカス管理

SPAではページが再読み込みされないため、スクリーンリーダーの利用者にはナビゲーションが発生したことを知らせる手がかりがありません。ルート変更時に、新しいページのh1またはmainへフォーカスを移します。

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

フォーカス順序を表示順序に合わせる

DOMの順序が画面上の流れと一致していることを確認してください。CSSで要素の順序を変更すると（flexのorder、gridの配置、position absoluteなど）、タブ順序と表示順序が一致しなくなり、誰にとっても分かりにくくなります。

マウスを片付けてテストする

最も役立つアクセシビリティテストは、マウスを外し、Tab、Shift+Tab、Enter、Space、矢印キーだけでアプリ全体を操作してみることです。そこで行き詰まるなら、利用者も行き詰まります。

理解度チェック

マウスクリックではなくキーボードからフォーカスが移った場合にだけ、フォーカスのアウトラインをスタイル設定できるCSS擬似クラスはどれですか？

対話的なレッスンで答える

キーボード操作の復習

ネイティブのインタラクティブ要素はデフォルトでフォーカス可能です。カスタムウィジェットにはtabindex=0だけを使い、tabindex>0は決して使いません。常にフォーカスを表示し、:focus-visibleを使います。スキップリンクを追加します。モーダル内ではフォーカスを閉じ込め、閉じたら元の位置に戻します。可能な場合はネイティブの<dialog>を使います。ルート変更時にはh1またはmainへフォーカスを移します。マウスを片付けてテストしてください。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「キーボード操作とフォーカス管理」レッスンは無料ですか？

はい。「キーボード操作とフォーカス管理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「キーボード操作とフォーカス管理」で何を学びますか？

すべてのインタラクティブ要素に Tab キーで到達できるようにし、ダイアログやルーティングでプログラムからフォーカスを管理し、視認できるフォーカスインジケーターを作成します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「キーボード操作とフォーカス管理」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る