html - 使用 WAI-ARIA 的可访问错误处理 - 最佳实践？

Question

我想使用 WAI-ARIA-Attributes 通知辅助技术用户(如盲文或屏幕阅读器)有关无效输入字段的信息.

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

方法一

使用 aria-describedby。 SR 和盲文读取标签，除非存在错误消息。
可能的缺点:似乎一些较旧的 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。向后兼容的标题。 可能的缺点:必须从服务器发送到客户端的冗余文本。

<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>

两种方法的组合按以下顺序确定属性的优先级(如果支持):

• 咏叹调标签
• 标题
• 咏叹调描述者

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

Answer 1

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

• aria-required (和/或 HTML5 的 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>