發現網頁中存在重複的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轉換為類別。