Help us understand the problem. What is going on with this article?

aria-live属性を使ってフォームのエラーメッセージ

エラーメッセージは動的に生成する場合

  • アクセシブルじゃない
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"はこのフォームでのエラーメッセージの読み上げというよりかは、例えば読み込みが完了しましたという通知やアップロードが完了しましたといった通知系での用途が適切です。

フォームだけのものではなく、色々と使い所があるので実装して実際に音声読み上げで聞いてみて、コンテンツのコンテキストが正しく伝えられているかを考えて使いましょう。

参考

randy39
フロントエンドエンジニアです。最近はreact,ts,a11y学び中です。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした