この記事の対象読者
- フォームのエラー表示を実装する人
- 赤文字を出しているだけでよいのか気になっている人
- 入力ミスを分かりやすく伝えたい人
本題に入る前に
フォームで入力ミスがあると、画面に赤文字でエラーを出すことがあります。
でも、赤文字が出ているだけでは、全員に伝わるとは限りません。色の違いが分かりにくい人もいますし、スクリーンリーダーを使っている人には、どの入力欄のエラーなのかが伝わりにくいこともあります。
業務画面では、フォームを毎日使う人もいます。入力ミスのたびに「どこが悪いの？」と探すのは、地味にストレスです。
この記事では、Reactでフォームエラーを表示するときに、見た目だけでなく意味も伝える小さな工夫をまとめます。
エラーは入力欄と結びつける
入力欄とエラーメッセージを aria-describedby で結びつけます。
type FieldErrorProps = {
id: string;
label: string;
value: string;
error?: string;
onChange: (value: string) => void;
};
function TextField({ id, label, value, error, onChange }: FieldErrorProps) {
const errorId = `${id}-error`;
return (
<div>
<label htmlFor={id}>{label}</label>
<input
id={id}
value={value}
onChange={(event) => onChange(event.target.value)}
aria-invalid={error ? "true" : "false"}
aria-describedby={error ? errorId : undefined}
/>
{error && (
<p id={errorId} role="alert">
{error}
</p>
)}
</div>
);
}
これで、エラー文がどの入力欄に関係するのかを伝えやすくなります。
色だけに頼らない
エラー表示で赤色を使うのは自然ですが、色だけに頼るのは避けます。
悪い例:
入力欄を赤枠にするだけ
良い例:
赤枠 + エラーメッセージ + どの項目か分かるラベル
文言も、なるべく次の行動が分かるようにします。
| あいまいな文言 | 分かりやすい文言 |
|---|---|
| 不正です | メールアドレスの形式で入力してください |
| 必須です | 予約名を入力してください |
| エラー | 100文字以内で入力してください |
送信後は最初のエラーへ誘導する
入力項目が多いフォームでは、下のほうにエラーが出ていて気づかないことがあります。
送信後にエラーがある場合は、最初のエラー項目へフォーカスを移すと親切です。
const firstErrorRef = useRef<HTMLInputElement>(null);
function handleSubmit() {
const errors = validate(values);
if (errors.title) {
firstErrorRef.current?.focus();
return;
}
// 保存処理
}
フォーカスを動かしすぎると逆に驚くこともあるので、送信時のエラーのように「次に直す場所」が明確な場面で使うとよいです。
まとめ
フォームエラーは、赤文字を出すだけではなく、入力欄と意味的に結びつけることが大事です。
label、aria-invalid、aria-describedby、具体的なエラー文言を組み合わせると、入力ミスを直しやすいフォームになります。