Examples: Accessible Name for select element

The various techniques for associating an accessible name with select

Labeling Technique Test Expected Results Test Source Code
  • label reference
  • ACCNAME: Weather condition:
  • FROM: label reference
  • ROLE: listbox
 
<div>
  <label for="c1" class="above">
    Weather condition:
  </label>
  <select id="c1">
    <option value="opt-1">Sunny</option>
    <option value="opt-2">Cloudy</option>
    <option value="opt-3">Rain</option>
    <option value="opt-4">Snow</option>
  </select>
</div>
  • label encapsulation
  • ACCNAME: Weather condition:
  • FROM: label encapsulation
  • ROLE: listbox
 
<div>
  <label>
    <div>Weather condition:</div>
    <select>
      <option value="opt-1">Sunny</option>
      <option value="opt-2">Cloudy</option>
      <option value="opt-3">Rain</option>
      <option value="opt-4">Snow</option>
    </select>
  </label>
</div>
  • aria-labelledby attribute
Weather condition:
  • ACCNAME: Weather condition:
  • FROM: aria-labelledby
  • ROLE: listbox
 
<div>
  <div id="c2" class="above">
    Weather condition:
  </div>
  <select ar class="above"ia-labelledby="c2">
    <option value="opt-1">Sunny</option>
    <option value="opt-2">Cloudy</option>
    <option value="opt-3">Rain</option>
    <option value="opt-4">Snow</option>
  </select>
</div>
  • aria-label attribute
Weather condition:
  • ACCNAME: Current weather condition
  • FROM: aria-label
  • ROLE: listbox
 
<div>
  <div class="above">Weather condition:</div>
  <select aria-label="Current weather condition">
    <option value="opt-1">Sunny</option>
    <option value="opt-2">Cloudy</option>
    <option value="opt-3">Rain</option>
    <option value="opt-4">Snow</option>
  </select>
</div>
  • title attribute
Weather condition:
  • ACCNAME: Current weather condition
  • FROM: title
  • ROLE: listbox
 
<div>
  <div class="above">Weather condition:</div>
  <select title="Current weather condition">
    <option value="opt-1">Sunny</option>
    <option value="opt-2">Cloudy</option>
    <option value="opt-3">Rain</option>
    <option value="opt-4">Snow</option>
  </select>
</div>