フォーカスでWebサイトの使いやすさを向上！HTMLとアクセシビリティの重要性
HTMLでフォーカスを受けられる要素
デフォルトでフォーカスを受けられる要素
- フォーム要素:
<input>: テキスト入力、チェックボックス、ラジオボタン、パスワード入力など<select>: ドロップダウンリスト<textarea>: テキストエリア
- ボタン:
<button> - リンク:
<a>(ただし、href属性が空またはjavascript:スキームの場合は除く) - その他:
<audio>: 音声再生コントロール
フォーカスを受けられるように設定できる要素
一部のHTML要素は、属性を追加することでフォーカスを受けられるように設定できます。
<div>:tabindex属性を設定
フォーカスを受けられない要素
以下のような要素は、デフォルトではフォーカスを受けられません。
<p>: 段落<h1>...<h6>: 見出し<img>: 画像<hr>: 仕切り線
フォーカスは、アクセシビリティを考える上で重要な要素です。キーボードのみで操作できるWebサイトを作るためには、適切な要素にフォーカスを設定することが重要です。
例
以下の例は、<div> 要素に tabindex 属性を設定してフォーカスを受けられるようにする方法を示しています。
<div tabindex="0">この要素はフォーカスを受けられます。</div>
このコードを実行すると、ユーザーはTabキーを押してこの <div> 要素にフォーカスを移動することができます。フォーカスされると、要素の背景色が青くなります。
HTML フォーカス サンプルコード
フォーム要素にフォーカスを当てる
この例では、<input> 要素にフォーカスを当てる方法を示します。ページがロードされると、カーソルが自動的にこの入力フィールドに移動します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーカスサンプル</title>
</head>
<body>
<label for="name">名前:</label>
<input type="text" id="name" name="name" autofocus>
</body>
</html>
JavaScriptを使用してフォーカスを設定する
この例では、JavaScriptを使用してボタンをクリックしたときに別の入力フィールドにフォーカスを設定する方法を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーカスサンプル</title>
</head>
<body>
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">メールアドレス:</label>
<input type="text" id="email" name="email">
<br>
<button onclick="document.getElementById('email').focus()">メールアドレスにフォーカス</button>
</body>
</html>
tabindex 属性を使用してフォーカス可能にする
この例では、<div> 要素に tabindex 属性を追加してフォーカス可能にする方法を示します。ユーザーはTabキーを押してこの要素にフォーカスを移動することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーカスサンプル</title>
</head>
<body>
<div tabindex="0">この要素はフォーカスを受けられます。</div>
</body>
</html>
フォーカス状態を取得する
この例では、JavaScriptを使用して要素がフォーカスされているかどうかを確認する方法を示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーカスサンプル</title>
</head>
<body>
<input type="text" id="myInput" onfocus="alert('フォーカスされました！')">
</body>
</html>
これらの例は、HTMLでフォーカスを操作する基本的な方法を示しています。フォーカスに関する詳細については、以下のリソースを参照してください。
HTMLでフォーカスを設定するその他の方法
autofocus 属性は、<input>, <textarea>, <button> 要素にのみ使用できます。この属性が設定された要素は、ページがロードされると自動的にフォーカスされます。
<input type="text" autofocus>
<textarea autofocus></textarea>
<button autofocus>送信</button>
tabindex 属性は、任意のHTML要素に使用できます。この属性の値は、要素のフォーカス順序を決定します。値が大きいほど、フォーカスされるのが遅くなります。0 を指定すると、キーボード操作でフォーカスできるようになりますが、自動フォーカスはされません。
<div tabindex="1">この要素は Tab キーでフォーカスできます。</div>
document.getElementById('myElement').focus();
CSSを使用して、フォーカスされた要素のスタイルを変更することができます。
:focus {
outline: 2px solid blue;
}
アクセシビリティの考慮
html focus
