As per accessibility standards web pages should not contain duplicate id values on elements and elements should not have duplicate attributes.
What are duplicate id values?
Id values are the references for many accessibility enhancements such as label and form association. If the Id values are duplicated on a given web page, it will be difficult to identify the right association between the labels and form element’s.
Eg: If id=‘fname’ is used for a form element, do not use the value i.e. fname for any other element on the same page.
What are duplicate attributes?
Duplicate attributes are referred as use of same attribute more than once on any element. Eg: An image may have more than one alt attribute. Assistive technologies that receive content from the DOM may be confused if more than one same attribute is provided for an element.
Eg <img src=‘images/profile.jpg’ alt=‘Profile picture’ alt=‘profile details’ />
The latest browsers have the capability to remove one alt attribute when the DOM is loaded, the problem is having two alt attributes existing in the source code and not sure which one among the two are displayed in the DOM.
What to do?
Before finalizing the code on the page run any markup validation tool and check for the following bugs.
- Web page do not contain duplicate id values.
- No element on the page have duplicate attributes.
- Elements on the page are opened and closed according to the specifications.
- Elements are nested according to the specifications.