accessibility / HTML dialog / focus
HTML dialogのfocus復帰を確認する
dialogのopen、close、Escape、focusの戻り先、背景のinertを固定例で確認します。既存アプリのdialogや外部設定は変更しません。
dialogの操作契約
見た目が開いても、focusの戻り先やEscapeの扱いが決まっていなければkeyboard利用者は迷います。実装前に契約を分けて確認します。
| ケース | 確認点 | 判断 |
|---|---|---|
| open-focus-entry | openでdialog内へfocus | 最初の操作要素へ移動 |
| close-focus-return | close後のfocus | 起点triggerへ戻す |
| escape-cancel | Escape / cancel | 閉じて戻り先を復元 |
| inert-background | modal中の背景 | 操作対象から外す |
| missing-return | 戻り先がない場合 | 実装前に決める |
確認の順番
- open直後にdialog内のfocus位置を確認する。
- close、Escape、cancelそれぞれの終了理由を確認する。
- close後にtriggerへfocusが戻るか確認する。
- modal中に背景が操作対象から外れるか確認する。
このページは固定例とローカルdialogだけを扱います。ユーザー入力、外部通信、アプリ設定変更はありません。