キーボードフォーカスとは？初心者でも分かる使い方と重要ポイント共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

キーボードフォーカスとは何か

キーボードフォーカスとは、ウェブサイトやアプリの中で「今、どの要素がキーボード入力を受け取れる状態にあるか」を指す用語です。要するに、どの部品が文字を打つ対象になるのかを示す目印のことです。ページ上で何かを入力したいとき、ボタンを押したいとき、リンクを開きたいときなど、フォーカスがどの要素にあるかを意識することが基本となります。

実際には、タブキーを押してフォーカスを移動させると、フォーカスが当たっている要素が変わります。フォーカスが当たっている要素には、通常 フォーカス表示 という点線やカラーの枠が表示され、キーボードで操作している人にも現在の位置が見えるようになっています。視覚表示だけでなく、スクリーンリーダーなどの支援技術にもフォーカス情報は伝わり、読み上げ順序にも影響します。

キーボードとフォーカスの基本

ページ上の多くの要素は、本来はマウスのクリックで選ぶことを想定していますが、キーボードだけでも操作できるように設計するのがフォーカスの役目です。テキスト入力欄、ボタン、リンク、チェックボックスなどは、フォーカスを受け取りやすくする工夫が必要です。正しくフォーカスを設けると、マウスを使わなくても全機能にアクセスできるようになり、使いやすさが大きく向上します。

なぜ重要か

アクセシビリティの観点から、キーボードだけで全ての機能にアクセスできることはとても重要です。障害を持つ人や、マウスを使えない状況の人にとって、キーボードフォーカスが正しく設計されているかどうかが、サイトの利便性を大きく左右します。さらに、検索エンジンのクローラーがサイトを理解する際にも、論理的なフォーカス順序はSEOにも影響を与えることがあります。

実践的な使い方

まず、通常の要素は自然な順序でフォーカスが当たるように作られています。tabindexを使うことで、フォーカスの順序を調整できます。 tabindexの値を0にすると、自然な順序に従ってフォーカスを受け取れるようになり、-1にするとフォーカスは移動できなくなります（プログラム的にのみフォーカスさせたい場合に使います）。

また、JavaScriptを使って要素に焦点を当てたいときは、要素に対して焦点を当てる関数を呼び出します。たとえば、あるボタンがクリックされた後に次の入力欄へ移動させたい場合、focusを使います。具体的には対象の要素を取得してから、その要素に対してフォーカスを与える処理を記述します。このとき、フォーカスが正しく発生したかを確認することも大切です。

デザインとスタイルのコツ

可視性の高いフォーカス表示を用意することが大切です。CSSでは focus や focus-visible の状態を使って、キーボードでフォーカスがあるときだけ枠を明確に表示するのが理想です。色や太さのコントラストは、読みやすさの観点から十分なコントラスト比を確保しましょう。フォーカスが見えないと、キーボード操作が難しくなります。

落とし穴と対策

よくある問題として、カスタムの部品を作るときにフォーカスを失いやすい点があります。カスタムボタンやドロップダウンを作る場合でも、フォーカスを受け取れる構造にし、開いたときにもフォーカスが適切に動くように設計しましょう。これは タブ順の乱れを避けるためにも重要です。完成度を高めるには、自然な順序とフォーカス表示の恒常性を保つことがポイントです。

実用的な表と手順

下の表は、キーボードでの基本操作と目的をまとめたものです。

<th>操作

目的
Tab	次のフォーカス可能要素へ移動
Shift+Tab	前のフォーカス可能要素へ移動
Enter/Space	選択を確定・操作を実行
フォーカス時	要素の状態を示す外見を表示

この表を参考に、サイトを作るときは必ず フォーカスの順序を意識してください。順序が乱れると、キーボードだけでの操作が難しくなり、使い勝手が落ちます。

テストのコツ

実際に自分のサイトをキーボードだけで操作してみましょう。Tabで移動、Shift+Tabで戻る、各要素でEnterやSpaceで実行ができるかを確認します。もし不具合があれば、要素のフォーカス可能性やフォーカス表示のスタイルを見直してください。必要であれば画面読み上げソフトを併用して、読み上げられる順序が妥当かをチェックするのも有効です。

実用的なヒントとまとめ

要点は次の3つです。1) フォーカス可能な要素を適切に配置する、2) フォーカス表示を明確にする、3) タブ順を論理的に保つ。これらを守ることで、キーボードユーザーにとって使いやすいサイトやアプリになります。キーボードフォーカスは、単なる機能の話ではなく、誰にとっても使いやすいデザインを作るための基本中の基本です。

キーボードフォーカスの同意語

キーボードフォーカス: 現在、キーボード入力を受け付けている要素。キーボード操作の宛先となる要素のこと。
フォーカス: 操作の対象として“現在選ばれている”要素。キーボードやマウスによる入力先のこと。
フォーカス状態: 要素がフォーカスを持っている状態で、キーボード入力を受け付ける準備が整っていることを示す表現。
アクティブ要素: 現在アクティブ（操作対象となっている）要素。多くの場合、キーボード入力を受け付ける要素のこと。
アクティブな要素: フォーカスを持ち、今まさに操作の中心となっている要素。
現在のフォーカス対象: 現在、キーボード操作の対象として選ばれている要素。
入力フォーカス: 入力を受け付けるフォーカスのこと。テキスト入力欄などで使われる用語。
キーボード操作対象要素: キーボードで操作できる対象として識別されている要素。
フォーカスが当たっている要素: 画面上でフォーカスが当たっている（選択されている）要素。
フォーカス対象要素: キーボード操作の対象として現在選択されている要素。

キーボードフォーカスの対義語・反対語

マウスフォーカス: キーボード操作で移動するフォーカスの対義語として使われる概念。マウスのクリックやホバーなど、マウス操作によって要素にフォーカスが移る状態を指します。
クリックフォーカス: 要素をマウスでクリックしてフォーカスを得る状態。キーボードフォーカスとは異なる入力手段でフォーカスが発生する状況を表します。
非キーボードフォーカス: キーボード操作によるフォーカス移動が想定されない、あるいは機能していない状態。カーソル移動が主な操作手段となっている場合などを指します。
フォーカス不可: その要素がフォーカスを受けられない状態。キーボードのタブ移動などで到達しない、フォーカス可能性が無い設定のことを指します。
フォーカスなし: 現在どの要素もフォーカスを持っていない状態。UX的にはフォーカスの移動先を設けることを前提とした状況を示します。
マウス操作優先フォーカス設計: インターフェース設計がマウス操作を優先しており、キーボードでのフォーカス移動が意図されていない状態を表します。
クリック優先インタラクション: 要素の選択や操作の主体がマウスのクリックであり、フォーカス獲得もクリックを介して行われる設計思想を示します。

キーボードフォーカスの共起語

アクセシビリティ: 障害のある人を含むすべてのユーザーがウェブを使えるようにする設計思想。キーボードフォーカスはアクセシビリティの要素の一つです。
ウェブアクセシビリティ: ウェブ全体の情報・機能を誰でも使えるようにする実践。キーボード操作は中心的な要素です。
WCAG: Web Content Accessibility Guidelinesの略。アクセシビリティ基準の国際的ガイドラインです。
タブ順: キーボードでフォーカスが移動する順序。Tabキーで進む順番のこと。
タブ順序: タブでのフォーカス移動の順序。英語の用語表記の違いとして使われます。
フォーカス状態: 要素に現在フォーカスが当たっている状態のこと。
フォーカス可視: フォーカスが見えるよう表示される状態。
フォーカス表示: フォーカスを視覚的に示す表示。
フォーカスリング: フォーカス時に表示される輪郭の線。
フォーカスインジケータ: フォーカスの有無を知らせる表示要素。
フォーカス管理: ページ内のフォーカスの割り当て・移動を適切に設計・制御すること。
フォーカストラップ: モーダルなどでフォーカスを特定の領域内に閉じ込める仕組み。
tabindex: HTML属性。要素がフォーカスを受け取れるか、またフォーカスの順序をどう扱うかを決めます。
フォーカス可能要素: キーボードでフォーカスを受け取れる要素（リンク、ボタン、入力欄など）。
aria-label: 支援技術に要素の名前を伝える属性。
aria-labelledby: 別の要素をラベルとして参照して説明を伝える属性。
aria-describedby: 補足説明を関連付ける属性。
ARIA: Accessible Rich Internet Applicationsの略。支援技術のための属性群。
onfocus: 要素がフォーカスされたときに発火するJavaScriptイベント。
onblur: 要素のフォーカスが外れたときに発火するイベント。
focus(): JavaScriptでプログラム的に要素へフォーカスを設定するメソッド。
Skip to content: スキップリンクの意味。キーボード操作で主要コンテンツへ移動する機能。
スキップリンク: ページ内のメインコンテンツへ直接移動するためのリンク。
アウトライン: 要素がフォーカスされているときに表示される外枠の表示方法（CSSのoutline）。
フォーカスアウトライン: フォーカス時に表示されるアウトラインの別表現。
focus-visible: CSSのfocus-visible擬似クラス。キーボード操作時にのみフォーカスを可視化します。
キーボードナビゲーション: キーボードだけでページ内を移動・操作する方法。
キーボード操作性: キーボードでの操作が使いやすいかどうかの設計観点。

キーボードフォーカスの関連用語

キーボードフォーカス: キーボード操作で現在フォーカスが当たっている要素のこと。Tabキーで順番に移動し、フォーカスされた要素に対して操作を行います。
フォーカス: 入力を受け取る特定の要素の状態。現在どの要素がアクティブかを示し、スクリーンリーダーにも読み上げ対象として認識されます。
フォーカス可能要素: キーボード操作でフォーカスを取得できる要素のこと。例: input、button、a、textarea、select、contenteditable要素など。
タブフォーカス: キーボードのTabキーでフォーカスが次のフォーカス可能要素へ移動する挙動のこと。
タブインデックス: フォーカスの移動順を制御する tabIndex 属性。0は自然順序、-1はタブで移動しない、正の数は指定順で移動します。
フォーカスリング: フォーカスを受けた要素の周りに表示される視覚的なアウトライン。アクセシビリティ向上の基本となる表示です。
フォーカス表示/フォーカス可視性: キーボード操作時にのみフォーカスを目に見える形で表示する設計方針。WCAG などで推奨されます。
:focus: CSSの疑似クラス。要素がフォーカスを受けている時に適用されるスタイルを指定します。
:focus-visible: キーボード操作などでフォーカスが可視化されるべき場合にのみ適用されるCSS疑似クラス。
:focus-within: 子要素のいずれかがフォーカスを受けているとき、親要素にも適用される状態を示します。
フォーカスイベント: 要素がフォーカスを取得したときに発生するイベント（focus）と、フォーカスが外れたときに発生するイベント（blur）を扱います。
フォーカス喪失イベント: フォーカスが外れたときに発生するイベント。後処理や状態更新に使います。
フォーカス管理: フォーカスの移動順・挙動を計画的に設計・実装すること。ダイアログやSPAで重要です。
フォーカストラップ: モーダルダイアログなどでフォーカスを領域内に閉じ込め、外部へ移動しないようにする技術です。
初期フォーカス: ページ読み込み時に自動的にフォーカスを当てる要素を決める設定のことです。
アクセシビリティ: 障害のある人にも使いやすい設計の総称。キーボード操作・スクリーンリーダー対応を含みます。
WCAGフォーカス可視性: WCAG の要件の一つで、フォーカスを視覚的に示すことを求めるガイドライン。実装としてフォーカスリングの明確化が挙げられます。
ARIAとフォーカス: ARIA属性を用いてフォーカスに関する補足情報や現在の状態を伝え、支援技術の理解を助けます。
aria-activedescendant: フォーカスは親要素にあるが、実際のアクティブ項目を指す参照を設定するARIA属性。リストや複合ウィジェットで有用です。
role=tab: タブ付きUIの各タブを表すARIAロール。キーボード操作で左右キーなどを使って移動します。
tablist: role=tab の集合体を指すARIAロール。タブ群全体を一つのグループとして扱います。
aria-selected: 現在選択されているアイテムを示すARIA属性。タブの状態やリストの選択状態の表示に使います。
タブリスト: タブを集めたUIのこと。role=tablistと一緒に使われ、キーボード操作が行われます。
contenteditable: 属性を付けた要素は直接編集可能になり、フォーカスを受けてテキストを入力できます。
スキップリンク: ページ内のナビゲーションをスキップしてメインコンテンツへ飛ぶリンク。キーボードだけでアクセスするのに役立ちます。