使用 WAI-ARIA 可访问 Error-Handling - 最佳实践？

Question

通知辅助技术用户（如盲文或屏幕阅读器）无效 input-fields

我尝试了两种都有效的方法，但我不知道哪一种是最佳做法。请分享您对此的看法。

方法一

使用aria-describedby。 SR 和盲文阅读标签，除非 error-message 存在。
可能的缺点：似乎一些较旧的 SR 在 wai-aria-attributes 方面存在问题。还有更多的全局 ID。

<input
 id="{{unique-id}}"
 type="text"
 aria-describedby="{{unique-id}}-error-message"
>

<label
 for="{{unique-id}}"
>
 {{title}}
</label>

<p
 id="{{unique-id}}-error-message"
 role="alert"
>
 {{error-message}}
</p>

方法二

使用标题和 aria-label。 backwards-compatibility 的标题。可能的缺点：必须从服务器发送到客户端的冗余文本。

<input
 id="{{unique-id}}"
 type="text"
 title="{{title}} {{error-message}}"
 aria-label="{{title}} {{error-message}}"
>

<label
 for="{{unique-id}}"
>
 {{title}}
</label>

<p>
 {{error-message}}
</p>

两种方法的组合按以下顺序确定属性的优先级（如果支持）：

aria-label
标题
aria-describedby

关于这方面的最佳实践有什么想法吗？

Answer 1

我建议您看一下为表单验证目的明确添加的 ARIA 状态：

aria-required (and/or HTML5's required 属性)
aria-invalid

此 code is from Mozilla - 访问该站点以获取更多信息。

<input name="email" id="email" aria-required="true" reqiured 
  aria-invalid="false" onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>

<script>
  function checkValidity(aID, aSearchTerm, aMsg) {
    var elem = document.getElementById(aID);
    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
    if (invalid) {
      elem.setAttribute("aria-invalid", "true");
      updateAlert(aMsg); // show your ARIA alert message
    } else {
      elem.setAttribute("aria-invalid", "false");
      updateAlert();     // remove your ARIA alert message
    }
  }
</script>

Answer 2

第三个选项：使用带有约束验证的本机客户端验证API

这需要 Javascript，但您可以确定浏览器会在本机实现错误消息并将该信息提供给辅助功能 API。

document.getElementById("{{unique-id}}").setCustomValidity("21 characters expected");

如果没有使用足够的视觉信息，我不会使用此解决方案，这些信息不需要用户在查看错误消息之前提交表单。如果您的方法可以解决这个问题，我也喜欢 G139: Creating a mechanism that allows users to jump to errors 技巧

使用 WAI-ARIA 可访问 Error-Handling - 最佳实践？

Accessible Error-Handling with WAI-ARIA - Best Practive?

html

accessibility

wai-aria