入力エラーは、赤枠だけでなく「どの欄を、どう直すか」を文章で示します。入力欄と説明を関連付け、キーボードでもエラー箇所へ戻れることまで確認すると、デザインと実装の検収条件をそろえられます。
制作会社・広告会社の実装担当者に向け、メール欄一つの架空フォームを使って、問題例から修正版までを検証しました。フォームの項目選びや送信メールの保守とは分け、今回は入力を間違えた後の直しやすさを扱います。
赤枠だけのエラーを、説明と操作へ分けて直す
問題例は、空欄で「入力を確認」を押すと枠だけが赤くなる作りです。サンプルはnovalidateで標準の吹き出しを止め、validityで入力を判定します。独自の支援を実装しないまま標準表示を止めないよう注意します。試すと赤枠は出ましたが、何が不足したかを示す文章も、エラーの概要へ移る動作もありませんでした。色だけを変更して終わると、修正する項目や方法が伝わりません。
if (!mail.validity.valid) {
mail.classList.add('invalid'); // 赤枠だけ
return;
}W3CのWCAG 2.2解説では、3.3.1は自動検出したエラーの項目を特定し、文章で説明すること、3.3.3は修正方法が分かる場合に提案することを扱います。概要から各欄へリンクする構成は実装方法の一つで、これだけが唯一の必須手法ではありません。
ラベル・エラー文・入力欄をHTMLでつなぐ
修正版ではlabelを入力欄に結び付け、通常の入力例はmail-hint、エラー文はmail-errorに分けました。下はHTMLと、検証に失敗した際の処理の要点です。エラー文は空欄用と形式不正用に分岐させます。
<label for="mail">メールアドレス（必須）</label>
<input id="mail" type="email" required
aria-describedby="mail-hint">
<p id="mail-hint">例：sample@example.com</p>
<p id="mail-error" hidden></p>// messageは検証結果に応じた具体的な説明
error.textContent = message;
error.hidden = false;
mail.setAttribute('aria-invalid', 'true');
mail.setAttribute('aria-describedby', 'mail-hint mail-error');
summary.hidden = false;
summary.focus();概要はtabindex="-1"でフォーカスを受け取れる要素にし、メール欄へ戻るリンクを置きます。今回の全体コードでは、そのリンクからmail.focus()を呼びます。検証前からaria-invalidをtrueにせず、次の試行時には古いエラーを解除します。正しい入力なら属性を外し、aria-describedbyをmail-hintへ戻します。
入力するたびに先頭へ戻す作りにはしていません。確認ボタンを押して不正があったときに概要へ移し、入力値は消さずに修正できるようにしました。コードは要点の抜粋で、実案件では複数項目の検証やサーバー側のエラーにも同じ対応関係を用意します。
PC・スマートフォン幅・キーボードで試した結果
2026年10月27日、macOS上のCodex内蔵ブラウザで実行しました。ローカルHTTPで観測したUser-AgentはChrome/156.0.0.0、配信はMAMP PHP 8.5.2です。HTML・CSS・JavaScriptだけの再現用サンプルで、WordPressや特定フォームプラグインの動作試験ではありません。
| 試した操作 | 修正版の観測結果 |
|---|---|
| 空欄で確認 | 入力必須の文章を表示し、概要へフォーカス |
| sampleを入力 | 形式の修正案を表示。入力値は画面に保持 |
| 概要からTab→Enter | エラーのリンクを経由してメール欄へ復帰 |
| sample@example.comへ修正 | 古いエラーと属性を解除し、確認完了を表示 |
| 1280px／390px幅 | 横はみ出しなし。PCのボタンfocus枠は3px |
正しい形式でも表示は「送信していません」です。今回確認したのは画面上の入力支援までで、メールの到達、受付成立、実在するメールアドレスかどうかは検証していません。390pxは表示幅の再現で、実機iPhone・Androidの試験ではありません。読み上げソフトでの聞こえ方とWCAG全体への適合も未評価です。
エラー状態のデザインも検収条件に含める
- 通常・未入力・形式不正・修正後の表示と文言をデザイン時にそろえる。
- 入力値が残ること、概要と各欄の対応、キーボードの戻り先を実際に操作して確かめる。
- 本番に組み込む前に、サーバー側検証・送信処理・読み上げ・実機も別項目で確認する。
GreenCodingへ実装を相談する際は、通常画面だけでなく、エラー文と表示位置、入力条件、対象ブラウザ、検収担当を共有してください。制作会社・広告会社向けのコーディング・WordPress実装で、デザインからの実装と確認工程をご相談いただけます。