先に結論視覚的な順番とTab順を合わせ、現在位置を常に見える状態にします。
ページ先頭から主要操作まで進む
ヘッダー、メニュー、本文、フォーム、CTAの順でTab移動し、見えない要素や同じ場所を何度も通らないか確認します。本文へ飛ぶリンクも用意します。
CSSの見た目だけで順番を入れ替えず、画面の読み順とHTML順を合わせます。スマホ用非表示メニューへフォーカスが入らないことも確認します。
フォーカス枠を消さない
現在どこを操作しているか分かる十分な枠や背景を表示します。ブランドデザインに合わせても、背景との違いが小さくならないようにします。
マウスクリック時とキーボード時の表示を分ける場合も、キーボード利用では必ず見えるようにします。選択中・エラー・フォーカスを別状態として示します。
メニューとモーダルから戻れるようにする
ハンバーガーメニューや確認ダイアログを開いたら、その中へフォーカスを移し、閉じた後は開いたボタンへ戻します。背景の操作へ迷い込まないようにします。
Escapeで閉じる動作、閉じるボタン、確定・取消の順を確認します。削除等をEnter一回で誤確定させない手順も必要です。
入力エラー後の位置を確認する
送信エラー時は概要を伝え、最初の該当項目へ移動できるようにします。入力済み内容を消さず、修正後に元の流れへ戻ります。
実際のキーボード、スクリーンリーダー相当、バーコード入力で通し操作します。画面追加時も自動テストと手動操作の両方で確認します。
相談前にそろえるもの
- Tab順・本文スキップ
- 見えるフォーカス
- 非表示要素の除外
- メニュー・モーダル
- エラー後の移動
全部そろっていなくても構いません。分かる範囲を確認し、業務ルールや金額に関わる部分は担当者と一緒に決めます。