Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Test two labels pointing to one id

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

  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.



CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help -at- can-adapt.com
(replace -at- with you know what)

PHONE

613-806-9005

SOCIAL MEDIA