Tabキーを押してみてください。フォーカスはどこに移動しましたか？見えましたか？——多くのWebサービスで、この問いに「わからない」と答えるUIが存在します。
よくある失敗パターンは「マウス操作だけを前提に設計する」ことです。CSSでoutline: noneを設定してフォーカスリングを消す。カスタムドロップダウンをdivで作り、キーボード操作を実装しない。モーダルを開いたままTabキーを押すと、背景のコンテンツにフォーカスが移ってしまう——これらはすべて、キーボードユーザーをUIから排除する設計です。
キーボード操作ができないUIは、運動障害を持つユーザー・スクリーンリーダーユーザー・マウスを使わないパワーユーザーを完全に排除します。WCAGでは「すべての機能をキーボードで操作できること」が達成基準として定められており、これを満たさないサービスはアクセシビリティ法令に違反するリスクがあります。
1. 原則の定義
キーボード操作（Keyboard Navigation）とは、マウス・タッチスクリーンを使わなくても、Tab・Enter・矢印キーなどのキーボードだけですべての機能を操作できるよう設計する原則。
本質は「入力手段に依存しない設計」です。ユーザーがマウスを使えない理由は様々です——運動障害、腱鞘炎、マウスが壊れた、スクリーンリーダーを使っている。どんな理由であれ、キーボードだけでUIのすべての機能が使えることが、アクセシブルなUIの基本条件です。
2. いつ使うか（適用場面）
特に重要になるケース
- フォーム・入力UI: Tabキーで論理的な順序でフォーカスが移動し、Enterキーで送信できるか。
- ドロップダウン・セレクト: カスタムドロップダウンは矢印キーで選択肢を移動し、Enterで選択、Escapeで閉じられるか。
- モーダル・ダイアログ: モーダルを開いたとき、フォーカスがモーダル内に移動し、モーダル内でTabキーが循環するか（フォーカストラップ）。
- ナビゲーション・メニュー: メインナビゲーションをTabキーで移動し、サブメニューを矢印キーで操作できるか。
トレードオフが起きる場面
- カスタムUIコンポーネントの実装コスト: ネイティブHTML要素（
<button>・<select>）はキーボード操作が標準で実装されているが、カスタムコンポーネント（divベースのドロップダウンなど）は自前でキーボード操作を実装する必要があり、コストがかかる。 - Tab順序の管理: 複雑なレイアウトでは、視覚的な順序とDOMの順序が一致しない場合があり、Tab順序が直感に反することがある。
3. なぜ重要か（設計判断の核）
キーボード操作は「障害者対応」ではなく、「入力手段に依存しない設計」の基本だ。
設計判断の基準
- 「このUIは、マウスを使わずにTabキーだけですべての操作ができるか？」→ できなければ、キーボード操作を実装する。
- 「フォーカスが今どこにあるか、視覚的に確認できるか？」→ できなければ、フォーカスインジケータを表示する。
優先順位の考え方
- 1. フォーカスインジケータの表示（最優先）:
outline: noneでフォーカスリングを消すのは最悪のパターン。まずフォーカスが見えるようにする。- 2. Tab順序の論理性: Tabキーを押したとき、視覚的な読み順（左→右、上→下）と一致した順序でフォーカスが移動するか確認する。
- 3. インタラクティブ要素のキーボード操作: ドロップダウン・モーダル・タブなど、カスタムUIコンポーネントのキーボード操作を実装する。
例外条件
- マウス・タッチスクリーン専用の操作（ドラッグ＆ドロップなど）は、キーボード代替手段を提供することが望ましいが、同等の機能が別の方法で提供されていれば許容される場合がある。
4. 具体の設計ルール（チェックリスト）
最低ライン（Must - これ守らないと危険）
これがないと、キーボードユーザーはUIを使えません。
理想ライン（Better - できると強い/プロの品質）
「使える」を超えて「快適に使える」状態です。
5. UI例
同じ「フォーム」でも、キーボード操作の設計でアクセシビリティと使いやすさは大きく変わります。
改善プロセス
outline: noneを削除する: CSSからoutline: noneを削除するだけで、ブラウザデフォルトのフォーカスリングが表示される。これが最も即効性のある改善。- カスタムフォーカスインジケータを設計する: デフォルトのフォーカスリングがブランドと合わない場合は、
outlineやbox-shadowでカスタムスタイルを設計する。コントラスト比3:1以上を確保する。 - Tab順序を確認する: ページをTabキーだけで操作し、フォーカスが視覚的な読み順（左→右・上→下）と一致しているか確認する。
この原則を実装で見る
この原則が実装でどう形になるかを、GUNJO の部品で確かめられます。
6. 関連リンク
- 関連リファレンス（理論）: アフォーダンス (Affordance), シグニファイア (Signifier), マッピング (Mapping)
- 用語集（定義）: アクセシビリティ, WCAG, インクルーシブデザイン
- 関連するUI原則（横）: フォーカス管理 (Focus Management), 代替テキスト・ARIA (Alt Text & ARIA), コントラストと可読性 (Contrast & Readability)
7. まとめ
今日から直せる一手
担当しているサービスをブラウザで開き、マウスを使わずにTabキーだけで操作してみてください。フォーカスが見えない・到達できない要素があれば、今日中にoutline: noneを削除してください。
チームに共有するなら一言 「キーボードで操作できないUIは、マウスが使えないすべてのユーザーへの扉を閉めている。Tabキーを押してみるだけで、問題は見える。」
