エラーメッセージは動的に生成する場合
- アクセシブルじゃない
form.html
<form name="signup" id="signup" method="post" action="">
<label>お名前 (必須)</label> <!-- for属性がinputと結びついていない -->
<input type="text" name="name"> <!-- idが無くlabelと結びついていない,本当に必須かわからない -->
<p class="errors"></p>
<button type="submit" name="button" id="button">送信</button>
</form>
- アクセシブル
form.html
<form name="signup" id="signup" method="post" action="">
<label for="name">お名前 (必須)</label>
<input type="text" name="name" id="name" required aria-required="true">
<p class="errors" aria-live="polite"><span>お名前は必須項目です。</span></p>
<button type="submit" name="button" id="button">送信</button>
</form>
要素の変更があった時に即座に変更が通知されます。
初期読み込み時にDOMに読み込んでおかなければなりません。
aria-liveのプロパティには以下があります。
off: 内容が更新されてもユーザーに伝達しない(デフォルト)
polite: 現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたさいにユーザーに伝達する
assertive: 即座に伝達を行う
role="alert"なども通知を行う用途としてあります。
role="alert"やaria-live="assertive"はこのフォームでのエラーメッセージの読み上げというよりかは、例えば読み込みが完了しましたという通知やアップロードが完了しましたといった通知系での用途が適切です。
フォームだけのものではなく、色々と使い所があるので実装して実際に音声読み上げで聞いてみて、コンテンツのコンテキストが正しく伝えられているかを考えて使いましょう。