フォーカス順序とは、Tabキーでウェブページを操作したときに、リンク、ボタン、入力欄などへフォーカスが移る順番です。
順序が画面の構成や操作の流れと合っていれば、マウスを使わなくても次の操作対象を予測しやすくなります。
一方、フォーカスが離れた場所へ飛んだり、必要な項目を飛ばしたりすると、利用者は現在位置や次にすべき操作を見失います。
この記事では、HTMLの自然な並びを起点に、tabindexと動的な画面のフォーカスをどう整えるかを説明します。
フォーカス順序とは
フォーカスは、キーボード操作の対象になっている現在位置を示します。
フォームで入力欄を選んだときや、リンクを選択して実行しようとするとき、その要素にフォーカスが当たっています。
Tabキーを繰り返し押すと、通常はページ内の操作可能な要素へ順に移動します。
たとえば、フォームが「名前、メールアドレス、電話番号、送信ボタン」の順に表示されているなら、フォーカスも同じ流れで進むと、入力作業を理解しやすくなります。
順序が利用者に与える影響
- 現在位置を把握しやすい：直前の項目と次の項目につながりがあれば、ページ内で迷いにくくなります。
- 入力や確認を進めやすい：フォームの表示順と操作順がそろっていれば、項目の飛ばしや重複を減らせます。
- キーボードだけでも操作しやすい：マウスを使わない利用者が、目的のリンクやボタンへ順に到達できます。
スクリーンリーダー利用時に混同しやすい点
スクリーンリーダーの読み上げはページの構造にも関わるため、キーボードのフォーカス順序だけですべてが決まるわけではありません。
ただし、スクリーンリーダーとキーボードを併用してリンクやフォームを操作する場面では、フォーカスが不自然に移ると、現在位置と次の操作対象をつかみにくくなります。
WCAGで扱われるフォーカスの順序
フォーカスの順序は、Web Content Accessibility Guidelines（WCAG）の達成基準2.4.3で扱われています。
詳しい基準の位置づけは、WCAG 2.2「2.4.3 フォーカスの順序」の解説も参照してください。
フォーカス順序を整える4つの方法
1. HTMLの並びを操作の流れに合わせる
ブラウザの基本的なフォーカス順序は、HTMLに記述された要素の並びを起点にします。
そのため、画面を見たときに自然な順序でHTMLを書くことが、最初の対策になります。
<header>
<nav>
<a href="...">サイト案内</a>
</nav>
</header>
<main>
<form>
<label for="name">名前</label>
<input id="name" name="name" type="text">
<label for="email">メールアドレス</label>
<input id="email" name="email" type="email">
<button type="submit">送信</button>
</form>
</main>
<footer>
<a href="...">お問い合わせ</a>
</footer>この例では、サイト案内のリンク、名前、メールアドレス、送信ボタン、お問い合わせのリンクという順に操作対象が並びます。
HTMLを読んだときの流れと、利用者が画面上で進みたい流れが一致しています。
2. 見た目の配置とHTMLの並びをそろえる
画面では左から右、上から下へ並んでいるのに、フォーカスだけが別の場所へ移ると、目で追っている位置とキーボードの現在位置がずれます。
フォームを「名前、メールアドレス、電話番号」の順に見せるなら、HTMLの並びとフォーカス順序も同じ流れにします。
レイアウトを変更したときは、見た目だけを確認して終えず、Tabキーでも同じ順序になるかを確かめます。
3. tabindexの役割を分けて使う
tabindexは、要素をTabキーの移動順に含めるかどうかを調整する属性です。
値ごとの役割を混同すると、HTMLの自然な順序を崩しやすくなります。
| 指定 | 役割 | 使うときの注意 |
|---|---|---|
| 指定なし | リンク、ボタン、入力欄などをHTMLの並びに沿って操作します。 | まずはこの状態で自然な順序になるようにHTMLを整えます。 |
tabindex="0" |
要素を通常のTab順序に加えます。 | 本来は操作要素でないものを操作可能にする場合、役割や操作方法も含めて検討します。 |
tabindex="-1" |
要素を通常のTab順序から外し、必要な場面でプログラムからフォーカスできるようにします。 | 通知先や動的に表示した領域など、目的を決めて使います。 |
| 正の値 | 正の値を指定した要素同士では、数値の小さい要素を先に移動させます。 | HTMLの並びとは別の順序が生まれるため、基本の解決策にはせず、HTML自体を並べ直せないか先に検討します。 |
4. モーダルを開く前後の位置を管理する
モーダルのように画面の一部が動的に開く場合は、表示後に利用者が操作を始める位置と、閉じた後に戻る位置を決めます。
開いたときはモーダル内の適切な操作要素へフォーカスを移し、閉じたときはモーダルを開いたボタンへ戻す流れが分かりやすい設計です。
focus()を一度実行するだけでは、どの要素から操作を始めるのか、閉じた後にどこへ戻るのかが分かりません。
実装全体の考え方は、アクセシブルなモーダルダイアログの設計ガイドで確認できます。
Tabキーで確認する手順
- ページの先頭からTabキーを押し、最初の操作対象を確認します。
- リンク、フォーム、ボタンが画面の意味に沿った順序で移るかを追います。
- 表示上は近い項目なのに、フォーカスが離れた場所へ飛ばないかを確認します。
- 必要な操作要素が順序から抜けていないかを確認します。
- モーダルなどの動的な画面を開閉し、操作の開始位置と戻り先を確認します。
コードだけを見て判断せず、実際の画面をキーボードだけで一通り操作すると、順序の飛びや戻り先の不備を見つけやすくなります。
よくある問題と見直す場所
| 起きていること | 見直す場所 | 修正の考え方 |
|---|---|---|
| フォーム内で離れた項目へ飛ぶ | HTMLの並び、正のtabindex |
入力の流れに合わせてHTMLを並べ、数値による順序指定を減らします。 |
| 見た目の順序と操作順が違う | レイアウトとHTMLの関係 | 画面上の配置とHTMLの並びを同じ流れにそろえます。 |
| モーダルを閉じた後に現在位置を見失う | 閉じる処理のフォーカス制御 | モーダルを開いた操作要素へフォーカスを戻します。 |
| 必要なリンクやボタンへ到達できない | 操作要素のHTMLとtabindex |
対象がTab順序に含まれているかを確認します。 |
公開前の確認ポイント
- HTMLの並びが、ページを利用する順序になっているか。
- 見た目の配置とTabキーの移動が一致しているか。
- 正の
tabindexで順序を作り直していないか。 - 動的な画面を開いた後と閉じた後のフォーカス位置が決まっているか。
- リンク、ボタン、入力欄をキーボードだけで順に操作できるか。
フォーカス順序は、HTMLの並びを整えたうえで、実際の画面をTabキーで操作して確認します。
見た目と操作の流れをそろえることが、利用者を迷わせないページ設計につながります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご興味がある方は、詳細をご覧ください。