Tabキーで今どこにいるか、フォーカスの表示を直そう

マウスを乗せると色が変わるのに、Tabキーでリンクを移動すると何も変わらない。現在どこを操作しているかが分からない状態です。今回は架空の地域施設の案内ページで、利用案内から問い合わせへ進むまでのフォーカス表示を点検します。

フォーカスは、現在キーボード操作の対象になっている場所を指します。ページの色やボタンの形をそろえる作業とは別に、操作中の位置が分かる表示を残す必要があります。まずは見た目を変える前の状態を記録しましょう。

マウスから手を離して、消える場所を探す

練習用ページを開き、Tabキーで一つずつ進みます。リンクやボタンへ移ったとき、どこが対象かを指差せるか確かめてください。移動先が見えなくなったら、その前後の要素名と、押したキーをメモします。

ブラウザーやOSの設定によって、Tabキーでリンクへ移る設定が異なる場合があります。そもそも対象へ移れていない状態と、移っているのに枠が見えない状態を分けます。検証時は使用環境とキーボード操作の設定も残しましょう。

WAIのFocus Visibleの解説は、キーボード操作時に現在のフォーカス位置を見えるようにする必要を説明しています。「一度だけ光って消える」表示では、操作を止めて考えている間に位置が分からなくなります。

枠を消す指定と、上書きする指定を確認する

CSSにoutline: noneやoutline: 0があれば、対象と理由を調べます。代わりの表示がないまま指定されているなら、まずその指定を外し、ブラウザー標準の枠が戻るかを確認します。枠を消した理由が「見た目」だけなら、操作中にも位置が分かるデザインへ直します。

独自の表示を付ける場合は、練習用ページのCSSに次のような指定を追加できます。白い背景で使う例であり、どんな背景でもこの色だけで十分とは限りません。

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #174ea6;
  outline-offset: 3px;
}

MDNのfocus-visibleの説明にある通り、フォーカスを明示すべきかの判断にはブラウザーの挙動が関わります。「クリックでは絶対に出ない」という意味ではありません。上の指定を追加するために、すべてのfocusの枠をまとめて消す必要もありません。

枠の色だけでなく、切れと隠れも見る

枠を付けても、周囲の箱で切れていたり、固定ヘッダーの下へ隠れたりすると、現在位置を確かめにくくなります。施設案内のカードの端、ページ下部のボタン、狭い画面で折り返したリンクを順に確認してください。

白い場所と濃い背景の場所があるなら、同じ枠で見分けられるかを別々に調べます。上の太さや色を使ったことだけで、サイト全体の基準を満たしたとは判断しません。必要に応じて背景ごとの色や余白を調整し、もう一度操作します。

また、Tabで移動できないdivに枠を付けても、本来のボタンにはなりません。要素そのものが適切かは、リンクとボタンを役割で選ぶ記事で確認できます。

Tabで進み、Shift＋Tabで戻っても位置が見えるか

利用案内から問い合わせまで進み、ShiftとTabで逆向きにも戻ります。「要素名」「現在位置が見えるか」「枠が隠れないか」を一行ずつ記録してください。リンクならEnterで移動できるかも確かめ、意図しない操作を避けるため練習ページで行います。

フォーカスの見え方だけでなく、順番が不自然ならそれも別の修正項目にします。数値のtabindexで順番だけを強引に変える前に、HTMLの並びを見直しましょう。次の点検には、アクセシビリティの無料レッスンの操作課題を使えます。