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.

First Name
Error:Please enter your first name

Example 2 The first label has been hidden.

First Name
Error:Please enter your first name

Example 3 Wrap both phrases and the input inside one label

First Name
Error:Please enter your first name

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

1. Neither JAWS or NVDA recognize the aria-hidden. They just announce the first label.
2. NVDA goes wild and reads all kinds of text below the form field.
3. Aria-labelledby on the input not much better.
4. <label> around the whole mess works great.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.