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

Question

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"?

Answer 1

From an accessibility perspective, WCAG 4.1.1 Parsing is 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:

1. " element has complete opening and closing tags,
2. Elements are nested according to their specification,
3. Elements do not contain duplicate attributes,
4. 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 have any invalid HTML.

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

You mentioned:

If you have duplicate IDs, what do you expect to get from getElementById? The specification of getElementById says:

You also said:

Does this mean that no element 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.