发现网页中存在重复的id属性值"x"

Question

我正在使用Angular 7 - 三个组件[a，b，c]使用具有id为[x]的输入元素，然而，组件[b]还使用了4个具有id为[x]的输入元素。这引发了可访问性问题 - 因为id需要是唯一的。测试用例使用'getElementById'来检索值并期望某些结果。

现在我所做的是将这些id选择器更改为类 - 因为我不需要它们是唯一的，同时也更改了测试用例 - 'querySelector'。

有任何想法为什么我仍然会得到与“在网页上找到重复的id属性值“x””相同的错误？

Answer 1

从可访问性的角度来看，WCAG 4.1.1 解析是关于拥有唯一ID的指南。该指南基本上说您应该拥有有效的HTML，但它只列出了四种可能会导致可访问性问题的无效HTML类型：

1. “元素具有完整的开始和结束标签，
2. 元素根据其规范进行嵌套，
3. 元素不包含重复的属性，
4. 以及任何ID都是唯一的，”

有很多方法可以生成无效的HTML，但这四种也可能导致可访问性问题。请注意，出现这四个问题中的任何一个意味着您拥有无效的HTML，因此您可能面临的问题不仅仅是可访问性问题。我认为您不希望有任何无效的HTML。

所以在您的情况下，您看到的是第四个列出的错误。 HTML规范指出ID必须是唯一的。

您提到：

如果您有重复的ID，您希望从getElementById中获得什么？ getElementById的规范说：

您还说：

这是否意味着没有元素具有ID？它们都有类？如果您运行可访问性扫描工具，并且它标记了关于重复ID的错误，那么显然您没有将所有ID转换为类。