Javascript 如何为复选框组使用aria invalid和aria descripeby属性

我将一个复选框设置为表单元素，需要在其上使用aria invalid和aria descripbeby属性。属性应该写入每个复选框还是字段集？

您不应该在所有元素上设置属性，但可以仅在第一个复选框中将aria invalid设置为true

例如：

<input name="nom" aria-invalid="false"
    onclick="checkValidity('nom', ' ', 'your message 1');">
<br />
<input name="courriel" aria-invalid="false"
    onclick="checkValidity('courriel', '@', 'your second message);">

//js
<script type="text/javascript>
  var checkValidity = function(aID, aMsg){
  var elem = this,
    invalid = (elem.value.indexOf(aSearchTerm) < 0);
  if (invalid) {
   elem.setAttribute("aria-invalid", "true");
   updateAlert(aMsg);
  }  else {
   elem.setAttribute("aria-invalid", "false");
 }
}
</script>

//js
通常，任何出错的对象都应该将aria invalid设置为true。在字段集上设置它可能有点混乱。这是否意味着字段集中的所有对象都有错误？如果有些错误，而另一些则不是？这会导致字段集出错吗？还是部分错误？也许您的设计中，字段集出错是有意义的，但这可能是一个例外，而不是规则

从技术上讲，从html规范的角度来看，在字段集（）上设置
aria invalid
是有效的。请参阅“允许的ARIA状态和属性属性”

不过，我对你最初的问题感到困惑。是否要在复选框上设置aria无效？复选框如何变得无效？要么检查，要么不检查。您是否将用户置于复选框无效的场景中？如果是这样，是否应该禁用复选框

对于由

描述的

aria，您需要使用各种浏览器和屏幕阅读器来测试它。有时与
aria descripibedby
关联的标签不会立即读取。可能会出现暂停，或者屏幕可能会说按alt+
来听描述<另一方面，代码>由

标记的aria会立即读取

我将一个复选框设置为表单元素，需要在其上使用

aria invalid

和

aria descripbeby

属性。属性应该写入每个复选框还是字段集

从理论角度来看，将其设置在

字段集

上更有意义

单个复选框只有两种状态，我看不出一个字段集中的单个复选框怎么会有错误，除非只有一个复选框（例如许可协议）

出于同样的原因，如果您的

aria descripbeby

指向错误消息，则它必须位于同一元素上。

团队对该案例进行了彻底的研究，得出结论：根本不使用aria属性，因为在各种屏幕阅读器中的结果令人沮丧

以下是解决方案/建议：

将错误文本动态注入图例中。 我们获胜的组合来自于完全脱离了由控件描述的经过尝试和测试的咏叹调，并基于控件的当前有效状态操纵图例文本。当发生错误时，我们将其附加到图例中的文本中，如果不存在错误条件，则再次将其删除

---

查看他们关于该主题的更多详细信息。

将信息链接到组中的每个控件对用户来说都很糟糕。如果组无效时每个控件都说它无效，则会导致屏幕阅读器用户重复非常冗长的内容，同时会导致复选框组中出现混乱状态，其中所选控件可能因未达到最小所选数目而无效。尝试将组中的第一个控件用于aria descripbeby和aria invalid的附件点：JAWS/Firefox：当从链接切换时，只会听到图例和页面标题。必须在收音机（或复选框）之间移动才能听到错误和标签。JAWS/IE11：读取图例、错误和标签。钳口/边缘：仅读取标签，而不读取图例或错误。JAWS/Chrome：读取图例、错误和标签，但会重复一些。NVDA/Firefox：从错误链接导航时，只读取未检查和无效状态。只有故意进入表单模式（例如，制表符）并返回到第一个输入时，才会读取标签和错误消息（即使这样也没有图例）。NVDA/IE11：从错误链接导航时，仅读取未检查和无效状态。只有故意进入表单模式（例如，制表符）并返回到第一个输入时，才会读取标签和错误消息（甚至没有图例）。NVDA/Edge:legend，error和label被读取。NVDA/Chrome:legend，error和label被读取。VoiceOver/Safari:legend和label被读取两次，error不会被读取。画外音/铬：图例、错误和标签已读取。叙述者/边缘：标签，aria无效状态，说明已读取，但没有图例。