Tabキーの移動先が見えない？フォーカス表示の確認と改善方法

Tabキーを1回ずつ押し、今選んでいる場所を見る

Tabキーは、キーボードで次の項目を選ぶキーです。ページを開き、1回ずつ押してリンクやボタンへ進みます。Shiftキーを押しながらTabキーを押すと、反対の方向へ戻れます。

今、Enterキーなどで操作できる場所が「選択位置」です。技術的にはフォーカスと呼びます。ボタンの周りの枠、背景の変化などが、選択位置を知らせる印になります。項目を選べることと、その場所が目で分かることを分けて確認してください。

確認するページ、部品、ブラウザー、画面の横幅、始める位置をそろえます。キーを押すたびに、どこを選んでいるかを見ます。マウスで一度押したときの表示だけでは、キーボードで印が見えるかは分かりません。途中でマウスを使った場合は、始めの条件に戻して試します。

現在位置が分からないと、利用者はどのボタンを操作するのか判断しにくくなります。W3Cの説明も、キーボードで今どこを操作できるか分かる表示を目的にしています。印が一瞬出ただけでなく、必要な操作中に追えるかを確かめます。

参考：W3C：キーボードの現在位置が分かる表示

ボタンに進めたことと、印が見えたことを分ける

相談ボタンに進めたとしても、その場所が分かりやすいとは限りません。印が出るか、ボタンや印がほかの案内に隠れないかを見ます。ボタンを押した後の結果も必要なら別に確認し、見た目だけで送信や受付までできたとは判断しません。

次の図は、説明用の別々の記録です。最初は相談ボタンへ進んだ記録がありますが、そのときは印を見つけられませんでした。もう一つは印が見えた記録があり、ボタンの上部が画面上部の固定された案内と重なっています。ボタン全体が隠れた記録ではありません。二つ目は最初の問題を直した結果ではありません。

表示設定の詳しい記録では、最初の輪郭指定がnone、もう一つが2px solid #0658a6となっています。noneはその輪郭を描かない値です。後者は輪郭の太さ・種類・色を表す説明用の文字列です。背景など別の印の有無や原因は、この値だけでは分かりません。すべてのボタンへ貼る推奨値でもありません。

図の内容を文章で読む

説明用の別々の二記録。印を見つけられなかった記録：説明用の記録の名前は印を見つけられなかった記録、確認した環境と幅は作業用サイト・Chrome・390幅の条件、押したキーと操作はTabで操作対象へ移動、選んだ部品は相談ボタン、その部品へ進んだかは到達した記録あり（true）、選択位置の印は見えたかは当該観測では印を見つけられなかった、輪郭を描く表示設定の記録はnone（この輪郭を描かない値）、画面の案内との重なりは未確認、ほかの印の表示は未確認、原因は未確認、修正後の結果は未確認、ボタンを押した後の結果は未確認。印と対象の上部の重なりを記録：説明用の記録の名前は印と対象の上部の重なりを記録、確認した環境と幅は別の作業用記録・Chrome・390幅の条件、押したキーと操作はTabで操作対象へ移動、選んだ部品は相談ボタン、その部品へ進んだかは到達した記録あり（true）、選択位置の印は見えたかは印が見える記録あり、輪郭を描く表示設定の記録は2px solid #0658a6（輪郭の太さ・種類・色の説明用の記録）、画面の案内との重なりは対象の上部が固定ヘッダーと重なる記録。対象全体は隠れていない、ほかの印の表示は未確認、原因は未確認、修正後の結果は未確認、ボタンを押した後の結果は未確認。二つ目は一つ目の修正後ではない。noneだけでほかの印がないことや原因を確定しない。2pxと色は架空の記録で共通基準ではない。一部の重なりだけで全基準の失敗としない。

PC原寸画像を開く · スマホ原寸画像を開く

二つの記録では、ほかの印、原因、修正後、ボタンを押した結果がまだ分かっていません。説明図は修正の成功を示すものではなく、選んだ場所・印・重なりを分けて見るための比較です。項目ごとの記録は、必要に応じて補足を開いて確認できます。

参考：MDN：入力方法に応じたフォーカス表示

制作担当は、印に使われている表示設定を調べる

制作担当は、今選ばれているボタンやリンクに、どの表示設定が使われているかを調べます。CSSはページの表示を整える指定です。文字や画像の設定と同じように、選択位置の印にも適用される指定があります。

Chromeの開発者ツールでは、Elementsで対象の部品を選びます。Stylesは表示の指定を見る場所、Computedは実際に適用される計算済みの値を見る場所です。輪郭のoutlineだけでなく、枠線・影・背景など、印として使っている表示も確かめます。指定がほかの設定で上書きされている場合は、その元を調べます。

設定にある:focusは今選ばれている部品を表す条件です。:focus-visibleは、ブラウザーが選択位置の印を示すべきだと判断したときに使われる条件です。文字列が設定の中にあるだけで、実際のキー操作中に使われたとは判断できません。

開発者ツールで一時的にこの状態を指定すると、表示を調べる助けになります。ただし、これは診断用の操作です。一時指定を解除してページに戻り、実際にTabキーで進んだ結果を確かめます。テーマやプラグインの名前だけで原因を決めず、その部品へ適用された設定を読みます。

制作担当へ確認を依頼するときは、ページのURL、対象の部品、使ったブラウザーと画面幅、キー操作の手順を添えます。「印が見えたか」と「ほかの案内に重なったか」を分けて書くと、同じ条件で確かめやすくなります。

例えば、印は見えるものの、ボタンの上部が固定ヘッダーに重なる場合は、次のように伝えられます。以下は依頼文の例なので、条件や結果を実際に確認した内容へ置き換えてください。

「確認したページは［URL］です。Chromeで画面幅を390pxにし、ページ上部からTabキーで相談ボタンまで進みました。選択位置の印は見えますが、ボタンの上部が固定ヘッダーと重なります。ボタン全体は隠れていません。同じ条件で、ボタンと印の見え方、表示位置を確認してください。原因と、ボタンを押した後の動作は未確認です。」

印を見つけられなかった場合も、その観測をそのまま伝えます。原因を推測して書き足すより、操作手順と見えた結果をそろえることが、調査の助けになります。

参考：Chrome公式：StylesとComputed、状態を指定した診断

参考：MDN：:focusと:focus-visibleの違い

画面上部の案内に、ボタンや印が隠れないか確かめる

画面を動かしても上部に残る案内を、固定ヘッダーと呼びます。キーボードで選んだボタンの文字や領域、選択位置の印が、この案内の下へ入っていないかを見ます。以前の画像ではなく、キーでその場所へ進んだ時点の画面で確認します。

上部の案内だけでなく、開いたメニューや、画面に残るほかの案内が重なる場合もあります。閉じたときと開いたときで見え方を確かめ、必要に応じてスクロール後の表示も見ます。

W3Cの最低基準は、選ばれた部品全体が制作者の内容によって隠れないことを扱います。一部が重なったというだけで、その基準への違反を決めつけません。一方、一部が見えているから印の見やすさまで十分とは言えません。読みやすくする改善と、基準の判定は分けて考えます。

図の二つ目では、相談ボタンの上部が重なり、全体は隠れていません。この条件を保って、文字や印を見分けやすくする場所を調べます。色の見分けやすさを評価する場合は、実際の背景と対象を測ります。記録の色だけで合格を決めることはできません。

参考：W3C：対象が全体を隠されない最低基準と条件

印を消す指定や重なる配置を、必要な場所だけ直す

印が見えない場合は、まず標準の印が使えるか、印を消す指定がその部品へ適用されていないかを制作担当が確認します。新しい設定が別の設定で上書きされていないかも調べます。原因が分かった部品と条件に、修正を絞ります。

独自の印を付けるなら、部品の背景や周りでも見分けられ、必要な操作中に表示されるようにします。外側に輪郭を出しても、周りの表示範囲や重なりで見えなくなる場合があります。図の2pxの指定をすべての対象へ貼るのではなく、実際の場所に合う表示を選びます。

上部の案内に隠れる場合は、案内と本文の配置、対象へ進んだときの表示位置を調整します。選択位置の印を直すために、ページ全体のキー操作やプログラムを理由なく作り直す必要はありません。変更前の版と直した箇所を残し、ほかの表示への影響も比較できるようにします。

開発者ツールで一時的に印が出たことと、保存した修正がページへ反映されたことは別です。保存後のページを読み直して試します。サイト全体の設定を戻したり、すべての印を消したりすることを、原因確認の代わりにはしません。

修正後と公開先で、同じキー操作を試す

修正後は、同じページ、ブラウザー、画面幅、始める位置からキーで進みます。対象に印が出るか、前後へ移っても現在位置が分かるか、関係するメニューなどを開いても隠れないかを確かめます。ボタンを押す結果は、試験の宛先を決めて別に確認します。

公開先も、作業用の画面とは別に確かめます。次の説明用の記録は、公開先をまだ調べていないものです。どの部品へ進み、どんな印が見えたかという結果はありません。作業用の記録を、そのまま公開先の結果に使うことはできません。

キーで選んだ場所に印が見え、操作中も位置を追えるかが確認の要点です。分かりにくい場所があれば、その部品の表示設定と重なりを調べ、修正後に同じキー操作で確かめてください。

キーボードで進む順序、フォーム入力、拡大表示なども点検したい場合は、次の記事で確認する範囲を整理できます。本稿は、今選んでいる場所を見分ける印と、その隠れ方を扱います。

企業サイトのキーボード・入力・拡大を点検する

まとめ：選んだ場所の印と、隠れ方を分けて確かめる

Tabキーで対象へ進めることと、今選んでいる場所の印が見えることを分けて確認します。印が見えても、ボタンや印が画面上部の案内などに隠れていないかを確かめることが要点です。

一つの表示設定だけで原因を決めず、その部品に使われている枠・背景などの印と、重なる配置を調べます。本文の二つの架空記録は修正前後ではなく、修正の成功や公開先の結果は未確認です。例の太さや色も、全サイト共通の基準にはしません。

まず確認するURL・ブラウザー・画面幅・始める位置を決め、Tabキーを1回ずつ押して、どの部品で印が見えにくいかを記録してください。印の見え方と重なりを分けて制作担当へ伝え、修正後と公開先で同じ操作を試します。ボタンを押した結果は、表示の確認とは別に確かめます。