ログインフォーム | Bad UI Museum

フォーム

アカウント作成フォーム
お届け先入力フォーム
プロフィール編集
プラン変更画面
ログインフォーム

フィードバック

ファイルアップロード
商品検索
お気に入りリスト
お問い合わせフォーム
通知パネル
メモエディタ
データ読み込み
ECサイト注文完了
ストレージ設定画面

ナビゲーション

購入フロー（ステップフォーム）
ブログ記事一覧
テキストエディタ
利用規約の確認
ネスト設定画面

データ表示

社員データテーブル
ファイル管理画面
タスク管理テーブル
商品ギャラリー

インタラクション

メール受信トレイ
APIリファレンス
配送先の国・地域選択
タスク優先順位の設定

アニメーション

ドロップダウンメニュー
モーダルダイアログ
設定画面
アクションボタン

UI/UX勉強会教材

ログインフォーム

読み込み中...

ログインフォーム

解説

体験

Tabキーでフォーム内を移動してみてください。Bad版ではどこにフォーカスがあるか見えません。

なぜ問題なのか

キーボードナビゲーションに依存するユーザー（運動障害、パワーユーザー）にとって、フォーカス位置が見えないのは画面が真っ暗なのと同じ。WCAG 2.4.7 違反。

関連する原則・ガイドライン

WCAG 2.4.7: フォーカスの可視化
キーボード操作可能なすべてのUIにフォーカスインジケーターが見えなければならない
WCAG 2.1.1: キーボード操作
すべての機能がキーボードから操作可能でなければならない

ログイン

メールアドレス

パスワード

ログインしたままにするパスワードを忘れた方