エラーサマリ
送信すると先頭に「3 件の入力に問題があります」が現れてフォーカスが移り、各項目へのリンクで飛べる。項目側は aria-invalid と aria-describedby で理由が読まれる。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- エラーはフォームの先頭に集め、見出しへフォーカスを移す。項目ごとの赤字だけでは、読み上げでは何が起きたか分からない
- サマリの各行はその項目へのリンクにする。長いフォームで3つ目のエラーまで自力で辿らせない
- 項目には aria-invalid="true" と、エラー文を指す aria-describedby を付ける。赤枠は読まれない
- エラー文は「何をどう直すか」を書く。「不正な値です」は原因も直し方も伝えない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<form class="fes-form" id="fes-form" novalidate>
<div class="fes-summary" id="fes-summary" tabindex="-1" hidden>
<h2 id="fes-sum-title">3 件の入力に問題があります</h2>
<ul id="fes-sum-list"></ul>
</div>
<div class="fes-field">
<label for="fes-name">お名前 <span class="fes-req">必須</span></label>
<input id="fes-name" type="text" autocomplete="off">
<p class="fes-err" id="fes-name-err" hidden></p>
</div>
<div class="fes-field">
<label for="fes-email">メールアドレス <span class="fes-req">必須</span></label>
<input id="fes-email" type="email" autocomplete="off" placeholder="name@example.com">
<p class="fes-err" id="fes-email-err" hidden></p>
</div>
<div class="fes-field fes-check">
<div class="fes-checkrow"><input id="fes-agree" type="checkbox"><label for="fes-agree">利用規約に同意する</label></div>
<p class="fes-err" id="fes-agree-err" hidden></p>
</div>
<div class="fes-foot">
<button type="submit" class="fes-submit">登録する</button>
<span class="fes-reassure">登録後すぐに使えます。メールは確認用に1通だけ届きます</span>
</div>
<div class="fes-band"><span class="fes-tag">読み上げ</span><span id="fes-msg">空のまま「登録する」を押すと、サマリ見出しへフォーカスが移ります</span></div>
</form>