0

当我跳过输入字段时，在输入字段下显示错误消息。还要通过屏幕阅读器阅读错误消息，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();
   }                
 });
4

1 回答 1

1

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

但是，如果您确实想要显示自定义警报，则不需要添加 role=alert 或 aria-live 属性。“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- describeby 读取错误消息。

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

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

代码笔： https ://codepen.io/camtin/pen/drvjjb

于 2019-03-07T16:16:17.090 回答