リソース · 32

アクセシブルなフォームと回復可能なエラーを設計する

入力をガイドし、失敗を説明し、タスクの進行状況を保持する。

更新済み · 3 min

テーブルの上のスマートフォンとノートパソコン イラスト · 架空の場面

このガイドが達成するのに役立つこと

  • フィールドを制限する
  • 名前とガイド
  • エラーの説明
  • リカバリテスト

クイックチェック

  • すべてのフィールドに分かりやすい名前が付けられているか?
  • 入力前に想定されるフォーマットが説明されているか?
  • エラーメッセージは、該当するフィールドと修正方法を示しているか?
  • 有効な値は保持されているか?
  • キーボードとズーム機能を使ってタスクを完了できるか?

手順

  1. 1

    タスクから始める

    タスクを完了するために必要なデータと、ユーザーが理解する必要のある手順のみをリストアップする。 トランザクションに関係のないリクエストは削除する。

    成果物:最小限のフォームとフィールドの根拠。

  2. 2

    ラベルとグループ化

    各コントロールに分かりやすいラベルを付け、関連する選択肢をグループ化し、ヘルプを近くに配置します。 読みやすさとタブ順序を確認します。

    成果物:テスト済みの構造とラベル。

  3. 3

    ミスの防止

    送信前に書式例と状態制約を提示します。 フィールドが必須であることを示すために色のみを使用しないでください。

    成果物:手順と入力状態。

  4. 4

    各エラーの説明

    検証後、概要をアナウンスし、各問題を対応するフィールドに関連付け、解決方法を説明します。 正しい値とコンテキストを保持します。

    成果物:修正可能なエラーシナリオ。

  5. 5

    障害への対応

    入力エラー、ビジネス上の拒否、タイムアウト、サーバー障害を区別します。 リクエストが成功したと偽らず、次のステップを示します。

    成果物:状態ごとのメッセージとリカバリ。

  6. 6

    実際のタスクをテストする

    キーボード、ズーム、モバイル、適切なアシスタンスを使用して、成功と失敗を再現する。 阻害要因を測定し、修正して再テストする。

    成果物:タスク完了の証拠。

管理指標

指標測定対象最初のアクション
完全性ラベルとヘルプ付きの必須フィールド曖昧なコントロールを修正する
エラー説明とフィールドリンク付きの失敗メッセージの書き換え
復旧修正後も値が保持される状態管理を修正する
タスクキーボードとズームを使用して完了した操作障害を取り除く

よくある間違い

  • ラベルの代わりにプレースホルダーを使用する
  • 「エラーが発生しました」のみを表示する
  • ミス後にフォーム全体を消去する
  • マウスで正常パスのみをテストする

よくある質問

プレースホルダーだけで十分か?

いいえ。ユーザーが値を入力している間は、識別可能なラベルを表示しておくべきです。

エラーはいつ表示すべきですか?

適切なタイミングで、不必要な中断なしに原因と対処法を説明してください。

サーバーがダウンした場合はどうなりますか?

成功を主張せず、保存できるものは保存し、分かりやすい復旧方法を提供してください。

公式参照文献

参照文献はメソッドを裏付けるものです。 チェックは状況に合わせて調整してください。 これらは認証ではありません。 元の参照文献のタイトルやソース文書は別の言語で書かれている場合があります。