キーボード操作とフォーカス順序
すべての機能にキーボードで論理的にアクセスできるようにします
「キーボード操作とフォーカス順序」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
キーボードナビゲーションが必要なユーザー
多くのユーザーがキーボードナビゲーションに頼っています。
- 運動障害のあるユーザー — マウスを使えません
- パワーユーザー — キーボードショートカットを好みます
- スクリーンリーダーのユーザー — すべてキーボードで移動します
- スイッチアクセスのユーザー — キー入力をシミュレートするボタンを使います
標準でフォーカス可能な要素
次のHTML要素は、デフォルトでキーボードによるフォーカスが可能です。
<a href>— Tabで移動し、Enterでアクティブにします<button>— Tabで移動し、EnterまたはSpaceでアクティブにします<input>、<textarea>、<select>— Tabで移動します<details>/<summary>— Tab + Enter
Tab順序
ブラウザーは、次の規則でTab順序を決定します。
- デフォルトではDOM順序 — 要素はHTMLに現れる順序でTab移動します
- 正のtabindex値 — それらの要素が昇順で先にTab移動されます
tabindex="0"— DOM上の位置で、自然なTab順序に追加されますtabindex="-1"— Tab順序には含まれず、スクリプトでのみフォーカスできます
自然なTab順序 = DOM順序
HTMLの読み上げ順序は、視覚的なレイアウトと一致させる必要があります。
<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
<!-- BAD: visually reordered with CSS, DOM order broken:
CSS flexbox order: doesn't affect tab order!
Screen readers and keyboard users follow DOM order, not CSS order -->フォーカスの可視インジケーター
WCAG 2.4.7（レベルAA）：キーボードフォーカスは視認できる必要があります。
/* NEVER do this: */
* { outline: none; } /* removes all focus outlines */
/* GOOD: styled focus indicator: */
:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 3px;
border-radius: 4px;
}
/* :focus-visible shows outline for keyboard only
mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */カスタムフォーカススタイル
デザインシステムのフォーカススタイル：
/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}
/* Always ensure 3:1 contrast ratio between
focus indicator and background (WCAG 2.4.11 Level AA) */論理的なフォーカス順序
フォーカス順序は論理的で予測可能にする必要があります — WCAG 2.4.3（レベルA）：
<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->
<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->スキップリンク
スキップリンクを使うと、キーボードユーザーは繰り返し表示されるナビゲーションを飛ばせます。
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Visually hidden until focused: -->
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #0070f3;
color: white;
padding: 0.75rem;
z-index: 9999;
}
.skip-link:focus {
top: 0; /* visible when focused -->
}モーダルのフォーカストラップ
モーダルを開いている間は、フォーカスをモーダル内に閉じ込める必要があります。
<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->
const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');
function openModal() {
modal.removeAttribute('hidden');
modal.querySelector('button, [tabindex="0"]').focus();
}
function closeModal() {
modal.setAttribute('hidden', '');
trigger.focus();
}キーボードショートカット
イベントリスナーを使ってキーボードショートカットを実装します。
document.addEventListener('keydown', (e) => {
// Close modal on Escape:
if (e.key === 'Escape') closeModal();
// Navigate tabs with arrow keys:
if (e.key === 'ArrowRight') focusNextTab();
if (e.key === 'ArrowLeft') focusPrevTab();
// Submit form on Enter (default behavior in inputs):
// Nothing needed — browser handles this
});キーボードナビゲーションのテスト
キーボードアクセシビリティのテスト方法：
- マウスを片付け、キーボードだけを使う
- Tabを押す — すべてのインタラクティブ要素に移動できますか
- フォーカスインジケーターは常に表示されていますか
- Tab順序は論理的に理解できますか
- マウスを使わずにすべての機能（フォーム、モーダル、ドロップダウン）を使えますか
- Shift+Tabを押して後ろ向きに移動する
確認
キーボードアクセシビリティのために、すべての要素から決して削除してはいけないCSSプロパティは何ですか。
まとめ：キーボードナビゲーション
キーボードアクセシビリティで重要な点：
- すべてのインタラクティブ要素にTabで移動できる必要があります
- DOM順序 = Tab順序 — 視覚的なレイアウトと一致させる
- フォーカスのアウトラインを決して削除しない — カスタムスタイルには
:focus-visibleを使用する - スキップリンクを使うと、繰り返し表示されるナビゲーションを飛ばせます
- モーダルではフォーカスを閉じ込め、閉じるときにフォーカスを戻す
- キーボードだけでサイトを操作してテストする
よくある質問
「キーボード操作とフォーカス順序」レッスンは無料ですか？
はい。「キーボード操作とフォーカス順序」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「キーボード操作とフォーカス順序」で何を学びますか？
すべての機能にキーボードで論理的にアクセスできるようにします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「キーボード操作とフォーカス順序」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。