HTML 要素へのフォーカス設定

HTML 要素にフォーカスを当てる

HTML では、特定の要素にキーボードやマウスを使ってフォーカスを当てることができます。フォーカスが当たると、その要素がアクティブになり、ユーザーの入力を受け入れる状態になります。

フォーカスを受け取ることができる HTML 要素

以下の要素は、通常、フォーカスを受け取ることができます。

• <menuitem>: メニュー項目要素
• <details>: 詳細要素
• <textarea>: テキストエリア要素
• <select>: 選択リスト要素
• <input>: 入力要素 (テキストボックス、チェックボックス、ラジオボタンなど)
• <button>: ボタン要素
• <a>: リンク要素

一般的に、以下の要素はフォーカスを受け取ることができません。

• <img>: 画像要素
• <h1>: 見出し要素
• <p>: 段落要素
• <span>: スパン要素
• <div>: ディビジョン要素

フォーカスを受け取るための属性

フォーカスを受け取る要素に tabindex 属性を設定することで、フォーカスが移動する順序を制御することができます。

• tabindex="-1": 要素はタブ順序から除外されますが、プログラム的にフォーカスを設定することができます。
• tabindex="1": 要素はタブ順序の最初に配置されます。
• tabindex="0": 要素はデフォルトのタブ順序に含まれます。

例

<a href="#" tabindex="1">最初のリンク</a>
<input type="text" tabindex="2">
<button tabindex="3">ボタン</button>

この例では、<a> 要素が最初にフォーカスを受け取り、次に <input> 要素、最後に <button> 要素がフォーカスを受け取ります。

注意

• アクセシビリティを考慮して、タブ順序を適切に設定し、ユーザーがフォーカスを移動しやすいようにしてください。
• 要素がフォーカスを受け取ることができるかどうかは、スタイルシートや JavaScript コードによって変更されることがあります。

HTML 要素へのフォーカス設定：コード例解説

フォーカスを受け取れる要素と tabindex 属性

HTML でフォーカスを受け取れる要素は、主にユーザーが直接操作するインタラクティブな要素です。代表的なものとして、<a>、<button>、<input>、<select>、<textarea> などがあります。

これらの要素に tabindex 属性を追加することで、タブキーを押した際のフォーカス移動の順番を細かく制御できます。

<a href="#" tabindex="1">最初のリンク</a>
<input type="text" tabindex="2">
<button tabindex="3">ボタン</button>

• tabindex="3": ボタンに3番目にフォーカスが当たります。

tabindex 属性の値

• -1
  要素をタブ順序から除外しますが、JavaScript でプログラム的にフォーカスを設定できます。
• 0
  デフォルトのタブ順序に要素を含めます。
• 正の整数
  フォーカス移動の順番を指定します。数値が小さいほど先にフォーカスが当たります。

JavaScript でフォーカスを設定する

JavaScript の focus() メソッドを使うと、プログラム的に要素にフォーカスを当てることができます。

<input type="text" id="myInput">
<button onclick="focusOnInput()">入力欄にフォーカス</button>

function focusOnInput() {
  document.getElementById('myInput').focus();
}

この例では、ボタンをクリックすると、ID が myInput の入力欄にフォーカスが移動します。

フォーカスの状態を制御する

JavaScript の focus() メソッドの他に、以下のメソッドも利用できます。

• activeElement: 現在フォーカスが当たっている要素を取得します。
• blur(): 要素からフォーカスを外します。

<!-- end list -->

// 入力欄にフォーカスを当て、1秒後に外す
document.getElementById('myInput').focus();
setTimeout(() => {
  document.getElementById('myInput').blur();
}, 1000);

アクセシビリティへの配慮

• ARIA 属性
  より詳細なアクセシビリティ情報を付与するために、ARIA 属性 (aria-label, aria-labelledby など) を使用できます。
• スキップリンク
  長いフォームなどでは、フォームの最初や最後にスキップリンクを設置して、ユーザーが目的の場所に素早く移動できるようにすると便利です。
• 論理的なタブ順序
  視覚的に近い要素同士がタブ順序でも近く、ユーザーが直感的に操作できるようにしましょう。

HTML 要素へのフォーカス設定は、Webページの使いやすさを大きく左右します。tabindex 属性や JavaScript のメソッドを使いこなすことで、意図した通りにフォーカスを移動させ、アクセシブルな Web ページを作成しましょう。

• ブラウザによって、フォーカスの挙動がわずかに異なる場合があります。
• tabindex 属性は、アクセシビリティに悪影響を与える可能性があるため、慎重に使用してください。
• focus() メソッドは、フォーカスを受け取ることができる要素に対してのみ有効です。

• フォーカスに関するパフォーマンスの最適化
• アクセシビリティに関するより詳細な情報
• フォーカス状態の変更を検知する方法
• 特定の要素へのフォーカスの設定方法

フォーカス設定の代替方法

HTML 要素へのフォーカス設定には、これまで説明した tabindex 属性や JavaScript の focus() メソッド以外にも、さまざまな方法があります。

autofocus 属性

• 使い方
  

  <input type="text" autofocus>
  

  この例では、テキストボックスに自動的にフォーカスが当たります。
• 説明
  ページ読み込み時に自動的にフォーカスを当てる要素を指定します。

CSS の :focus セレクター

• 使い方
  

  input:focus {
    background-color: yellow;
  }
  

  この例では、入力要素にフォーカスが当たると背景色が黄色になります。
• 説明
  フォーカスが当たった要素に対して、スタイルを適用します。

ARIA 属性

• 使い方
  

  <div tabindex="0" role="button" aria-label="クリックして詳細を表示">詳細</div>
  

  この例では、div 要素にボタンとしての役割を与え、スクリーンリーダーなどで「クリックして詳細を表示」と読み上げられます。
• 説明
  アクセシビリティを向上させるために、要素の役割や状態を記述する属性です。

フォーカス設定の詳細

フォーカスコンテキスト

• 種類
  
  • ドキュメントレベル
    通常の HTML ドキュメント
  • ダイアログ
    <dialog> 要素など
  • カスタム
    JavaScript で作成
• 説明
  フォーカスが移動できる範囲を定義します。

フォーカスリング

• カスタマイズ
  CSS でスタイルを変更できます。
• 説明
  フォーカスが当たっている要素の周囲に表示される視覚的なインジケーターです。

アクセシビリティ

• モバイルデバイス
  タッチ操作では、フォーカスの概念が少し異なります。
• JavaScript フレームワーク
  React, Vue.js などのフレームワークでは、独自のフォーカス管理の仕組みを持っている場合があります。

HTML 要素へのフォーカス設定は、Webページの使いやすさを大きく左右します。状況に応じて適切な方法を選択し、アクセシブルでユーザーフレンドリーな Web ページを作成しましょう。

• モバイルデバイスでのフォーカス
• 特定のフレームワークでのフォーカス管理

• 「モバイルアプリでフォーカスを制御する際に注意すべき点は何ですか？」
• 「React でフォーカスを管理する方法を知りたいです。」