Examples: Accessible Name for input[type=text] element

The various techniques for associating an accessible name with input[type=text]

Labeling Technique Test Expected Results Test Source Code
  • label reference
  • ACCNAME: Phone:
  • FROM: label reference
  • ROLE: textbox
 
<div>
  <label for="c1">Phone:</label>
  <input type="text" id="c1">
</div>
  • label encapsulation
  • ACCNAME: Phone:
  • FROM: label encapsulation
  • ROLE: textbox
 
<div>
  <label>Phone:
    <input type="text">
  </label>
</div>
  • aria-labelledby attribute
Phone:
  • ACCNAME: Phone:
  • FROM: aria-labelledby
  • ROLE: textbox
 
<div>
  <span id="c2">Phone:</span>
  <input type="text"
         aria-labelledby="c2">
</div>
  • aria-label attribute
Phone:
  • ACCNAME: Phone number
  • FROM: aria-label
  • ROLE: textbox
 
<div>
  Phone:
  <input type="text"
         aria-label="Phone number">
</div>
  • placeholder attribute
Phone:
  • ACCNAME: xxx-xxx-xxxx
  • FROM: placeholder
  • ROLE: textbox
 
<div>
  Phone:
  <input type="text"
         placeholder="xxx-xxx-xxxx">
</div>
  • label reference and placeholder attribute
  • ACCNAME: Phone:
  • FROM: label reference
  • ROLE: textbox
 
<div>
  <label for="c3">Phone:</label>
  <input type="text" id="c3"
         placeholder="xxx-xxx-xxxx">
</div>
  • title attribute
Phone:
  • ACCNAME: Phone number
  • FROM: title
  • ROLE: textbox
 
<div>Phone:
  <input type="text" title="Phone number">
</div>