フォーカスインジケータが“見えない”サイトが多すぎる問題と改善法
2026年 1月 8日
Webサイトのアクセシビリティ改善で見落とされがちなポイントに「フォーカスインジケータの視認性」があります。結論から言うと、適切なフォーカスインジケータがないサイトは、キーボードで操作する人にとって操作不能に近い状態を生み、ユーザー体験とコンバージョンに重大な悪影響を及ぼします。本稿では、なぜこの問題が生じているのか、具体的な改善策を実務視点で解説します。
フォーカスインジケータとは何か
フォーカスインジケータとは、Tabキーなどでフォーカスが移動した際に、どの要素（リンク、ボタン、フォームなど）が現在フォーカスを持っているかを視覚的に示す線やハイライトのことです。キーボード操作主体のユーザーが今どこにいるかを認識するための重要な視覚手がかりであり、アクセシビリティ基準にも明記されています。
- WCAG（Web Content Accessibility Guidelines）では、フォーカスを受ける各UIコンポーネントに対して可視のインジケータがあることが求められています。これは「Focus Visible（2.4.7）」という達成基準です。
- フォーカスインジケータがないと、視認可能なキーボードユーザーが現在アクティブな操作対象を把握できず、サイト操作が困難になります。
見えないフォーカスインジケータが発生する主な原因
フォーカスインジケータが視認できないサイトが多いのは、デザインと実装の優先順位やCSSの扱いに原因があります。
- 多くの開発者がブラウザのデフォルトフォーカススタイルを
outline: none;などで削除してしまい、視覚的な手がかりを奪ってしまっています。これはアクセシビリティ基準でありながら一般的な失敗例です。 - デザインチームが「フォーカスリングが美しくない」という理由で意図的に消してしまい、代替のフォーカスインジケータを設計していないケースが散見されます。
- カスタムUIコンポーネントやJavaScriptで生成するUIでは、フォーカス状態のスタイル対応が漏れていることがよくあります。
なぜフォーカスインジケータは重要なのか
フォーカスインジケータは単なる「見た目の装飾」ではなく、以下のような実務上の理由で極めて重要です。
- キーボード操作主体のユーザーが現在位置を把握できることで、操作の予測性と安心感が増し、離脱を防ぎます。
- アクセシビリティ対応が強化された企業は、BtoBの評価や公共機関・大企業からの評価が高まる傾向があります。
- WCAGの達成基準に準拠することで、法令対応（例：アクセシビリティ対応義務）や企業としての信頼性が向上します。
- フォーカスインジケータの改善は、視覚障害者だけでなく、集中力が散漫なユーザーや低視力ユーザーにも恩恵を与えます。
実務的な改善方法
フォーカスインジケータ改善は小さく見えて大きな成果を生みます。次の手順で確実に改善しましょう。
- まずは現状を可視化するために、Tabキーだけでサイトを操作してみて、どこにフォーカスがあるかが分かるか確認します。これはアクセシビリティチェックの基本です。
- CSSでデフォルトのフォーカスインジケータを消している箇所を見つけ、必要に応じて
:focusや:focus-visible擬似クラスで視認性の高いスタイルを追加します。:focus-visibleはキーボード操作時のみ表示させるため、UXのバランスも取れます。 - 視認性を高めるため、フォーカスインジケータの色と周囲のコントラストが十分に高いものに変更します。色だけでなく、枠線の太さや影などを使って明確に見えるようにします。
- カスタムUIやJavaScriptで生成するコンポーネントにも必ずフォーカスインジケータを実装します。これにはライブラリやフレームワーク標準のアクセシビリティ設定も活用できます。
- すべてのインタラクティブ要素（リンク、ボタン、フォーム等）に対してテストを行い、漏れがないか確認します。自動テストと手動テストを組み合わせると効果的です。
まとめ（実務アクション）
フォーカスインジケータはアクセシビリティの基礎でありながら多くのサイトで軽視されています。実務としては、現状検証、CSSでの必須スタイル追加、視認性向上、全要素への実装とテスト、そして継続的な運用の仕組みづくりが重要です。これを改善することで、操作性が向上し、ユーザー離脱の低減や企業評価の向上にもつながります。