start here

Duplicate IDs in a responsive webpage


The purpose of this page is to demonstrate that duplicate IDs can have real consequences even when only one view can ever be visible at any given time.

Below are two almost identical form fields. In both cases a text box is labelled via the label/for/id method and an error message is associated with the text box via aria-describedby. The first form field represents the desktop view of a page and is hidden using display:none The second form field represents the mobile view of a page and is visible. Both fields use the same IDs on the input and the error message. The difference between the fields is that text of the label and error message differ to differentiate between the views: desktop vs. mobile.

According to the ARIA spec, aria-describedby and aria-labelledby reach into content that is hidden via display:none, visibility-hidden, and aria-hidden. Knowing this, in the scenario below, I would expect the error message on the "mobile" form field to read the error message of the hidden "desktop" form field since it is first in the DOM.

Test Case

Mobile error message