The various techniques for associating an accessible name with select
Labeling Technique | Test | Expected Results | Test Source Code |
---|---|---|---|
|
|
|
<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> |
|
|
|
<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> |
|
Weather condition:
|
|
<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> |
|
Weather condition:
|
|
<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> |
|
Weather condition:
|
|
<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> |