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

当我跳过输入字段时，我会在输入字段下显示一条错误消息。另外，要通过屏幕阅读器读取错误消息，我使用

role=“alert”

并尝试使用

aria live=“assertive”

（无角色）。在这两种情况下，屏幕阅读器都在读取错误消息，但不是立即读取。它首先读取元素标签，然后读取上一个元素的错误消息

代码片段

<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();
   }                
 });

输入fname
输入Lname
$（document）.on（'blur'，'.eleField'，function（）{
if（$（this.val（）=''）{
$（this.attr（'aria-invalid'，true）；
$（this.next（'.inline message'）.show（）；
}否则{
$（this.attr（'aria-invalid'，false）；
$（this.next（'.inline message'）.hide（）；
}                
});
 > p>您可能想考虑使用HTML5验证而不是使用自定义JavaScript。因为它们是浏览器自带的，所以辅助技术的支持要好一点

但是，如果确实希望显示自定义警报，则不需要添加role=alert或aria-live属性。“咏叹调现场”只是给屏幕读者的一个建议，有时会被忽略。更好的做法是：

将错误消息与输入框关联

将唯一ID添加到错误消息容器。然后将aria descripeby属性添加到输入元素中，其值为错误消息的ID

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

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

Codepen:
谢谢@nicklundy我知道，插入新错误消息时，插入错误消息后无需对focus执行任何操作。当您将其作为用户选项卡插入到下一个字段时，他们可能已经聚焦到下一个字段。拦截TAB以窃取其焦点并将其带回错误消息将导致用户意外体验。它会认为这是一种反模式。代码>“aria live”只是给屏幕阅读器的一个建议，有时会被忽略。不，这不是一个“建议”，如果忽略它，浏览器或屏幕阅读器中就会出现错误
aria-live
告诉屏幕读取，如果元素发生更改，将宣布元素的内容。它没有“可选”选项。您确实需要同时使用
aria-live
和
aria-descripeby
aria-live
将允许在错误发生时立即宣布错误
aria describedby
允许用户离开字段，当用户返回时，他们会听到与字段相关的错误。为什么不使用
作为输入？就可访问性而言，对于大多数屏幕阅读器将适当处理的每个输入，最好使用标签元素。只有在给定元素没有本机标签的情况下，才应使用aria label属性。
$("form").submit(function(){
   $("form *[aria-invalid=true]").first().focus();
})