Question

我想使用WAI-ARIA-Attributes告知用户有关无效输入字段的辅助技术（如盲文或屏幕阅读器）。

我尝试过两种兼顾两种方法的方法，但我不知道哪种方法最佳。请分享您的想法。

方法1

使用咏叹调 - 描述。 SR和盲文读取标签，除非存在错误信息可能的缺点：看起来一些较旧的SR存在wai-aria属性的问题。还有更多的全球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>

方法2

使用title和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>

两种方法的组合按以下顺序（如果支持）对属性进行优先排序：

咏叹调标签
标题
咏叹调-describedby

对此最佳做法的想法？

Answer 1

我建议您查看为表单验证而明确添加的ARIA状态：

aria-required（和/或HTML5＆＃39; 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>

使用WAI-ARIA进行无障碍错误处理 - 最佳实践？

1 个答案: