この技術・考え方で達成できること
- 現在地の視覚化: マウスを使わずに画面を操作する際、自分が今どこにいるのかが常にハッキリとわかる
- 操作の予測可能性: 「次にEnterキーを押せば、どのボタンが実行されるか」を事前に確認できる
- キーボードトラップの回避: 画面内でフォーカスを見失うことによる、離脱や操作のフリーズを防ぐ
例: この対応は、マウスを操作することが困難なユーザー（運動障害）だけでなく、「愛用していたマウスが突然壊れて、予備が見つからずにキーボード操作を余儀なくされている人（状況的な障害）」がECサイトで無事に決済を完了できるかどうかを決定づけます。
なぜ対応が難しいか（または後回しにされるか）
ブラウザ標準のフォーカスリング（よくある青い太枠や点線の四角形）を、デザイナーやステークホルダーが「洗練されたUIデザインに合わず、ダサい・ノイズになる」と嫌うことが最大の原因です。
その結果、「クリックした時に青い枠が出るのを消してほしい」という一言で、エンジニアが悪気なくCSSに outline: none; や box-shadow: none; を書いてしまい、現在地を完全に消滅させてしまうアンチパターンが世界中で横行しています。
デザイン時に配慮すべき障壁（バリア）
フォーカス表現の設計において、以下のミスマッチ（障壁）を取り除く必要があります。
- 恒常的な障害（運動障害・上肢障害）: 関節リウマチや麻痺などにより、マウスの細かいポインティングができず、主にキーボードの「Tabキー」を使って画面内のリンクを飛び飛びに移動している状態。
- 状況的な障害（デバイス非依存）: テスターやパワーユーザーで、マウスを持たずにショートカットキーやTab移動だけでフォーム入力を素早く終わらせたい状態。
これらの状況において、「フォーカス（現在地）が見えない＝画面が見えないのと同じ（完全な操作不能）」という決定的なバリアを生み出します。
解決パターン（Before/After）
❌ Before: outline: none; による現在地の消失
- マウスクリック時の枠線を消すため、すべてのインタラクティブ要素（
<button>,<a>,<input>）に一律でoutline: none;を指定している。
なぜ問題か: 代替の視覚的フォーカスを定義せずに消すことが最大の問題です（消すこと自体が常に悪というわけではありません）。キーボードのTabキーでリンクを展開しても、画面上の見た目が一切変わらず、自分がどこを選択しているのか全くわからなくなります。
✅ After: デザインシステムに適したフォーカス状態の定義
- CSSの
:focus-visible疑似クラス（キーボード操作時にだけフォーカスを見せやすくするCSS）を使用し、マウスクリック時（タップ時）は枠を出さず、キーボードでフォーカスした時だけ、十分なコントラストを持った美しいフォーカスの装飾（太めのbox-shadowなどを2重に重ねる等）を表示する。
なぜ改善されるか: 「ダサい枠は出したくない」というデザイナーの要望を満たしつつ、キーボード操作で画面を巡回するユーザーには、自分がいま操作している位置をスタイリッシュに、かつ力強くガイドできるようになります。
見た目と機能性の両立（デザイナー × エンジニア）
❌ クリック時のノイズ vs キーボードでの迷子
デザイナーの視点: 「ボタンをクリックするたびに青い枠が毎回チカチカ出るのは邪魔で不格好です。消してください」 エンジニアの視点: 「フォーカスを完全に消してしまうと、キーボードアクセス時に重大な問題（WCAG違反）になります」
なぜ衝突するか:
かつてのブラウザの実装では、「マウスクリック」と「Tabキーによるフォーカス」が区別されておらず、単一の :focus で制御されていたため、どちらかの体験を犠牲にする必要があったからです。
どう合意するか:
現代のCSS標準である :focus-visible の強力さを共有します。
「クリックした時にはフォーカス枠は出ず、Tabキーで移動した時だけフォーカス枠が出るように実装できますよ」とエンジニアから提案します。
そしてデザイナーは、ただ「デフォルトの青枠を使う」のではなく、「自分のブランドのカラートークンに合った、美しくて目立つフォーカス専用のスタイル（例: 外側に2pxの透明な隙間を空けて、3pxのプライマリーカラーのシャドウを展開する）」をState（状態）の1つとしてデザインシステムで定義（トークン化）し、合意します。
実践チェックリスト
最低ライン（Must）
[ ] キーボード（Tabキー）でナビゲーションした際、すべての機能する要素（リンク、ボタン、フォーム入力欄など）で、はっきりと視覚的な変更（フォーカスインジケーター）が表示される
[ ] フォーカスを完全に無効化する記述（:focus { outline: none; } など）を、代替の視覚的フォーカス表現を用意せずに絶対に使用していない
理想ライン（Better）
[ ] CSSの :focus-visible を使用し、マウス・タッチ操作の邪魔をせずにキーボードユーザーにのみフォーカスを表示している
[ ] フォーカスインジケーター（枠線や<span class="no-glossary">背景色）が、隣接する<span class="no-glossary">背景色に対して 3:1 以上のコントラスト比を持っている（フォーカスインジケーター自体も背景に対して見える必要があるため。WCAG 2.2 フォーカス・アピアランス要件）
[ ] :focus-visible 時のスタイルを汎用的なCSS変数（Custom Properties）として定義し、すべてのコンポーネントで統一されたフォーカス体験を提供している
まとめ
- この記事の本質: フォーカスインジケーターは「消す邪魔者」ではなく、デザインシステムの一部として美しく「設計すべき状態（State）」である。
- 誰のどんな課題を解決するか: マウスが使えないユーザーやパワーユーザーの「いま自分がどこにいるのかわからない迷子状態」。
- 実務での判断軸: 「マウスを横にどけて、Tabキーだけでこのページの下部にあるボタンを押せますか？」
- 次に学ぶべき知識: キーボードナビゲーション（より良い移動順序とフォーカストラップの防止）
目的別のおすすめ:
- WCAGのコントラスト基準の前提知識を確認するなら → 色彩とコントラスト比
- コードでの実装例（フォーカスリングの美しい書き方）なら → UIXHEROのコンポーネントカタログ
