キーボード操作でフォーカスが見えないと感じたことはありませんか？タブキーで移動しているはずなのに、どこが選択されているのか分からず操作に戸惑ってしまう経験は、アクセシビリティの観点からも非常に問題です。この記事では、キーボード操作 フォーカス 見えないという状況の原因を明らかにし、CSSやHTMLの具体的な改善手法、最新の指針に基づく実践例を交えてわかりやすく解説します。フォーカスが見えるサイトを作りたい方には必読の内容です。
目次
キーボード操作 フォーカス 見えない 問題の概要
キーボード操作 フォーカス 見えないという問題は、ウェブサイトをタブキーなどのキーボードで操作する際に、どの要素が現在選ばれているのかの視覚的な手がかり（フォーカスインジケータ）がない、または非常に分かりにくい状況を指します。フォーカスが見えないと、リンク先や操作対象を間違えてしまうなどユーザー体験が著しく低下します。
この問題は主にCSSでのスタイル設定が原因で起こります。特に、デフォルトのoutlineを削除しているケースや、CSSリセットが過度に適用されている場合などが典型的です。また、フォーカスインジケータはアクセシビリティ規格であるWCAGの基準にも含まれており、見えない状態は規格違反とされることもあります。
フォーカスインジケータとは何か
フォーカスインジケータは、キーボードなどで操作したときにどの要素にフォーカスがあるかを示す視覚的な要素のことです。通常、リンクやボタン、入力フィールドなどがフォーカスを持つ可能性があります。ブラウザにはデフォルトでoutline（青色や点線など）が設定されており、これが視覚的な指標となります。
フォーカスが見えることで、スクリーンリーダーを使うユーザーやマウスが使えないユーザーがどこにいるかを把握しやすくなり、安全でスムーズなナビゲーションが可能となります。
フォーカスが見えない原因
フォーカスが見えない主な原因は複数あります。CSSでoutlineを none にしてしまっていたり、:focusスタイルが上書きされて見えなくなっていたり、背景色とインジケータの色が十分なコントラストを持っていなかったりすることが多いです。さらにstickyヘッダーや重なり合う要素などによって、フォーカスが画面外または隠れるケースもあります。
また、デザインの調整でbox-shadowを使ってインジケータをスタイリングする場合、それが高コントラストモードでは非表示になることがあり、アクセシビリティを損なう可能性があります。
アクセシビリティ規格との関係
フォーカスの見た目は、WCAGという国際的なアクセシビリティ規格において明確に定められています。特にWCAGバージョン2.1および2.2では、キーボード操作時にフォーカスが見えること（Success Criterion 2.4.7）やフォーカスの外観（Focus Appearance）に関する具体的な要件（厚さ、コントラスト比など）が設定されています。
見えないフォーカスはこれらの基準に違反する可能性があり、法的規制や公共的サイトのアクセシビリティ遵守要件に関わることがあります。
よくある誤設定とその見直しポイント
フォーカスが見えない設定は意図しないところで導入されていることが多く、一覧で把握し見直すことが重要です。テーマやCSSフレームワーク、リセットCSS、カスタムスタイルなど、複数のレイヤーでフォーカススタイルが消えている場合があります。
またフォーカスの色・厚さ・位置・背景との重なり・表示切り替えのタイミングなど、細かい条件にも影響されます。こうした点をチェックし、最新のスタイルと使われ方に照らして見直すことが対策の第一歩です。
outlineを無効化しているCSS規則
多くのデザイナーが「デフォルトのフォーカスリングがうるさい」と思い、`:focus { outline: none; }` や `outline: 0` を使うことで強制的に消してしまうことがあります。この設定があると、キーボード操作ではフォーカスが移動しても視覚的なヒントが完全に失われてしまいます。
テーマやリセットCSSにこうした記述が無いかを探し、必要であれば削除または上書きしてフォーカス表示を回復する必要があります。
`box-shadow` や `border` の影響
フォーカスリングをカスタムスタイルで表現する際、outlineではなくbox-shadowやborderを使うことがあります。ボーダーを使うとレイアウトが変わる場合があり、box-shadowは高コントラストモードでは表示されないこともあるため、慎重な設計が必要です。
もしbox-shadowを使うなら、outlineも併用するか、少なくとも高コントラストモードでnon-noneな代替スタイルが動作するよう確認することが望まれます。
色・コントラストの問題
フォーカスの色が薄すぎたり、背景と近すぎたりする場合、存在はしていても見分けが付きにくくなります。アクセシビリティ基準では、フォーカスの輪郭と背景とのコントラスト比が少なくとも3対1以上であることが求められています。
デザインテーマや配色を確認し、特に暗色背景と明色文字、またはその逆の場合に視認性を確保できる色を選択することが大事です。
フォーカスを見えるようにする具体的な対策
フォーカスが見えない問題を解決するためには、CSSでのスタイル修正が中心となります。以下に対策をまとめます。最新のブラウザは `:focus-visible` をサポートしており、キーボード操作とマウス操作を区別してフォーカスリングを表示する設計が可能です。
また、アクセシビリティチェックツールを使ってテストすることも効果的です。
`focus-visible` 擬似クラスの活用
` :focus-visible` はキーボードまたはアシスティブ技術によるフォーカスに対してのみフォーカスリングを表示し、マウスクリック時などには表示しないよう制御できます。これにより、デザイン上不要なフォーカス表示が抑えられ、キーボードユーザーにはしっかりと視覚的手がかりが残ります。
具体的には、次の CSS をテーマやスタイルシートに追加します。
:focus-visible { outline: 2px solid 色; outline-offset: 2px; }
このように書くことで、フォーカスリングの太さやずれを調整しつつ表示の強さを確保できます。
`outline` の適切な利用方法
outline はレイアウトに影響を与えずにフォーカスリングを追加できるプロパティです。太さ、色、スタイルを調整し、見やすくすることが可能です。特に厚さは最低でも 2px 以上とし、輪郭が背景と要素自体の色と区別できる色に設定します。
さらに、outline-offset を使ってフォーカスリングを要素の境界から少し離して表示することで、線が重なったり見えづらくなったりする問題を軽減できます。
高コントラストモードやユーザー設定への対応
ユーザーが高コントラストモードを使っている場合、box-shadow や border のみでフォーカスを表現していると見えなくなる可能性があります。このようなモードでは outline がより信頼性が高いため、outline を主なフォーカススタイルにすることが推奨されます。
また、アクセシビリティ設定を持つ OS やブラウザでは、標準の outline を尊重するような設計が望まれます。
タブ順序やキーボーダビリティの確認
フォーカスが見えるようにしても、そもそもフォーカスが移動できない要素、またはタブで抜けられない要素（キーボードトラップ）があると意味がありません。タブ順序が論理的か、フォーカス可能な要素すべてにフォーカスが移動できるかを確認しましょう。
また、カスタムウィジェットなどでkeydown イベントをハンドルする場合には、Shift+Tab でも逆方向のフォーカス移動が可能であることを必ず担保する必要があります。
最新の動向とブラウザ対応
最近では、ウェブのアクセシビリティに関する規格やブラウザの挙動がフォーカス可視性に関して明確化されており、`:focus-visible` のサポートが広がってきています。最新情報では、この擬似クラスを使った正しいフォーカススタイルの設定が推奨されており、多くのブラウザで標準的に機能するようになっています。
また、WCAG 2.2 ではフォーカス外観 (Focus Appearance) の具体的な要件が提示され、以前よりも厳格な基準が導入されています。これに対応することで、フォーカスの見える化はデザインとアクセシビリティの両立につながります。
WCAG 2.2 の加わった基準
WCAG の新しい基準では、フォーカス表示の最小の輪郭幅とコントラスト比が明文化されました。特に Focus Appearance の成功基準では、フォーカスリングが要素の境界に沿って 2px の輪郭を持つことや、焦点が未取得の状態と取得した状態の間に少なくとも 3対1 のコントラスト比を確保することが求められています。
これらは単なる装飾ではなく、ユーザーがフォーカスの有無を視覚的に判断できるようにするための重要な要件です。
主要ブラウザでのサポート状況
:focus-visible はほぼすべての主要ブラウザでサポートされており、設定を追加することで古いブラウザを使用しているユーザーへの対応も可能です。また、フォーカスリングのスタイルが動作しないブラウザでは、フォールバックとして :focus を使って表示させることが一般的です。
加えて、高コントラストモードなどユーザー側の設定環境に影響される要素をスタイル設計の中で考慮することが、最新のベストプラクティスです。
実践例：HTMLとCSSでフォーカスを見えるようにするコード例
ここでは、WordPressテーマやカスタムサイトで実際に使える具体的なHTMLとCSSのコード例を紹介します。フォーカスが見えるようにするためのスタイルを段階的に整えることで、デザインを崩さずアクセシビリティを改善できます。
また、テーマに応じてクラス名やセレクタを調整する必要がありますが、基本パターンとして応用可能です。
基本スタイルの例
まずは全てのインタラクティブ要素に対してフォーカス可視化を整える基本的なスタイルです。デフォルトの outline を尊重し、マウス操作時には表示を抑制する構成にします。こうすることでユーザー操作に応じて自然な挙動を実現できます。
例：
<style>
:focus-visible {
outline:3px solid #007acc;
outline-offset:2px;
}
:focus:not(:focus-visible) {
outline: none;
}
</style>
デザインテーマに合わせたカスタマイズ例
テーマの色やフォントなどと調和させつつフォーカスリングをデザインする例です。背景色や文字色とのコントラストを確保しつつ、ボーダーやアウトライン、シャドウを使い分けます。
例：
<style>
.button, .link, input, textarea {
/* 通常時のスタイル */
}
.button:focus-visible, .link:focus-visible, input:focus-visible, textarea:focus-visible {
outline:2px solid #ff5722;
outline-offset:3px;
border-radius:4px;
}
</style>
WordPressテーマへの組み込みのポイント
WordPress ではテーマの style.css や子テーマの CSS にこれらのスタイルを追加するのが一般的です。プラグインでリセットCSSが導入されている場合は、その影響を受けている可能性があるため、優先度を高めるセレクタを用いたり !important を適切に使用したりして確実に適用されるようにします。
また、テーマの JavaScript によってフォーカスを制御している場合もあるので、それらがフォーカスを失わせるような動作をしていないか併せて確認します。
テストと確認方法
フォーカスが見えるように設定した後は、実際に動作を確認することが肝心です。キーボードのみで操作して、フォーカスインジケータが見えるか、タブ順序が論理的かどうかをユーザー視点でチェックすることが大切です。
また、アクセシビリティ評価ツールを活用して、自動診断や視覚的な判定を補助する方法も有効です。
手動テスト手順
まずブラウザをキーボードだけで操作し、タブキーでリンクやボタン、入力フィールドなどを順番に移動します。移動するたびにフォーカスインジケータが確実に visible かどうか確認します。Shift＋Tab を使って逆方向にも戻れるか確認します。
さらに、sticky ヘッダーやポップアップなど動的要素がある場合、それらにフォーカスが隠れたり画面から見切れたりしないか注意深く見ます。
自動ツールでのチェック
アクセシビリティ評価ツールは、WCAG の成功基準に照らしてフォーカスインジケータの有無やコントラスト、最小サイズなどを自動で検出できます。これにより、人間のテストで見落としがちな部分を補うことができます。
結果を可視化して、修正が必要な要素がどこかを把握し、優先度をつけて改善を行いましょう。
ユーザー環境での確認
最終的には実際のユーザー環境での動作確認が不可欠です。異なるブラウザ、異なるOS、さらには高コントラストモードなどアクセシビリティ設定を持つ環境でフォーカスの見え方をチェックします。
モバイルブラウザやスクリーンリーダー利用時でもフォーカスが追えるかどうかを確認することで、多様なユーザーの視点に寄り添えます。
よくある誤解と回避策
フォーカス表示に関しては、誤解やデザイン過剰によるトラブルが多くあります。ここでは代表的な勘違いとその回避策を紹介します。
フォーカスは見えるけれど薄くて気づかない
フォーカスリングが実際には存在しているが、色や太さが薄すぎてユーザーに気づかれないというケースがあります。特に色覚に障害がある方や視力が弱い方には区別が難しいため、最低でもコントラスト比 3:1 を確保し、輪郭の太さも要素のサイズに応じて適切に設定すべきです。
マウス操作でクリックしたあとフォーカスリングが残る見た目が悪いと思う
多くのデザイナーがマウスからのクリック時にもフォーカスリングが表示されることを「残念なデザイン」と感じ、クリック時には非表示にしたいと考えます。この場合は `:focus:not(:focus-visible)` を使って、マウス操作時のフォーカスリングを抑制しながらキーボード操作時には表示する方法が効果的です。
`tabindex` の使い過ぎによる混乱
tabindex 属性を使ってフォーカス可能な要素を追加することは有効ですが、0 より大きい値をむやみに使うとタブ順序が直感的でなくなります。可能な限り自然な HTML の順序に沿って要素を配置し、tabindex は 0 を使うにとどめることが望ましいです。
まとめ
キーボード操作 フォーカス 見えないという問題は、アクセシビリティの基本でありながら見落とされがちな部分です。フォーカスインジケータが見えないと、キーボードだけで操作するユーザーは現在地を見失い、サイトの利用に大きな支障をきたします。
主な原因は outline を無効化するスタイル、色やコントラストの不十分、フォーカスが隠れるレイアウト構造、tabindex の乱用などです。これらに対して、`:focus-visible` の活用、outline スタイルの適切な設定、高コントラストモード対応、タブ順序の整備などが有効です。
サイトのデザインとアクセシビリティを両立させるためには、フォーカスが確実に見えるようにすることが不可欠です。たとえ見た目を整えたくても、ユーザーの状態を把握できる視覚情報は失ってはいけません。今日紹介した対策を取り入れて、すべてのユーザーにとって操作しやすいウェブサイトを目指しましょう。
コメント