テクニック ARIA19:エラーを特定するために、ARIA role=alert 又はライブリージョン (Live Regions) を使用する

事例 1: DOM 内にすでに存在する role=alert を持つコンテナの中にエラーメッセージを注入する

次の事例は、aria-live=assertive を使用しているのと同等の role=alert を使用する。

事例において、ページロード時に DOM に存在する aria-atomic=true 及び aria-live プロパティ又は alert ロールを持つ空のエラーメッセージコンテナ要素が存在する。エラーコンテナは、ほとんどのスクリーンリーダーでエラーメッセージが読み上げられるために、ページロード時に DOM に存在しなければならない。aria-atomic=true は、複数の無効な投稿をした後にエラーメッセージを iOS の Voiceover に読み上げさせるために必要である。

jQuery は、送信時に入力が空であるかどうかをテストし、そうであれば、ライブリージョンコンテナにエラーメッセージを注入するために使用される。新しい送信が試みられるたびに、前のエラーメッセージがコンテナから削除され、新しいエラーメッセージが挿入される。

$(document).ready(function(e) {
  $('#signup').submit(function() {
    $('#errors').html('');
    if ($('#first').val() === '') {
      $('#errors').append('<p>Please enter your first name.</p>');
    }
    if ($('#last').val() === '') {
      $('#errors').append('<p>Please enter your last name.</p>');
    } 
    if ($('#email').val() === '') {
      $('#errors').append('<p>Please enter your email address.</p>');
    }
    return false;
  });
});
<form name="signup" id="signup">
  <p id="errors" role="alert" aria-atomic="true"></p>
  <div>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </div>
  <div>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </div>
  <div>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </div>
  <div>
    <input type="submit" name="button" id="button" value="Submit">
  </div>
 </form>

動作例: エラーを識別するために role=alert を使用する。