It was found that there is a duplicate id attribute value "x" in the web page.-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

It was found that there is a duplicate id attribute value "x" in the web page.

P粉905144514 2023-08-31 16:06:41

479

I'm using Angular 7 - three components [a, b, c] use an input element with id [x], however, component [b] also uses 4 inputs with id [x] element. This raises accessibility issues - since the id needs to be unique. The test case uses 'getElementById' to retrieve the value and expects certain results.

Now what I did was changed these id selectors to classes - as I didn't need them to be unique and also changed the test case - 'querySelector'.

Any ideas why I still get the same error as "Duplicate id attribute value 'x' found on web page"?

P粉905144514

reply all (1)

P粉6620895212023-09-01 00:19:30 1 floor

From an accessibility perspective,WCAG 4.1.1 Parsingis the guideline on having unique IDs. The guide basically says you should have valid HTML, but it only lists four types of invalid HTML that can cause accessibility issues:

" element has complete opening and closing tags,
Elements are nested according to their specification,
Elements do not contain duplicate attributes,
and any ID is unique,"

There are many ways to generate invalid HTML, but these four can also cause accessibility issues. Note that any of these four issues means you have invalid HTML, so you may be facing problems beyond just accessibility issues. I think you don't want to haveanyinvalid HTML.

So in your case you are seeing the fourth listed error.HTML specificationstates that IDs must be unique.

You mentioned:

If you have duplicate IDs, what do you expect to get fromgetElementById? The specificationofgetElementByIdsays:

You also said:

Does this mean thatnoelement has an ID? Do they all have classes? If you run an accessibility scanning tool and it flags errors about duplicate IDs, then obviously you didn't convert all the IDs to classes.