Duplicate id attribute value "x" found on the web page

Abdul 0
Viewed 24

I am using Angular 7 - three components [a, b, c] use an input element that has the id of [x] however, component [b] has 4 input elements using id of [x] aswell. This raises Accessibility Issues - as ids need to be unique. The test cases uses 'getElementById' to retrieve the values and expect something.

Now what I have done is change these id selectors to classes - as I do no need them to be unique and also the test cases - 'querySelector.'

Any idea why I am still getting the same errors as - 'Duplicate id attribute value "x" found on the web page'

angular7 accessibility javascript css html
1 Answers

From the accessibility side, WCAG 4.1.1 Parsing is the guideline that talks about having unique IDs. The guideline essentially says you should have valid HTML but it only lists four types of invalid HTML that might potentially cause accessibility issues:

  1. "elements have complete start and end tags,
  2. elements are nested according to their specifications,
  3. elements do not contain duplicate attributes,
  4. and any IDs are unique,"

There are lots of ways to have invalid HTML but those four could cause accessibility issues too. Note that having any of these four issues means you have invalid HTML so you potentially have a bigger problem than just accessibility issues. I would think you wouldn't want any invalid HTML.

So in your case, the 4th listed error is what you're seeing. The HTML spec says that IDs must be unique.

When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character.

You mentioned:

The test cases uses 'getElementById' to retrieve the values and expect something.

What do you expect to get back from getElementById if you have duplicate IDs? The spec for getElementById says:

Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

You also said:

Now what I have done is change these id selectors to classes...

Does that mean none of your elements have an ID? They all have classes? If you're running an accessibility scanning tool and it's flagging an error about duplicate IDs, then apparently you didn't convert all the IDs to classes.

slugolicious0
Related