Accessibility
キーボードフォーカスと操作順を直す
キーボード操作は支援技術だけでなく、フォーム入力や高速操作でも使われます。見えるフォーカス、自然な順番、閉じ込められない動線が必要です。
ui.design: focus-traversalui.design: keyboard
まず確認する症状
- Tab移動中に現在位置が見えない。
- モーダルやメニューを開いた後に抜け出せない、または背面へフォーカスが移る。
なぜ問題か
- キーボードだけで完了できない画面は、主要ユーザーの一部を除外します。
- フォーカス順が視覚順と違うと、フォームや購入導線で混乱します。
診断で見る指標
Tab到達可能性
focus-visible style
モーダル時のfocus trap
Escape/閉じる操作
修正方法
最小修正
focus-visibleを消さない
outlineを消している箇所を戻し、ブランドに合う可視フォーカスへ置き換えます。
推奨修正
操作順をDOM順に揃える
見た目だけorderで並べ替えず、DOM順と視覚順が一致するよう調整します。
さらに改善
開閉UIを状態管理する
メニュー、モーダル、ポップアップはaria属性、初期フォーカス、復帰先を明示します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: Tabだけで主要CTA、フォーム、メニュー、閉じる操作へ到達できるようにしてください。focus-visibleを明確にし、開閉UIでは初期フォーカスと復帰先を設定してください。
参考資料
よくある失敗
- outline: none のまま、クリック操作だけで確認する。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。