サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

フォーカス順序とは？キーボード操作を迷わせないウェブアクセシビリティ設計

greeden

フォーカス順序とは、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キーで確認する手順

  1. ページの先頭からTabキーを押し、最初の操作対象を確認します。
  2. リンク、フォーム、ボタンが画面の意味に沿った順序で移るかを追います。
  3. 表示上は近い項目なのに、フォーカスが離れた場所へ飛ばないかを確認します。
  4. 必要な操作要素が順序から抜けていないかを確認します。
  5. モーダルなどの動的な画面を開閉し、操作の開始位置と戻り先を確認します。

コードだけを見て判断せず、実際の画面をキーボードだけで一通り操作すると、順序の飛びや戻り先の不備を見つけやすくなります。

よくある問題と見直す場所

起きていること 見直す場所 修正の考え方
フォーム内で離れた項目へ飛ぶ HTMLの並び、正のtabindex 入力の流れに合わせてHTMLを並べ、数値による順序指定を減らします。
見た目の順序と操作順が違う レイアウトとHTMLの関係 画面上の配置とHTMLの並びを同じ流れにそろえます。
モーダルを閉じた後に現在位置を見失う 閉じる処理のフォーカス制御 モーダルを開いた操作要素へフォーカスを戻します。
必要なリンクやボタンへ到達できない 操作要素のHTMLとtabindex 対象がTab順序に含まれているかを確認します。

公開前の確認ポイント

フォーカス順序は、HTMLの並びを整えたうえで、実際の画面をTabキーで操作して確認します。
見た目と操作の流れをそろえることが、利用者を迷わせないページ設計につながります。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご興味がある方は、詳細をご覧ください。

モバイルバージョンを終了