back to CanAdapt home

Title

2 labels point to one form field with palceholder, aria-hidden toggles labels on off so only one is on at at time.

Description

What happens if there are two labels pointing to the same id of the same form field, and a placeholder on the same form field. The labels toggle back and forth with aria-hidden. The reason this may be necessary is that if aria-describedby is placed on the error, then the placeholder text will not read in NVDA.

Other optiions are using aria-labellelby and wrapping the entire group in one label element.

Example 1 The second label has been hidden.


Example 2 The first label has been hidden.


Example 3 Wrap both phrases and the input inside one label

Example 4 Use labelledby

First Name
Error:Please enter your first name

Code Used

<h3>Example 1 The second label has been hidden.</h3>
<form>
<label for="p1" aria-hidden="false">First Name</label>
<input id="p1" type="text" placeholder="my test placeholder" >
<br>
<label for="p1" aria-hidden="true">Error:Please enter your first name</label>

<h3>Example 2 The first label has been hidden.</h3>

<label for="p2" aria-hidden="true">First Name</label>
<input id="p2" type="text" placeholder="my test placeholder" >
<br>
<label for="p2" aria-hidden="false">
Error:Please enter your first name</label>

<h3>Example 3 Wrap both phrases and the input inside one label</h3>

<label >First Name
<input id="p3" type="text" placeholder="my test placeholder" >
<br>
Error:Please enter your first name</label>

<h3>Example 4 Use labelledby</h3>

<span id="p5" >First Name</span>
<input id="p4" type="text" placeholder="my test placeholder" aria-labelledby="p5 p6">
<br>
<span id="p6">
Error:Please enter your first name</span>
</form>

Comments

Neither JAWS or NVDA recognize the aria-hidden. They just announce the first label. NVDA goes wild and reads all kinds of text below the form field. Aria-labelledby in th input and give an id to both labels and refer to them with aria-labelledby not much better. <label> around the whole mess works great ...