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属性。 “现场直播”仅是屏幕阅读器的建议，有时会被忽略。更好的做法是：

将错误消息与输入框相关联

向错误消息容器添加唯一的ID。然后将aria- describeby属性添加到输入元素中，并带有错误消息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-描述的原因，它还将读取错误消息。

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

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

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

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

1 个答案: