0Pricing
HTML Academy · レッスン

tabindexとaccesskey

キーボード操作の順序とショートカットを制御します。

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

キーボードナビゲーション

マウスを使わないユーザーは、インタラクティブな要素を移動するためにTabキーを使用します：

  • 自然にフォーカス可能な要素：<a href>、<button>、<input>、<select>、<textarea>
  • インタラクティブでない要素（<div>、<span>）はタブ順序に含まれません
  • tabindexによって、要素をタブ順序に含めるかどうかと、その位置を制御できます

tabindex="0"

tabindex="0"を指定すると、インタラクティブでない要素が自然なタブ順序に追加されます：

<div tabindex="0" role="button" onclick="handleClick()">
  Custom Button
</div>
<!-- Now Tab navigates to this div -->
<!-- It receives focus at the natural position in the DOM -->

<!-- Better: use a real button instead! -->
<button onclick="handleClick()">Real Button</button>

tabindex="-1"

tabindex="-1"を指定すると、要素はプログラムからフォーカス可能になりますが、タブ順序からは除外されます：

<div id="modal" tabindex="-1" role="dialog">
  <!-- modal content -->
</div>

<script>
// Open modal and send focus to it:
document.getElementById('modal').focus();
// Modal is now focused but not in the normal tab sequence
</script>

tabindexの正の値は避ける

正のtabindex値（例：tabindex="3"）を指定すると、独自のタブ順序が設定されます。これは避けてください：

<!-- BAD: positive tabindex creates unpredictable order -->
<input tabindex="3">
<input tabindex="1">
<input tabindex="2">

<!-- The tab order becomes: 1, 2, 3, then all tabindex=0 elements -->
<!-- This almost always confuses users and fails WCAG 2.4.3 -->

<!-- Fix the DOM order instead of using positive tabindex -->

SPAでのフォーカス管理

シングルページアプリケーションでは、フォーカスを手動で管理する必要があります：

// When navigating to a new route:
document.querySelector('#main-content').focus();

// When opening a modal:
const modal = document.getElementById('modal');
modal.removeAttribute('hidden');
modal.querySelector('[autofocus], button, [tabindex]').focus();

// When closing a modal: return focus to the trigger
document.getElementById('open-btn').focus();

モーダルでのフォーカストラップ

モーダルが開いている間、Tabキーによるフォーカスがモーダル内にとどまるようにします：

function trapFocus(element) {
  const focusable = element.querySelectorAll(
    'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  element.addEventListener('keydown', e => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    }
  });
}

accesskey属性

accesskey属性を使用すると、要素にキーボードショートカットを割り当てられます：

<button accesskey="s">Submit</button>
<!-- On Windows: Alt+S focuses/activates the button -->
<!-- On Mac: Control+Option+S -->
<!-- On Firefox: Shift+Alt+S -->

<a href="/" accesskey="h">Home</a>

accesskeyの制限

accesskeyには重大な問題があります：

  • 有効化キーはブラウザーやオペレーティングシステムによって異なります
  • ブラウザーのショートカットと競合します（例：Alt+Fはファイルメニュー）
  • デフォルトではスクリーンリーダーから通知されません
  • 実際にはほとんど使われません。使用する場合は、その内容を文書化してください

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

フォーカスのアウトラインは決して非表示にしないでください。キーボードを使うユーザーにとって不可欠です：

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

/* Better: style focus outlines, don't remove them */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
  border-radius: 3px;
}

/* :focus-visible only shows outline for keyboard navigation -->
/* Mouse clicks do not trigger :focus-visible in modern browsers */

スキップリンクパターン

スキップリンクを使うと、キーボードを使うユーザーは繰り返し表示されるナビゲーションを飛ばせます：

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

<nav>... long navigation ...</nav>

<main id="main-content" tabindex="-1">... content ...</main>

<!-- CSS: -->
<!--
.skip-link {
  position: absolute;
  top: -100%;
}
.skip-link:focus {
  top: 0;
}
-->

autofocus属性

autofocus属性を指定すると、ページの読み込み時に要素へフォーカスが移動します：

<input type="search" autofocus placeholder="Search...">
<!-- Useful on search pages or forms with a single primary field -->
<!-- Use sparingly: it can disrupt users who rely on the page top for orientation -->
<!-- Only one element per page should have autofocus -->

確認問題

通常のTabキーによる移動ではスキップしつつ、JavaScriptからフォーカス可能にするtabindexの値はどれですか？

まとめ：tabindexとaccesskey

キーボードアクセシビリティの要点：

  • tabindex="0" — 自然なタブ順序に追加します
  • tabindex="-1" — プログラムからフォーカス可能にしますが、タブ順序には含めません
  • 正のtabindex値は避けてください
  • :focus-visibleのアウトラインは決して削除しないでください
  • キーボードを使うユーザー向けにスキップリンクを実装してください
  • accesskeyは使用できますが、競合があるため実用的な場面はほとんどありません

よくある質問

「tabindexとaccesskey」レッスンは無料ですか？

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

「tabindexとaccesskey」で何を学びますか？

キーボード操作の順序とショートカットを制御します。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「tabindexとaccesskey」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. id、class、style、title
  2. hidden属性
  3. tabindexとaccesskey
  4. カスタムデータ属性data-*
← HTML Academyに戻る