屏幕阅读器在阅读下一个元素标签后读取错误消息

Question

当我跳过输入字段时，在输入字段下显示错误消息。另外，屏幕阅读器使用role="alert"阅读错误消息，并尝试使用aria-live="assertive"（没有角色）。在这两种情况下，屏幕阅读器都在读取错误消息，但不是立即读取。它首先读取元素标签，然后读取前一个元素的错误消息。

Codepen

代码片段

<form>
  <section>
      <input type="text" name="fname" placeholder="fname" class="eleField" aria-invalid="false" aria-required="true" required aria-label="First name"/>
    <div class="inline-message" role="alert">
      Enter fname
    </div>
  </section>
  <section>
      <input type="text" name="lname" placeholder="lname" 
             class="eleField" aria-invalid="false" aria-required="true" required aria-label="Last name"/>
      <div class="inline-message" role="alert">
        Enter Lname
    </div>
  </section>
</form>

$(document).on('blur', '.eleField', function() {
   if ($(this).val() === '') {
     $(this).attr('aria-invalid', true);
     $(this).next('.inline-message').show();
   } else {
     $(this).attr('aria-invalid', false);
     $(this).next('.inline-message').hide();
   }                
 });

Answer 1

您可能需要考虑使用HTML5验证而不是使用自定义JavaScript。因为它们是浏览器的原生，所以对辅助技术的支持会更好一些。

但是，如果您确实需要显示自定义警报，则无需添加role = alert或aria-live属性。 “aria-live”只是对屏幕阅读器的建议，有时会被忽略。更好的做法是：

将错误消息关联到输入框

将唯一ID添加到错误消息容器中。然后将aria-describedby属性添加到input元素，并带有错误消息ID的值。

<input type="text" name="fname" placeholder="fname" class="eleField" aria-describedby="fname-error"/>
     <div id="fname-error" class="inline-message">
      Enter fname
    </div>

在提交时将第一个输入元素与错误消息进行聚焦。

您已使用“aria-invalid = true”标记了无效字段。下面的jQuery将第一个元素集中在该属性上。当字段获得焦点时，它还将读取错误消息，因为aria-describeby。

$("form").submit(function(){
   $("form *[aria-invalid=true]").first().focus();
})

不要忘记为所有输入字段添加标签元素。 :)

Codepen：https://codepen.io/camtin/pen/drvjjb