keyboard-navigation について
Keyboard Navigation は、キーボードだけで操作できるインターフェースを設計するためのスキルです。アクセシビリティの原則、コンポーネント別の操作パターン、評価チェックリストを示します。
主な機能
- 01操作要素をキーボードで到達可能にする
- 02フォーカスインジケーターを見やすくする
- 03画面変化に応じてフォーカスを管理する
- 04コンポーネント別のキー操作を定義する
- 05スキップリンクと評価チェックリストを用意する
活用シーン
- 01設計のキーボードアクセシビリティを確認
- 02ダイアログやメニューのキー操作を定義
- 03ドラッグ＆ドロップのキーボード代替を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/keyboard-navigationを入力して読み込まれたか確認します。
詳細
キーボードナビゲーション
すべてのタスクをキーボードだけで完了できるようにインタラクションを設計します。これは譲れない要件であり、あらゆるインタラクションのアクセシビリティの基盤です。
対象となるユーザー
- マウスを使えない運動障害のある人
- スイッチデバイスやマウススティックを使う人
- キーボードを主な入力手段とするスクリーンリーダーのユーザー
- 速さを重視してキーボードを使うパワーユーザー
- 一時的に手や腕を負傷している人
基本原則
すべての要素にアクセスできること
- すべてのインタラクティブ要素が Tab キーでフォーカスできること
- フォーカス順序が画面上の読み取り順序に沿っていること（LTR 言語では左から右、上から下）
- マウスのホバーやクリックでしかアクセスできない要素がないこと
- カスタムコンポーネントには、明示的な tabindex とキーボードハンドラーが必要です
フォーカスが見えること
- すべてのインタラクティブ要素でフォーカスインジケーターが見えること
- 最低限、背景とのコントラスト比が 3:1 の 2px の実線アウトラインを設けること
- 見える代替表示なしに outline: none や outline: 0 を使用しないこと
- フォーカススタイルをインターフェース全体で統一すること
- 確認方法：どの要素にフォーカスがあるか、常に見てわかりますか？
フォーカスを適切に管理すること
- モーダルを開いたら、モーダル内にフォーカスを移動すること
- モーダルを閉じたら、モーダルを開いた要素にフォーカスを戻すこと
- コンテンツを削除したら、論理的に次の要素にフォーカスを移動すること
- ページのセクションが動的に更新されたら、フォーカスを適切に管理すること
- 意図せずフォーカスを閉じ込めないこと（開いているモーダル内のみで閉じ込めます）
コンポーネント別のキーボード操作パターン
ナビゲーションメニュー
- Tab キーで最上位項目間を移動します
- 矢印キーでドロップダウン内を移動します
- Enter キー／Space キーでメニュー項目を有効にします
- Escape キーで開いているドロップダウンを閉じ、起動要素にフォーカスを戻します
タブ
- Tab キーで、すべてのタブを移動するのではなく、アクティブなタブパネルに移動します
- 矢印キーでタブ間を移動します
- Enter キー／Space キーでタブを有効にします（自動切り替えでない場合）
モーダル／ダイアログ
- 開いたときに、モーダル内で最初にフォーカス可能な要素にフォーカスを移動します
- Tab キーでモーダル内のみを循環します（フォーカストラップ）
- Escape キーでモーダルを閉じます
- 閉じたときに、起動要素にフォーカスを戻します
フォーム
- Tab キーで、論理的な順序でフィールド間を移動します
- エラーメッセージをフォーカス可能にするか、読み上げられるようにします
- 最後のフィールドで Enter キーを押すか、表示されているボタンを使って送信します
- 必須フィールドの表示に色だけを使わないこと
ドラッグ＆ドロップ
- 必ずキーボード操作の代替手段を用意します（上／下に移動するボタン、選択して配置する操作、または矢印キーによる並べ替え）
- 現在の位置と実行可能な操作を読み上げます
カルーセル／スライダー
- 矢印キーで項目間を移動します
- 前／次に移動するボタンを表示します
- フォーカス時またはホバー時に自動再生を一時停止します
- 現在の位置を読み上げます（「5 件中 2 件目」）
スキップリンク
すべてのページで、最初にフォーカス可能な要素として「メインコンテンツへスキップ」リンクを設けます。これにより、キーボードユーザーは繰り返し表示されるナビゲーションを飛ばせます。
- フォーカス時に表示します（フォーカスされるまで視覚的に隠してもかまいません）
- アンカーを使ってメインコンテンツ領域にリンクします
- 長いページでは、追加のスキップリンクも検討します（「検索へスキップ」「フッターへスキップ」）
評価チェックリスト
- すべてのインタラクティブ要素に Tab キーでアクセスできる
- フォーカス順序が画面上の順序と一致している
- すべての要素でフォーカスインジケーターが見える（2px、コントラスト比 3:1）
- モーダル内でフォーカスがトラップされ、閉じたときにフォーカスが戻る
- すべてのカスタムコンポーネントにキーボードハンドラーがある
- ドラッグ＆ドロップにキーボード操作の代替手段がある
- スキップリンクがあり、機能する
- インターフェースのどこにもキーボードトラップがない
- 動的コンテンツの変更時にフォーカスが適切に管理される
コメント
Markdown 対応