keyboard-review について
keyboard-reviewは、ページや操作コンポーネントのキーボードアクセシビリティを評価するスキルです。フォーカス順序や動的コンテンツ、ランドマークを確認し、優先度付きのレポートを作成します。
主な機能
- 01ページ全体のTab順序確認
- 02一般的なコンポーネントの操作検証
- 03動的コンテンツのフォーカスと通知確認
- 04スキップリンクとランドマークの確認
- 05優先度付きアクセシビリティレポート
活用シーン
- 01ページ全体のキーボード操作を監査
- 02メニュー、モーダル、タブ、フォームを検証
- 03コンテンツ更新後のフォーカス処理を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/keyboard-reviewを入力して読み込まれたか確認します。
詳細
キーボードレビュー
キーボードアクセシビリティに焦点を当てたレビューです。これは、インタラクションにおける最も重要な要件です。キーボードが使えなければ、スクリーンリーダーもスイッチデバイスも使えず、運動機能に障害のある多くのユーザーが完全に利用できなくなります。
プロセス
ステップ 1：すべてを Tab キーで確認する
ブラウザーのアドレスバーから開始し、ページ全体を Tab キーで順に移動します。次の点を記録してください。
- 到達できない要素 — Tab キーでスキップされるインタラクティブな項目
- 順序の誤り — フォーカスが予想外の場所に移動する
- 見えないフォーカス — フォーカスは移動するが、どこにあるのか見えない
- キーボードトラップ — フォーカスが領域に入ると、そこから出られない
ステップ 2：すべてのコンポーネントをテストする
keyboard-navigation を使用して、存在する各コンポーネントの種類をテストします。
- メニュー：Tab キーで開き、矢印キーで移動し、Escape キーで閉じる
- モーダル：フォーカスが内部に閉じ込められ、Escape キーで閉じ、閉じた後にフォーカスが戻る
- タブ：矢印キーでタブ間を移動し、Tab キーでパネルのコンテンツに移動する
- フォーム：Tab キーでフィールド間を移動し、Enter キーで送信する
- カスタムウィジェット：ロールに応じた適切なキーボード操作パターンを確認する
ステップ 3：動的なコンテンツをテストする
画面上のコンテンツが変化したときに、次の点を確認します。
- 適切な場合、新しいコンテンツにフォーカスが移動するか
- スクリーンリーダーのユーザーに変更が通知されるか
- コンテンツが削除されたとき、フォーカスが論理的な場所に移動するか
- 読み込み状態が通知されるか
feedback-and-status を使用して、すべての動的な変更が aria-live 領域またはフォーカス管理によって通知されることを確認します。
ステップ 4：スキップリンクとランドマークを確認する
- 「メインコンテンツへスキップ」があり、機能するか
- ARIA ランドマーク（バナー、ナビゲーション、メイン、コンテンツ情報）があるか
- キーボードユーザーが繰り返しのナビゲーションを効率的にスキップできるか
出力
キーボードアクセシビリティレポートを提出します。
- 合否の概要 — すべてのタスクをキーボードで完了できるか
- Tab 順序マップ — 問題箇所を示した実際のフォーカス順序
- コンポーネントの結果 — インタラクティブな各コンポーネントの合否
- 動的コンテンツの結果 — コンテンツ変更時のフォーカス管理
- 修正リスト — 深刻度（ブロッカー、重大、軽微）の高い順
コメント
Markdown 対応