この記事の目次 開く・閉じる
今回の仕上がり
空欄で「内容を確認」を押すと、作品名の入力欄へフォーカスが戻り、「作品名を入力してください。例：星あつめ」と表示されました。その後「星あつめ」を入力すると、エラーが消え、確認できた名前が表示されます。下は再確認後の実画面です。
下の画面は、実際に触れる作例です。静止画で動きを再現したものではありません。
作例を別画面で開く → · サンプル一式をダウンロード（ZIP）
必要なものと、試す順番
ブラウザだけで操作できます。入力するのは架空の作品名で十分です。この画面はアカウント登録や投稿のフォームではなく、サーバーへ入力を送りません。
- 作例を開き、作品名を空欄のまま「内容を確認」を押します。
- 入力欄の下に出る案内と、フォーカスの位置を見ます。赤い色を見なくても、文章だけで直し方が分かるか確認してください。
- 「星あつめ」を入力し、もう一度「内容を確認」を押します。エラーの文章が消え、確認結果に作品名が出れば成功です。
- 空白だけの入力でも試します。見た目では文字が入っているようでも、この作例はtrimで前後の空白を取り除いてから判定します。
仕組みを知る
色の前に、何を直すかを書く
W3C WAIのフォーム解説では、分かりやすい通知と簡単な修正方法、成功したことを伝えるフィードバックを案内しています。「無効です」だけでは、未入力なのか形式が違うのか分かりません。
今回は「作品名を入力してください」に短い例を添えました。実際のフォームで形式の条件があるなら、「日付は2026-10-03の形で」のように、その場で再入力できる案内を書きます。例を利用者の本当の入力として扱わないことも大切です。
表示する文章と入力欄を結び付ける
labelは何を入力する欄かを示します。aria-describedbyは、その欄に関係する説明のIDを指定します。作例ではエラーを出す場所のIDをname-errorに固定し、同じ欄から参照しています。エラー時はaria-invalidもtrueへ変更します。
赤い枠を付けるだけでは文章との関係を表せません。逆に属性を付けただけで、読み上げが期待どおりになるとも限りません。利用する支援技術での確認は別途必要です。複数の欄があるなら、最初のエラーへ移動し、全体のエラー一覧も検討しましょう。
コードの要点
<label for="work-name">作品名（必須）</label>
<input id="work-name" aria-describedby="name-error">
<p id="name-error"></p>
const value = input.value.trim();
input.setAttribute("aria-invalid", String(!value));
error.textContent = value ? "" : "作品名を入力してください。";
if (!value) input.focus();抜粋内のinputとerrorは対応するDOM要素です。全体の動くコードはZIPに含めました。画面上のチェックは、サーバー側の検証の代わりにはなりません。
自作のHTML・CSS・JavaScriptはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認と、よくあるつまずき
- 空欄と空白だけの入力はエラーになる。
- 直した後は古いエラーが残らず、確認した作品名が出る。
- 入力内容を消さず、入力欄へ戻れる。
ここに注意。打ち始めた瞬間からエラーを出し続けると、まだ入力中なのか間違いなのか分かりにくくなります。今回は確認ボタンを押した時点で判定します。
ここに注意。20文字の上限は練習用です。絵文字などでは文字の数え方が見た目と異なることがあるため、本番の仕様は別に決めます。
出典と、確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
空欄からの修正、空白だけの入力、フォーカスの移動をブラウザで確認しました。読み上げ、実際の送信、サーバー側の入力検証は対象外です。
W3C WAI：User Notification — エラーの修正方法、成功通知、入力欄と説明の関連付け。