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
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 |