フォームに「入力エラー」とだけ表示されても、どの欄をどう直せばよいのかは分かりません。業務用の申請画面では、不備がある項目の近くに理由を表示し、入力欄と説明を対応させます。修正する内容を言葉で示すと、赤い枠だけでは伝わらない理由を確認できます。
ここでは申請件名を1〜50文字で受け取る、架空の入力条件を使います。保存処理は付けず、空欄や長すぎる件名を画面で確認するところまでにします。文字数はこの例の条件であり、すべての業務フォームの上限ではありません。
項目名とエラー説明を分ける
labelは「申請件名」という項目名を示します。aria-describedbyには、補足説明とエラーを置く要素のIDを指定します。項目の名前と、なぜ入力を直す必要があるかという説明を分ける形です。
<form id="request-form" novalidate>
<label for="subject">申請件名</label>
<input id="subject" name="subject" required
aria-describedby="subject-hint subject-error">
<p id="subject-hint">前後の空白を除いて1〜50文字で入力してください。</p>
<p id="subject-error"></p>
<button type="submit">入力を確かめる</button>
</form>
<p id="result" role="status"></p>
<script>
const form = document.getElementById('request-form');
const subject = document.getElementById('subject');
const error = document.getElementById('subject-error');
const result = document.getElementById('result');
form.addEventListener('submit', event => {
event.preventDefault();
const value = subject.value.trim();
const length = Array.from(value).length;
const message = length === 0
? '申請件名を入力してください。'
: length > 50 ? '申請件名を50文字以内にしてください。' : '';
error.textContent = message;
result.textContent = '';
if (message) {
subject.setAttribute('aria-invalid', 'true');
subject.focus();
return;
}
subject.removeAttribute('aria-invalid');
result.textContent = '入力条件を確認しました。まだ保存していません。';
});
</script>
この例はnovalidateでブラウザの標準エラー表示を使わず、スクリプトの説明を出します。独自表示を足すために標準表示だけを止め、肝心の検査を付け忘れないようにしてください。requiredも残していますが、この例ではJavaScript側で空欄を確かめます。
送信を試みてから不備を示す
最初に画面を開いた時点では、aria-invalidを付けません。まだ入力している途中の空欄を、いきなり誤りとして知らせないためです。「入力を確かめる」を押し、不備が見つかった段階でtrueを付け、入力欄へフォーカスを戻します。
正常に直した後でもう一度ボタンを押すと、エラー文と属性を消します。誤りが消えたのに、読み上げ側の状態だけが不正のまま残らないことも確認します。複数の欄がある場合は、最初の不備へ戻る順番や、エラー一覧を置くかも検討してください。
文字数の数え方を明示する
コードのArray.from(value).lengthはUnicodeのコードポイント単位です。見た目の一文字と常に同じとは限らず、結合文字などでは差が出ます。業務上の文字数制限がバイト数や別の基準なら、その条件へ合わせる必要があります。
画面の説明と保存先の検査で数え方をそろえます。画面では受け付けたのに、サーバーでは別の基準で拒否されると、利用者が直す理由を理解しにくくなります。長さの上限に加えて、改行や空白をどう扱うかも決めてください。
この確認は保存や申請の成立を示すものではありません。JavaScriptは利用者側で変更できるため、実際に送る場合はサーバーでも同じ入力条件と権限を確認します。ブラウザでエラー文とフォーカスの変化を確認した後、利用する支援技術でも説明が伝わるかを確かめてください。
