Duplicate ids in <div class="arialive wb-inv" aria-live="polite" aria-relevant="all">

[iamheavymetal]

When WET validation happens there is a hidden element inserted in the page that uses the same div id the error occurred on.

Impact:

When elements are not well formed, assistive technologies may not behave as intended.

Recommendation:

Ensure that any IDs are unique (except where allowed by the document specification).
Run the document through an HTML validator such as [https://validator.w3.org/nu/|W3C's Nu Html Checker]

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

To reproduce:

url: https://wet-boew.github.io/v4.0-ci/demos/formvalid/formvalid-en.html

1. On “Email address” I triggered the inline validation by entering invalid data (“arwarsw” or so)
2. Errors appear on blur:
   id="email1-error" has appeared twice in the DOM:

<strong id="email1-error" class="error">
	<span class="label label-danger">
		<span class="prefix">Error&nbsp;1: </span>Please enter a valid email address.
	</span>
</strong>

and at the bottom

<div class="arialive wb-inv" aria-live="polite" aria-relevant="all">
	<span class="field-name">Email address</span> (yourname@domain.com) 
	<strong id="email1-error" class="error">
		<span class="label label-danger">
			<span class="prefix">Error&nbsp;1: </span>Please enter a valid email address.
		</span>
	</strong>
</div>

[sgdowney]

I've run into another scenario that results in the duplicate IDs in the arialive div.
I have a form with 3 fields: Social Insurance Number, Access Code and Province of Residence.
The Social Insurance Number field is coded as a Password field to hide it from shoulder surfers.
The form is submitted and a server side validation error is added (via wb-servererror). When the page is re-displayed, the Required validator is triggered on the Social Insurance Number field. Both the server side validation error and the required field error are displayed and the duplicate ID error is generated.
If I switch the Social Insurance Number field to a regular text input, the required validator isn't triggered when the page is re-displayed as the input is still populated. The server side error is displayed correctly. No duplicate IDs are generated as the arialive div is empty.