Es wurde festgestellt, dass die Webseite einen doppelten ID-Attributwert „x“ enthält.

Question

Ich verwende Angular 7 – drei Komponenten [a, b, c] verwenden Eingabeelemente mit der ID [x], Komponente [b] verwendet jedoch auch 4 Eingaben mit dem Element id [x]. Dies wirft Barrierefreiheitsprobleme auf, da die ID eindeutig sein muss. Der Testfall verwendet „getElementById“, um den Wert abzurufen, und erwartet bestimmte Ergebnisse.

Jetzt habe ich diese ID-Selektoren in Klassen geändert – da ich nicht brauchte, dass sie eindeutig sind – und auch den Testfall geändert – „querySelector“.

Irgendwelche Ideen, warum ich immer noch die gleiche Fehlermeldung wie „Doppelter ID-Attributwert ‚x‘ auf Webseite gefunden“ erhalte?

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转换为类。