angularJS 对 ARIA 使用不同的规则集吗？

Question

我正在更新网站以确保合规性。该网站主要是 AngularJS，我仍然是新手，但正在学习。我发现有一个针对 div 标签的标签但是标签没有 :for 属性，而是有一个 :id 并且 div 有一个针对标签标签的 :id 的 :label-id 的情况......当我尝试调整它，它在前端坏了，所以我不确定我看到了什么……我很好奇这是否会通过 WCAG AA？

我尝试了屏幕阅读器，NVDA，没有问题...但是我使用的爬虫将标签元素标记为没有 :for 属性...我尝试搜索 :label-id 属性但没有运气我猜这意味着它的习惯......我猜很多问题与我缺乏对angularJS的理解有关......

<div class="groupA">  
  <label id="elementA">Element A is for Apple</label>
  <div class"customSelectA" label-id="elementA">...stuff shows up here after clicking the label and there are also a bunch of angular attributes on this div that are not relevant to my question</div>
</div>

Answer 1

我建议先学习基础知识，暂时忽略角度。

查看<label> 元素的规范。它有一个for 属性，可以指向一个表单元素。 ID 必须指向“labelable element”（、、 等）。

所以以下是有效的：

<label for="myID">Element A is for Apple</label>
<input id="myID" type="checkbox">

但以下不是：

<label for="myID">Element A is for Apple</label>
<div id="myID"></div>

事实上，如果你通过一个 html 验证器 https://validator.w3.org/nu 运行上面的例子，它会错误地标记它：

错误：label元素的for属性的值必须是非隐藏表单控件的ID。

关于label-id 属性，它不存在。它不是 html 语言的一部分。它似乎是一个自定义属性，但自定义属性应以“data-”开头。

您可以拥有没有for 属性的<label>，例如：

<label id="newID">Element A is for Apple</label>
<input type="checkbox" aria-labelledby="newID">

在这种情况下， 指向 而不是 指向 ，但这是对 元素的不良使用。您不会获得 的好处。第一个示例让您单击 的文本，复选框将被选中。在最后一个示例中，虽然复选框将由文本标记，但您不能单击文本以选中复选框。