HTML select element test
Test
- The label should be announced.
- The selected option should be announced.
- If no selected option, the first option should be announced.
- Select elements with required attribute should be announced as "required"
- Select elements with aria-required="true" attribute should be announced as "required"
Example
Code sample
<form method="get" action="#">
<div>
<label for="a">Favourite fruit</label>
<select id="a" name="a">
<option value="" selected>Choose an option</option>
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="banana">Banana</option>
</select>
</div>
<div>
<label for="b">Favourite meat</label>
<select id="b" name="b" required>
<option value="">Choose an option</option>
<option value="beef">Beef</option>
<option value="chicken">Chicken</option>
<option value="pork">Pork</option>
</select>
</div>
<div>
<label for="c">Favourite color</label>
<select id="c" name="c" required aria-required="true">
<option value="">Choose an option</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="row-form">
<label for="d">Favourite city</label>
<select id="d" name="d" aria-required="true">
<option value="">Choose an option</option>
<option value="Sydney">Sydney</option>
<option value="Melbourne">Melbourne</option>
<option value="Canberra">Canberra</option>
</select>
</div>
</form>
OS | Browser | NVDA 2014.4 | JAWS 16 | VoiceOver |
---|---|---|---|---|
Windows 7 | IE 11 |
Example 1: Favourite fruit. combo box. Choose an option. collapsed Example 2: Favourite meat. combo box. Choose an option. collapsed no required announced Example 3: Favourite color. combo box. Choose an option. collapsed. required Example 4: Favourite city. combo box. Choose an option. collapsed. required |
Example 1: Favourite fruit. combo box. Choose an option. To change the selection use the arrow key Example 2: Favourite meat. combo box. Choose an option. To change the selection use the arrow key no required announced Example 3: Favourite color. combo box. Choose an option. To change the selection use the arrow key no required announced Example 4: Favourite city. combo box. Choose an option. To change the selection use the arrow key no required announced |
|
Windows 7 | IE 8 | x | x | |
Windows 7 | Chrome 39 |
Example 1: Favourite fruit. combo box. Choose an option. collapsed Example 2: Favourite meat. combo box. Choose an option. collapsed. required Example 3: Favourite color. combo box. Choose an option. collapsed. required Example 4: Favourite city. combo box. Choose an option. collapsed. required |
Example 1: Favourite fruit. combo box. Choose an option. To change the selection use the arrow key Example 2: Favourite meat. combo box. required. Choose an option. To change the selection use the arrow key Example 3: Favourite color. combo box. required. Choose an option. To change the selection use the arrow key Example 4: Favourite city. combo box. required. Choose an option. To change the selection use the arrow key |
|
Windows 7 | Firefox 34 |
Example 1: Favourite fruit. combo box. Choose an option. collapsed Example 2: Favourite meat. combo box. Choose an option. collapsed. invalid entry. required Example 3: Favourite color. combo box. Choose an option. collapsed. invalid entry. required Example 4: Favourite city. combo box. Choose an option. collapsed. required |
Example 1: Favourite fruit. combo box. Choose an option. To change the selection use the arrow key Example 2: Favourite meat. combo box. required. invalid entry. Choose an option. To change the selection use the arrow key Example 3: Favourite color. combo box. required. invalid entry. Choose an option. To change the selection use the arrow key Example 4: Favourite city. combo box. required. Choose an option. To change the selection use the arrow key |
|
OSX 10.9 | Chrome 39 |
Example 1: Choose an option. Favourite fruit. collapsed popup button Example 2: Choose an option. Favourite meat. collapsed popup button no required announced Example 3: Choose an option. Favourite color. collapsed popup button no required announced Example 4: Choose an option. Favourite city. collapsed popup button no required announced |
||
OSX 10.9 | Firefox 34 |
Example 1: Choose an option. Favourite fruit. popup button Example 2: Choose an option. Favourite meat. popup button no required announced Example 3: Choose an option. Favourite color. popup button no required announced Example 4: Choose an option. Favourite city. popup button no required announced |
||
OSX 10.9 | Safari 7 |
Example 1: Choose an option. Favourite fruit. popup button Example 2: Choose an option. Favourite meat. popup button no required announced Example 3: Choose an option. Favourite color. popup button no required announced Example 4: Choose an option. Favourite city. popup button no required announced |