Accessibility
キーボードフォーカスと操作順を直す
キーボード操作は支援技術だけでなく、フォーム入力や高速操作でも使われます。見えるフォーカス、自然な順番、閉じ込められない動線が必要です。
ui.design: focus-traversalui.design: keyboard
まず確認する症状
- Tab移動中に現在位置が見えない。
- モーダルやメニューを開いた後に抜け出せない、または背面へフォーカスが移る。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- キーボードだけで完了できない画面は、主要ユーザーの一部を除外します。
- フォーカス順が視覚順と違うと、フォームや購入導線で混乱します。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
Tab到達可能性
focus-visible style
モーダル時のfocus trap
Escape/閉じる操作
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
Tab順
focus-visible
モーダルの初期フォーカス
Escapeと復帰先
フォーカスが隠れる固定要素
修正方法
最小修正
focus-visibleを消さない
outlineを消している箇所を戻し、ブランドに合う可視フォーカスへ置き換えます。
推奨修正
操作順をDOM順に揃える
見た目だけorderで並べ替えず、DOM順と視覚順が一致するよう調整します。
さらに改善
開閉UIを状態管理する
メニュー、モーダル、ポップアップはaria属性、初期フォーカス、復帰先を明示します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06Tabだけで主要CTA、フォーム、メニュー、閉じる操作へ到達でき、現在位置が常に見える。
- 07モーダルやメニューでは、開いた直後のフォーカス、閉じた後の復帰先、背面への移動制御が設定されている。
コーディングエージェント向け修正指示
目的: Tabだけで主要CTA、フォーム、メニュー、閉じる操作へ到達できるようにしてください。focus-visibleを明確にし、開閉UIでは初期フォーカスと復帰先を設定してください。 追加確認: クリックではなくTab、Shift+Tab、Enter、Space、Escapeで操作し、視覚順とフォーカス順の差を記録してください。
参考資料
よくある失敗
- outline: none のまま、クリック操作だけで確認する。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。